feat: pipeline table legend (#563)

sunchanglong · web-flow · commit 73065c940d2d · 2025-09-05T15:53:50.000+08:00
* style: pipeline table sematic color

* build: tauri version

* fix: sed version for mac

* fix: datatype test

* style: refine layout

* style: more unify

* fix: date type

* fix: date format
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -11,7 +11,7 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
     outputs:
-      tag_name: ${{ steps.get_tag.outputs.tag_name }}  # Store tag for other jobs
+      tag_name: ${{ steps.get_tag.outputs.tag_name }} # Store tag for other jobs
     steps:
       - name: Checkout sources
         uses: actions/checkout@v4
@@ -50,8 +50,6 @@ jobs:
         id: get_tag
         run: echo "tag_name=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
 
-
-
   publish-tauri:
     needs: build
     permissions:
@@ -73,7 +71,7 @@ jobs:
     env:
       TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
       TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD}}
-      RELEASE_TAG: ${{ needs.build.outputs.tag_name }}  # Get the release tag from the build job
+      RELEASE_TAG: ${{ needs.build.outputs.tag_name }} # Get the release tag from the build job
     steps:
       - uses: actions/checkout@v4
 
@@ -133,6 +131,18 @@ jobs:
           Remove-Item -path certificate -include tempCert.txt
           Import-PfxCertificate -FilePath certificate/certificate.pfx -CertStoreLocation Cert:\CurrentUser\My -Password (ConvertTo-SecureString -String $env:WINDOWS_CERTIFICATE_PASSWORD -Force -AsPlainText)
 
+      - name: Update tauri version to match tag
+        run: |
+          # Extract version from tag (remove 'v' prefix if present)
+          VERSION=${RELEASE_TAG#v}
+          # Update tauri.conf.json with the tag version
+          if [[ "$RUNNER_OS" == "Windows" ]]; then
+            powershell -Command "(Get-Content src-tauri/tauri.conf.json) -replace '\"version\": \"[^\"]*\"', '\"version\": \"$VERSION\"' | Set-Content src-tauri/tauri.conf.json"
+          else
+            # Linux/macOS - use empty string for macOS compatibility
+            sed -i '' "s/\"version\": \"[^\"]*\"/\"version\": \"$VERSION\"/" src-tauri/tauri.conf.json
+          fi
+
       - uses: tauri-apps/tauri-action@v0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/components/data-table/index.vue b/src/components/data-table/index.vue
@@ -38,13 +38,17 @@
                   placement="top"
                   :content="tsViewStr ? $t('dashboard.showTimestamp') : $t('dashboard.formatTimestamp')"
                 )
-                  a-space(size="mini" :style="{ cursor: 'pointer' }" @click="changeTsView")
+                  a-space(
+                    size="mini"
+                    :style="{ cursor: 'pointer' }"
+                    :class="col.semantic_type?.toLowerCase()"
+                    @click="changeTsView"
+                  )
                     svg.icon-12
                       use(href="#time-index")
                     | {{ col.name }}
               template(v-else)
-                | {{ col.title || col.name }}
-
+                span(:class="col.semantic_type?.toLowerCase()") {{ col.title || col.name }}
           // Custom cell slot - allow parent components to override cell rendering
           template(#cell="{ record, rowIndex }")
             slot(
@@ -109,8 +113,10 @@ a-dropdown#td-context(
   import { ref, computed, shallowRef } from 'vue'
   import { useElementSize } from '@vueuse/core'
   import dayjs from 'dayjs'
+  import { dateTypes } from '@/views/dashboard/config'
   import { convertTimestampToMilliseconds } from '@/utils/date-time'
   import type { ColumnType, TSColumn } from '@/types/query'
+  import { dateFormatter } from '@/utils'
 
   interface TableData {
     [key: string]: any
@@ -197,7 +203,7 @@ a-dropdown#td-context(
 
   // Timestamp utilities
   function isTimeColumn(column: ColumnType) {
-    return column.data_type.toLowerCase().includes('timestamp')
+    return dateTypes.indexOf(column.data_type) > -1
   }
 
   // Width calculation utilities
@@ -347,6 +353,7 @@ a-dropdown#td-context(
 
   function renderTs(record: any, columnName: string) {
     const timestamp = record[columnName]
+
     if (!timestamp) return timestamp
 
     if (tsViewStr.value) {
@@ -355,7 +362,7 @@ a-dropdown#td-context(
       if (!column) return timestamp
 
       // Use universal conversion function
-      const ms = convertTimestampToMilliseconds(timestamp, column.data_type)
+      const ms = dateFormatter(column.data_type, timestamp)
       return dayjs(ms).format('YYYY-MM-DD HH:mm:ss.SSS')
     }
 
diff --git a/src/views/dashboard/logs/pipelines/PipeFileView.vue b/src/views/dashboard/logs/pipelines/PipeFileView.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
-a-layout.full-height-layout(style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08); height: calc(100vh - 30px)")
+a-layout.full-height-layout.pipefile-view(
+  style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08); height: calc(100vh - 30px)"
+)
   a-layout-sider(style="width: 45%" :resize-directions="['right']")
     a-card.light-editor-card(:bordered="false")
       template(#title)
@@ -49,7 +51,7 @@ a-layout.full-height-layout(style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
           div 
         .full-width-height-editor.pipeline-editor(:class="editorHeightClass")
           YMLEditorSimple(v-model="currFile.content" style="width: 100%; height: 100%")
-  a-layout-content.content-wrapper(style="display: flex; flex-direction: column; gap: 24px; padding-bottom: 22px")
+  a-layout-content.content-wrapper(style="display: flex; flex-direction: column; padding-bottom: 22px")
     a-card.light-editor-card(title="Input" :bordered="false")
       template(#extra)
         a-space
@@ -63,7 +65,7 @@ a-layout.full-height-layout(style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
             a-option(value="application/json") json
             a-option(value="application/x-ndjson") ndjson
 
-          a-button(size="small" @click="handleDebug") Test
+          a-button(size="small" type="primary" @click="handleDebug") Test
 
       template(#title)
         .card-title-with-description
@@ -82,7 +84,7 @@ a-layout.full-height-layout(style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
           :indent-with-tab="true"
           :tabSize="2"
         )
-
+    .section-divider
     a-card.light-editor-card.output(title="Output" :bordered="false")
       template(#extra)
         a-radio-group.output-view-toggle(v-model="outputViewMode" type="button" size="small")
@@ -94,17 +96,38 @@ a-layout.full-height-layout(style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
           .card-title Output
           .card-description Processed logs displayed here. Logs that ingested via API will follow this structure.
 
+      // Semantic Type Legend
+      .semantic-legend(
+        v-if="outputViewMode === 'table' && parsedOutputData.records && parsedOutputData.records.rows.length > 0"
+      )
+        .legend-items
+          .legend-item
+            .legend-color.field
+            .legend-label Field
+          .legend-item
+            .legend-color.tag
+            .legend-label Tag
+          .legend-item
+            .legend-color.timestamp
+            .legend-label Timestamp
+
       a-empty(
         v-if="parsedOutputData.records && parsedOutputData.records.rows.length === 0"
-        style="border: 1px solid var(--color-border); border-radius: 2px; height: 100%; display: flex; align-items: center; justify-content: center; margin-top: 8px; flex: 1"
+        style="border: 1px solid var(--color-border); border-radius: 2px; height: 100%; display: flex; align-items: center; justify-content: center; flex: 1"
         description="No parsed data. Click Test to see results."
       )
 
       // Table View
       .output-table(
         v-if="outputViewMode === 'table' && parsedOutputData.records && parsedOutputData.records.rows.length > 0"
       )
-        DataGrid(:data="parsedOutputData" :has-header="false")
+        DataTable(
+          :data="tableData"
+          :columns="tableColumns"
+          :loading="false"
+          :show-context-menu="false"
+          :wrap-line="true"
+        )
 
       // JSON View  
       .full-width-height-editor(
@@ -129,7 +152,10 @@ a-layout.full-height-layout(style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
   import { json } from '@codemirror/lang-json'
   import { create, list, del, debugContent, getByName } from '@/api/pipeline'
   import type { PipeFile } from '@/api/pipeline'
+  import type { ColumnType } from '@/types/query'
   import router from '@/router'
+  import DataTable from '@/components/data-table/index.vue'
+  import { toObj } from '../query/until'
 
   const emit = defineEmits(['refresh', 'del'])
   const props = defineProps<{
@@ -290,6 +316,10 @@ transform:
     type: 'table',
   })
 
+  // DataTable specific variables
+  const tableData = ref<Array<any>>([])
+  const tableColumns = ref<Array<ColumnType>>([])
+
   function handleDebug() {
     debugContent(currFile.content, debugForm.content, selectedContentType.value).then((result) => {
       debugResponse.value = JSON.stringify(result[0], null, 2)
@@ -300,7 +330,7 @@ transform:
       })
       const schema = result[0].schema || []
 
-      // Parse response for DataGrid format
+      // Parse response for DataGrid format (keep for compatibility)
       parsedOutputData.value = {
         records: {
           rows,
@@ -318,6 +348,19 @@ transform:
         key: Date.now(),
         type: 'table',
       }
+
+      // Update DataTable format
+      const schemas = schema.map((col) => ({
+        name: col.name,
+        title: col.name,
+        data_type: col.data_type || 'String',
+        semantic_type: col.colume_type,
+      }))
+
+      tableColumns.value = schemas
+      tableData.value = rows.map((row, index) => {
+        return toObj(row, schemas, index, null)
+      })
     })
   }
 
@@ -378,7 +421,6 @@ transform:
     }
     :deep(.arco-card-header) {
       flex-shrink: 0;
-      margin-top: 12px;
     }
   }
 
@@ -441,4 +483,109 @@ transform:
       overflow: hidden;
     }
   }
+
+  // ===================
+  // SEMANTIC TYPE STYLES
+  // ===================
+
+  // Define semantic type colors as CSS variables at component level
+  .pipefile-view {
+    --semantic-field-bg: #f6ffed;
+    --semantic-field-text: #36b174;
+    --semantic-field-legend: #36b174;
+
+    --semantic-tag-bg: #fff7e6;
+    --semantic-tag-text: #e1b84d;
+    --semantic-tag-legend: #e1b84d;
+
+    --semantic-timestamp-bg: #e6f4ff;
+    --semantic-timestamp-text: #417aff;
+    --semantic-timestamp-legend: #417aff;
+    font-size: 13px;
+  }
+
+  .semantic-legend {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 12px;
+    justify-content: flex-end;
+
+    .legend-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-2);
+    }
+
+    .legend-items {
+      display: flex;
+      gap: 16px;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .legend-color {
+        width: 12px;
+        height: 12px;
+        border-radius: 2px;
+        border: 1px solid var(--color-border-3);
+
+        &.field {
+          background-color: var(--semantic-field-legend);
+        }
+
+        &.tag {
+          background-color: var(--semantic-tag-legend);
+        }
+
+        &.timestamp {
+          background-color: var(--semantic-timestamp-legend);
+        }
+      }
+
+      .legend-label {
+        font-size: 12px;
+        color: var(--color-text-2);
+      }
+    }
+  }
+
+  .output-table {
+    :deep(.arco-table-th-title) {
+      .timestamp {
+        background-color: var(--semantic-timestamp-bg);
+        color: var(--semantic-timestamp-text);
+        padding: 2px 4px;
+      }
+
+      .field {
+        background-color: var(--semantic-field-bg);
+        color: var(--semantic-field-text);
+        padding: 2px 4px;
+      }
+
+      .tag {
+        background-color: var(--semantic-tag-bg);
+        color: var(--semantic-tag-text);
+        padding: 2px 4px;
+      }
+    }
+    :deep(.arco-table-size-medium .arco-table-td) {
+      font-size: 13px;
+    }
+  }
+  .light-editor-card :deep(.arco-card-header) {
+    border-bottom: 1px solid var(--color-border);
+    height: 70px;
+  }
+  .section-divider {
+    height: 6px;
+    background: var(--color-neutral-3);
+    border: none;
+    margin: 10px 0 0;
+    position: relative;
+  }
 </style>
