#115 add messages

src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue

@@ -20,13 +20,18 @@
     </div>
     <div class="value-body">
       <codemirror
-        v-if="currentFormat === 'json'"
+        v-if="currentFormat === 'json' && formattedJson"
         :value="formattedJson"
         :options="cmOptions"
       />
-      <div v-else class="text-value">
+      <div v-if="currentFormat === 'text'" class="text-value">
         {{ cellValue }}
       </div>
+      <logs
+        v-if="messages && messages.length > 0"
+        :messages="messages"
+        class="messages"
+      />
     </div>
   </div>
 </template>
@@ -41,10 +46,12 @@ import 'codemirror/addon/fold/foldgutter.css'
 import 'codemirror/addon/fold/brace-fold.js'
 import 'codemirror/theme/neo.css'
 import cIo from '@/lib/utils/clipboardIo'
+import Logs from '@/components/Logs'
 
 export default {
   components: {
-    codemirror
+    codemirror,
+    Logs
   },
   props: {
     cellValue: [String, Number]
@@ -66,7 +73,8 @@ export default {
         gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
         readOnly: true
       },
-      formattedJson: ''
+      formattedJson: '',
+      messages: []
     }
   },
   watch: {
@@ -84,12 +92,17 @@ export default {
   },
   methods: {
     formatJson (jsonStr) {
+      this.messages = []
       try {
         this.formattedJson = JSON.stringify(
           JSON.parse(jsonStr), null, 4
         )
       } catch {
         this.formattedJson = ''
+        this.messages = [{
+          type: 'error',
+          message: 'Can\'t parse JSON.'
+        }]
       }
     },
     copyToClipboard () {
@@ -123,6 +136,10 @@ export default {
   color: var(--color-text-base);
 }
 
+.messages {
+  margin: 8px;
+}
+
 .value-viewer-toolbar button {
   font-size: 10px;
   height: 20px;

src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue

@@ -17,6 +17,9 @@
             v-show="selectedCell"
             :cellValue="selectedCell ? selectedCell.innerText : ''"
           />
+          <div v-show="!selectedCell" class="table-preview">
+            No cell selected to view
+          </div>
         </div>
       </template>
     </component>
@@ -314,6 +317,7 @@ export default {
   height: 100%;
   width: 100%;
   background-color: var(--color-white);
+  position: relative;
 }
 
 .table-preview {
@@ -323,6 +327,7 @@ export default {
   transform: translate(-50%, -50%);
   color: var(--color-text-base);
   font-size: 13px;
+  text-align: center;
 }
 
 .result-in-progress {