Discover: sideBar trace done.

2023-03-27 13:15:50 +08:00
parent 1653b85afc
commit c10cf99b75
13 changed files with 441 additions and 257 deletions
--- a/src/components/Discover/sidebarState.vue
+++ b/src/components/Discover/sidebarState.vue
@@ -15,7 +15,7 @@
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ numberLabel(stats.cases.count) }} / {{ numberLabel(stats.cases.total) }}</span>
-              <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+              <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.cases.ratio) }}</span>
          </div>
@@ -25,7 +25,7 @@
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ numberLabel(stats.traces.count) }} / {{ numberLabel(stats.traces.total) }}</span>
-              <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+              <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.traces.ratio) }}</span>
          </div>
@@ -35,7 +35,7 @@
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ numberLabel(stats.task_instances.count) }} / {{ numberLabel(stats.task_instances.total) }}</span>
-              <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+              <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
          </div>
@@ -45,7 +45,7 @@
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ numberLabel(stats.tasks.count) }} / {{ numberLabel(stats.tasks.total) }}</span>
-              <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2"></ProgressBar>
+              <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.tasks.ratio) }}</span>
          </div>
@@ -116,9 +116,8 @@
              <TabPanel header="Self-loop">
                <p v-if="insights.self_loops.length === 0">No data</p>
                <ul v-else class="list-disc ml-6">
-                  <li>
-                    <span v-for="(value, key) in insights.self_loops" :key="key">{{ value }}<span v-if="key !== insights.self_loops.length -1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
-                    </span>
+                  <li v-for="(value, key) in insights.self_loops" :key="key">
+                    <span>{{ value }}</span>
                  </li>
                </ul>
              </TabPanel>
@@ -126,7 +125,7 @@
                <p v-if="insights.short_loops.length === 0">No data</p>
                <ul v-else class="list-disc ml-6">
                  <li class="break-words" v-for="(item, key) in insights.short_loops" :key="key">
-                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
+                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">sync_alt</span>&nbsp;</span>
                    </span>
                  </li>
                </ul>
@@ -194,36 +193,37 @@ export default {
      valueTaskInstances: 0,
      valueTasks: 0,
      active1: 0,
-      nnnstats:this.stats
    }
  },
  methods: {
    /**
-     * switch Summary or Insight
+     * @param {string} switch Summary or Insight
     */
    switchTab(tab) {
      this.tab = tab;
    },
    /**
-     * use timeLabel.js
+     * @param {number} time use timeLabel.js
     */
    timeLabel(time){
      return getTimeLabel(time);
    },
    /**
-     * use moment
+     * @param {number} time use moment
     */
    moment(time){
      return getMoment(time).format('YYYY-MM-DD HH:mm');
    },
    /**
-     * use numberLabel.js
+     * @param {number} num use numberLabel.js
     */
    numberLabel(num){
      return getNumberLabel(num);
    },
    /**
     * Number to percentage
+     * @param   {number} val
+     * @returns {string}     轉換完成的百分比字串
     */
    getPercentLabel(val){
      if(val * 100 === 100) return `${val * 100}%`;
--- a/src/components/Discover/sidebarTraces.vue
+++ b/src/components/Discover/sidebarTraces.vue
@@ -1,12 +1,12 @@
 <template>
-  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
+  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12" @show="show()">
    <template #header>
      <p class="h1">Traces</p>
    </template>
    <div class="pt-4 h-full flex items-center justify-start">
      <!-- Trace List -->
      <section class="w-80 h-full pr-4 border-r border-neutral-300">
-        <p class="h2 px-2 mb-2">Trace List (25)</p>
+        <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
        <p class="text-primary h2 px-2 mb-2">
          <span class="material-symbols-outlined text-base align-[-10%] mr-2">info</span>Click trace number to see more.
        </p>
@@ -19,13 +19,15 @@
              </tr>
            </thead>
            <tbody>
-              <tr>
-                <td class="text-xs p-2">#365</td>
+              <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @dblclick="switchCaseData(trace.id)">
+                <td class="text-xs p-2">#{{ trace.id }}</td>
                <td class="text-xs p-2 w-24">
-                  <ProgressBar :value="80" :showValue="false" class="!h-4"></ProgressBar>
+                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+                    <div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
+                  </div>
                </td>
-                <td class="text-xs py-2">1,234,567,890</td>
-                <td class="text-xs p-2">100%</td>
+                <td class="text-xs py-2 text-right">{{ trace.count }}</td>
+                <td class="text-xs p-2">{{ trace.ratio }}</td>
              </tr>
            </tbody>
          </table>
@@ -33,16 +35,17 @@
      </section>
      <!-- Trace item Table -->
      <section class="pl-4 h-full w-[calc(100%_-_320px)]">
-        <p class="h2 mb-2">Trace #501</p>
-        <div class="h-52 px-2 mb-2 border border-neutral-300 rounded">
-          <div class="h-full scrollbar overflow-x-auto">
+        <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
+        <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
+          <div class="h-full w-full scrollbar overflow-x-auto">
+            <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
          </div>
        </div>
-          <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
-          <DataTable :value="products" showGridlines>
-            <Column field="code" header="Code" sortable></Column>
-            <Column field="name" header="Name" sortable></Column>
-            <Column field="category" header="Category" sortable></Column>
+        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
+          <DataTable :value="cases" showGridlines>
+            <Column field="id" header="Case ID" sortable></Column>
+            <Column field="started_at" header="Start time" sortable></Column>
+            <Column field="completed_at" header="End time" sortable></Column>
          </DataTable>
        </div>
      </section>
@@ -51,211 +54,142 @@
 </template>

 <script>
+import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
+
 export default {
  props: {
    sidebarTraces: {
      type: Boolean,
      require: true,
    },
+    traces: {
+      type: Array,
+      required: true,
+    },
+    traceTaskSeq: {
+      type: Array,
+      required: true,
+    },
+    cases: {
+      type: Array,
+      required: true,
+    },
  },
  data() {
    return {
-      products: [
-      {
-          id: '1000',
-          code: 'f230fh0g3',
-          name: 'Bamboo Watch',
-          description: 'Product Description',
-          image: 'bamboo-watch.jpg',
-          price: 65,
-          category: 'Accessories',
-          quantity: 24,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
+      processMap:{
+        nodes:[],
+        edges:[],
      },
-      {
-          id: '1001',
-          code: 'nvklal433',
-          name: 'Black Watch',
-          description: 'Product Description',
-          image: 'black-watch.jpg',
-          price: 72,
-          category: 'Accessories',
-          quantity: 61,
-          inventoryStatus: 'INSTOCK',
-          rating: 4
-      },
-      {
-          id: '1002',
-          code: 'zz21cz3c1',
-          name: 'Blue Band',
-          description: 'Product Description',
-          image: 'blue-band.jpg',
-          price: 79,
-          category: 'Fitness',
-          quantity: 2,
-          inventoryStatus: 'LOWSTOCK',
-          rating: 3
-      },
-      {
-          id: '1003',
-          code: '244wgerg2',
-          name: 'Blue T-Shirt',
-          description: 'Product Description',
-          image: 'blue-t-shirt.jpg',
-          price: 29,
-          category: 'Clothing',
-          quantity: 25,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
-      },
-      {
-          id: '1000',
-          code: 'f230fh0g3',
-          name: 'Bamboo Watch',
-          description: 'Product Description',
-          image: 'bamboo-watch.jpg',
-          price: 65,
-          category: 'Accessories',
-          quantity: 24,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
-      },
-      {
-          id: '1001',
-          code: 'nvklal433',
-          name: 'Black Watch',
-          description: 'Product Description',
-          image: 'black-watch.jpg',
-          price: 72,
-          category: 'Accessories',
-          quantity: 61,
-          inventoryStatus: 'INSTOCK',
-          rating: 4
-      },
-      {
-          id: '1002',
-          code: 'zz21cz3c1',
-          name: 'Blue Band',
-          description: 'Product Description',
-          image: 'blue-band.jpg',
-          price: 79,
-          category: 'Fitness',
-          quantity: 2,
-          inventoryStatus: 'LOWSTOCK',
-          rating: 3
-      },
-      {
-          id: '1003',
-          code: '244wgerg2',
-          name: 'Blue T-Shirt',
-          description: 'Product Description',
-          image: 'blue-t-shirt.jpg',
-          price: 29,
-          category: 'Clothing',
-          quantity: 25,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
-      },
-      {
-          id: '1000',
-          code: 'f230fh0g3',
-          name: 'Bamboo Watch',
-          description: 'Product Description',
-          image: 'bamboo-watch.jpg',
-          price: 65,
-          category: 'Accessories',
-          quantity: 24,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
-      },
-      {
-          id: '1001',
-          code: 'nvklal433',
-          name: 'Black Watch',
-          description: 'Product Description',
-          image: 'black-watch.jpg',
-          price: 72,
-          category: 'Accessories',
-          quantity: 61,
-          inventoryStatus: 'INSTOCK',
-          rating: 4
-      },
-      {
-          id: '1002',
-          code: 'zz21cz3c1',
-          name: 'Blue Band',
-          description: 'Product Description',
-          image: 'blue-band.jpg',
-          price: 79,
-          category: 'Fitness',
-          quantity: 2,
-          inventoryStatus: 'LOWSTOCK',
-          rating: 3
-      },
-      {
-          id: '1003',
-          code: '244wgerg2',
-          name: 'Blue T-Shirt',
-          description: 'Product Description',
-          image: 'blue-t-shirt.jpg',
-          price: 29,
-          category: 'Clothing',
-          quantity: 25,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
-      },
-      {
-          id: '1000',
-          code: 'f230fh0g3',
-          name: 'Bamboo Watch',
-          description: 'Product Description',
-          image: 'bamboo-watch.jpg',
-          price: 65,
-          category: 'Accessories',
-          quantity: 24,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
-      },
-      {
-          id: '1001',
-          code: 'nvklal433',
-          name: 'Black Watch',
-          description: 'Product Description',
-          image: 'black-watch.jpg',
-          price: 72,
-          category: 'Accessories',
-          quantity: 61,
-          inventoryStatus: 'INSTOCK',
-          rating: 4
-      },
-      {
-          id: '1002',
-          code: 'zz21cz3c1',
-          name: 'Blue Band',
-          description: 'Product Description',
-          image: 'blue-band.jpg',
-          price: 79,
-          category: 'Fitness',
-          quantity: 2,
-          inventoryStatus: 'LOWSTOCK',
-          rating: 3
-      },
-      {
-          id: '1003',
-          code: '244wgerg2',
-          name: 'Blue T-Shirt',
-          description: 'Product Description',
-          image: 'blue-t-shirt.jpg',
-          price: 29,
-          category: 'Clothing',
-          quantity: 25,
-          inventoryStatus: 'INSTOCK',
-          rating: 5
-      },
-      ],
+      showTraceId: 1,
    }
  },
+  computed: {
+    traceTotal: function() {
+      return this.traces.length;
+    },
+    traceList: function() {
+      let list = [];
+
+      this.traces.forEach((trace, index) => {
+        let data = {
+          id: trace.id,
+          value: Number((trace.ratio * 100).toFixed(1)),
+          count: trace.count,
+          ratio: this.getPercentLabel(trace.ratio),
+        };
+
+        list.push(data);
+      });
+
+      return list;
+    },
+  },
+  methods: {
+    /**
+     * Number to percentage
+     * @param   {number} val
+     * @returns {string}     轉換完成的百分比字串
+     */
+    getPercentLabel(val){
+      return (val * 100 === 100) ? `${val * 100}%` : `${(val * 100).toFixed(1)}%`;
+    },
+    /**
+     * set progress bar width
+     * @param   {number} value
+     * @returns {string}      樣式的寬度設定
+     */
+    progressWidth(value){
+      return `width:${value}%;`
+    },
+    /**
+     * switch case data
+     * @param {number} id
+     */
+    async switchCaseData(id) {
+      this.showTraceId = id;
+      this.$emit('switch-Trace-Id', this.showTraceId);
+    },
+    /**
+     * 將 trace element nodes 資料彙整
+     */
+    setNodesData(){
+      // 避免每次渲染都重複累加
+      this.processMap.nodes = [];
+      // 將 api call 回來的資料帶進 node
+      this.traceTaskSeq.forEach((node, index) => {
+        this.processMap.nodes.push({
+          data: {
+            id: index,
+            label: node,
+            backgroundColor: '#CCE5FF',
+            bordercolor: '#003366',
+            shape: 'round-rectangle',
+            height: 80,
+            width: 100
+          }
+        });
+      })
+    },
+    /**
+     * 將 trace edge line 資料彙整
+     */
+    setEdgesData(){
+      this.processMap.edges = [];
+      this.traceTaskSeq.forEach((edge, index) => {
+        this.processMap.edges.push({
+          data: {
+            source: `${index}`,
+            target: `${index + 1}`,
+            lineWidth: 1,
+            style: 'solid'
+          }
+        });
+      });
+      // 關係線數量筆節點少一個
+      this.processMap.edges.pop();
+    },
+    /**
+     * create trace cytoscape's map
+     */
+     createCy(){
+      let graphId = this.$refs.cyTrace;
+
+      this.setNodesData();
+      this.setEdgesData();
+      cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
+    },
+     show() {
+      this.setNodesData();
+      this.setEdgesData();
+      this.createCy();
+    }
+  },
+  created(){
+  },
+  mounted() {
+  }
+
 }
 </script>