feat: 记录流模式首字时间 (close #323)

web/src/components/LogsTable.js

@@ -29,6 +29,7 @@ import {
   stringToColor,
 } from '../helpers/render';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
+import {getLogOther} from "../helpers/other.js";
 
 const { Header } = Layout;
 
@@ -141,6 +142,33 @@ function renderUseTime(type) {
   }
 }
 
+function renderFirstUseTime(type) {
+  let time = parseFloat(type) / 1000.0;
+  time = time.toFixed(1)
+  if (time < 3) {
+    return (
+        <Tag color='green' size='large'>
+          {' '}
+          {time} s{' '}
+        </Tag>
+    );
+  } else if (time < 10) {
+    return (
+        <Tag color='orange' size='large'>
+          {' '}
+          {time} s{' '}
+        </Tag>
+    );
+  } else {
+    return (
+        <Tag color='red' size='large'>
+          {' '}
+          {time} s{' '}
+        </Tag>
+    );
+  }
+}
+
 const LogsTable = () => {
   const columns = [
     {
@@ -247,17 +275,30 @@ const LogsTable = () => {
       },
     },
     {
-      title: '用时',
+      title: '用时/首字',
       dataIndex: 'use_time',
       render: (text, record, index) => {
-        return (
-          <div>
-            <Space>
-              {renderUseTime(text)}
-              {renderIsStream(record.is_stream)}
-            </Space>
-          </div>
-        );
+        if (record.is_stream) {
+          let other = getLogOther(record.other);
+          return (
+              <div>
+                <Space>
+                  {renderUseTime(text)}
+                  {renderFirstUseTime(other.frt)}
+                  {renderIsStream(record.is_stream)}
+                </Space>
+              </div>
+          );
+        } else {
+          return (
+              <div>
+                <Space>
+                  {renderUseTime(text)}
+                  {renderIsStream(record.is_stream)}
+                </Space>
+              </div>
+          );
+        }
       },
     },
     {
@@ -325,10 +366,7 @@ const LogsTable = () => {
       title: '详情',
       dataIndex: 'content',
       render: (text, record, index) => {
-        if (record.other === '') {
-          record.other = '{}'
-        }
-        let other = JSON.parse(record.other);
+        let other = getLogOther(record.other);
         if (other == null) {
           return (
             <Paragraph

web/src/helpers/other.js

@@ -0,0 +1,7 @@
+export function getLogOther(otherStr) {
+    if (otherStr === undefined || otherStr === '') {
+        otherStr = '{}'
+    }
+    let other = JSON.parse(otherStr)
+    return other
+}