view JSON log message

packages/web/src/query/MessageView.svelte

@@ -1,19 +1,5 @@
-<script lang="ts" context="module">
-  function formatDuration(duration) {
-    if (duration == 0) return '0';
-    if (duration < 1000) {
-      return `${Math.round(duration)} ms`;
-    }
-    if (duration < 10000) {
-      return `${Math.round(duration / 100) / 10} s`;
-    }
-    return `${Math.round(duration / 1000)} s`;
-  }
-</script>
-
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import moment from 'moment';
+  import MessageViewRow from './MessageViewRow.svelte';
 
   export let items: any[];
   export let showProcedure = false;
@@ -22,8 +8,6 @@
 
   $: time0 = items[0] && new Date(items[0].time).getTime();
 
-  const dispatch = createEventDispatcher();
-
   // $: console.log('MESSAGE ROWS', items);
 </script>
 
@@ -43,28 +27,16 @@
       {/if}
     </tr>
     {#each items as row, index}
-      <tr
-        class:isError={row.severity == 'error'}
-        class:isDebug={row.severity == 'debug'}
-        class:isActive={row.line}
-        on:click={() => dispatch('messageclick', row)}
-      >
-        <td>{index + 1}</td>
-        <td>{row.message}</td>
-        <td>{moment(row.time).format('HH:mm:ss')}</td>
-        <td>{formatDuration(new Date(row.time).getTime() - time0)}</td>
-        <td>
-          {index > 0
-            ? formatDuration(new Date(row.time).getTime() - new Date(items[index - 1].time).getTime())
-            : 'n/a'}</td
-        >
-        {#if showProcedure}
-          <td>{row.procedure || ''}</td>
-        {/if}
-        {#if showLine}
-          <td>{row.line == null ? '' : row.line + 1 + startLine}</td>
-        {/if}
-      </tr>
+      <MessageViewRow
+        {row}
+        {index}
+        {showProcedure}
+        {showLine}
+        {time0}
+        {startLine}
+        previousRow={index > 0 ? items[index - 1] : null}
+        on:messageclick
+      />
     {/each}
   </table>
 </div>
@@ -86,23 +58,4 @@
     border-spacing: 0;
     border-collapse: collapse;
   }
-  td.header {
-    text-align: left;
-    border-bottom: 2px solid var(--theme-border);
-    background-color: var(--theme-bg-1);
-    padding: 5px;
-  }
-  td:not(.header) {
-    border-top: 1px solid var(--theme-border);
-    padding: 5px;
-  }
-  tr.isActive:hover {
-    background: var(--theme-bg-2);
-  }
-  tr.isError {
-    color: var(--theme-icon-red);
-  }
-  tr.isDebug {
-    color: var(--theme-font-3);
-  }
 </style>