display trace data in table (#129)

* add trace-detail display page with table

src/assets/index.ts

@@ -28,6 +28,7 @@ import './svg/clear.svg';
 import './svg/issue-child.svg';
 import './svg/package.svg';
 import './svg/list-bulleted.svg';
+import './svg/table.svg';
 
 import './svg/earth.svg';
 import './svg/epic.svg';

src/assets/lang/en.ts

@@ -82,6 +82,7 @@ const m = {
   tags: 'Tags',
   logs: 'Logs',
   component: 'Component',
+  table: 'Table',
   list: 'List',
   tree: 'Tree',
   filterScope: 'Filter Scope',

src/assets/lang/zh.ts

@@ -82,6 +82,7 @@ const m = {
   tags: '标记',
   logs: '日志',
   component: '组件',
+  table: '表格',
   list: '列表',
   tree: '树结构',
   filterScope: '过滤范围',

src/store/modules/global/index.ts

@@ -19,6 +19,7 @@ import { Commit, ActionTree, MutationTree, GetterTree, Getter } from 'vuex';
 import getLocalTime from '@/utils/localtime';
 import { Duration, DurationTime } from '@/types/global';
 import * as types from '@/store/mutation-types';
+import Vue from 'vue';
 
 let timer: any = null;
 
@@ -76,6 +77,7 @@ export interface State {
   edit: boolean;
   lock: boolean;
   utc: string | number;
+  eventHub: any;
 }
 
 const initState: State = {
@@ -89,10 +91,14 @@ const initState: State = {
   edit: false,
   lock: true,
   utc: window.localStorage.getItem('utc') || -(new Date().getTimezoneOffset() / 60),
+  eventHub: new Vue(),
 };
 
 // getters
 const getters = {
+  globalEventHub(state: State): any {
+    return state.eventHub;
+  },
   duration(state: State): Duration {
     return {
       start: getLocalTime(parseInt(state.utc + '', 10), state.durationRow.start),

src/utils/tooltip.scss

@@ -53,6 +53,10 @@ $tooltip-bg:               #252a2f !default;
   }
 }
 
+.trace-detail-chart-table .rk-tooltip-popper .rk-tooltip-inner  {
+  max-width: 500px;
+} 
+
 // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
 .rk-tooltip-popper {
   &[x-placement^="top"] {

src/utils/tooltip.ts

@@ -110,6 +110,8 @@ export default {
 
     const $inner = document.createElement('div');
     $inner.setAttribute('class', 'rk-tooltip-inner');
+
+
     $content.appendChild($inner);
     $popper.appendChild($content);
     if (binding.value) {

src/views/components/trace/trace-chart-table/trace-container.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="trace">
+      <div class="trace-header">
+        <div class="method">
+          Method
+        </div>
+        <div class="start-time">
+          Start Time
+        </div>
+        <div class="gap">
+          Gap(ms)
+        </div>
+        <div class="exec-ms">
+          Exec(ms)
+        </div>
+        <div class="exec-percent">
+          Exec(%)
+        </div>
+        <div class="self">
+          Self(ms)
+        </div>
+        <div class="api">
+          API
+        </div>
+        <div class="application">
+          Service
+        </div>
+      </div>
+
+      <slot> </slot>
+    </div>
+</template>
+<style lang="scss" scoped>
+@import './trace.scss';
+.trace {
+    font-size: 12px;
+    height: 100%;
+    overflow: auto;
+  }
+  .trace-header {
+    display: flex;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .trace-header div {
+    padding: 0 4px;
+    border: 1px solid transparent;
+    border-right: 1px dotted silver;
+    line-height: 30px;
+    background-color: #f3f4f9;;
+    padding: 0 4px;
+    border: 1px solid transparent;
+    border-right: 1px dotted silver;
+    overflow: hidden;
+    line-height: 30px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap        
+  }
+</style>
+

src/views/components/trace/trace-chart-table/trace-item.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+      <div @click="showSelectSpan" :class="['trace-item', 'level'+( data.level - 1)]">
+        <div :class="['method', 'level'+( data.level - 1)]" :style="{'text-indent': (data.level - 1) * 10 + 'px' }">
+          <span 
+              v-if="data.children && data.children.length > 0" 
+              @click.stop="toggle" 
+              :class="['trace-table-toggle', displayChildren? 'collapse': 'expand']">
+
+          </span>
+          <span v-tooltip:bottom="{content: data.endpointName, popperCls: ['trace-table-tooltip']}">
+            {{data.endpointName}}
+          </span>
+        </div>
+        <div class="start-time">
+          {{formatTime(data.startTime)}}
+        </div>
+        <div class="gap">
+          0
+        </div>
+        <div class="exec-ms">
+         {{(data.endTime - data.startTime)?(data.endTime - data.startTime) : '0'}} 
+        </div>
+        <div class="exec-percent">
+          <div class="outer-progress_bar" :style="{width: outterPercent}">
+              <div class="inner-progress_bar" :style="{width: innerPercent}"></div>
+          </div>
+        </div>
+        <div class="self">
+          {{data.dur ? data.dur + '' : '0'}}
+        </div>
+        <div class="api">
+          <span v-tooltip:bottom="data.component||'-'">{{data.component || '-'}}</span>
+        </div>
+        <div class="application">
+          <span v-tooltip:bottom="data.serviceCode||'-'">{{data.serviceCode}}</span>
+        </div>
+      </div>      
+    <div v-show="data.children && data.children.length > 0 && displayChildren" class="children-trace">
+        <item v-for="(item, index) in data.children" :key="index" :data="item"> </item>
+    </div>
+  </div>
+
+</template>
+<style lang="scss" scoped>
+  @import './trace.scss';
+  .trace-item.level0{
+      background: rgba(0, 0, 0, 0.04);;
+      color: #448dfe;
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);;
+        color: #448dfe;
+      }
+      &::before{
+        position: absolute;
+        content: '';
+        width: 5px;
+        height: 100%;
+        background: #448dfe;
+        left: 0;
+      }      
+  }
+
+  .trace-table-toggle {
+    cursor: pointer;
+    height: 12px;
+    width: 12px;
+    display: inline-block;
+    &.collapse {
+      background: url('./collapse.gif') no-repeat;
+      background-size: 12px 12px;
+    }
+
+    &.expand {
+      background: url('./expand.gif') no-repeat;
+      background-size: 12px 12px;
+    }
+  }  
+
+  .trace-item {
+    display: flex;
+    position: relative;
+  }
+  .trace-item.selected {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .trace-item:not(.level0):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+
+  .trace-item>div {
+    padding: 0 5px;
+    border: 1px solid transparent;
+    border-right: 1px dotted silver;
+    overflow: hidden;
+    line-height: 30px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap
+  }
+  .trace-item>div.method {
+    padding-left: 10px;
+  }
+  .trace-item div.exec-percent {
+    width: 10%;
+    padding-left: 8px;
+    padding-right: 8px;
+    .outer-progress_bar {
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: rgb(63, 177, 227);
+      position: relative;
+      margin-top: 11px;
+      border: none;
+    }
+    .inner-progress_bar {
+      position: absolute;
+      background: rgb(110, 64, 170);
+      height: 4px;
+      border-radius: 2px;
+      left: 0;
+      border:none;
+      top: 1px;
+    }
+  }
+
+
+</style>
+<script type="text/javascript">
+import moment from 'dayjs';
+import Popper from 'popper.js';
+export default {
+  name: 'item',
+  props: ['data'],
+  data() {
+    return {
+      displayChildren: true,
+    };
+  },
+  computed: {
+    selfTime() {
+      const {data} = this;
+      return  data.dur ? data.dur : 0;
+    },
+    execTime() {
+      const {data} = this;
+      return  (data.endTime - data.startTime) ? (data.endTime - data.startTime) : 0;
+    },
+    outterPercent() {
+      if (this.data.level === 1) {
+        return '100%';
+      } else {
+        const data = this.data;
+        const exec = (data.endTime - data.startTime) ? (data.endTime - data.startTime) : 0;
+        let result = (exec / data.totalExec * 100);
+        result = result > 100 ? 100 : result;
+        result = result.toFixed(4) + '%';
+        return result === '0.0000%' ? '0.9%' : result;
+      }
+    },
+    innerPercent() {
+      const result = (this.selfTime / this.execTime) * 100 .toFixed(4) + '%';
+      return result === '0.0000%' ? '0.9%' : result;
+    },
+    eventHub() {
+      return this.$store.getters.globalEventHub;
+    },
+  },
+  methods: {
+    toggle() {
+      this.displayChildren = ! this.displayChildren;
+    },
+    formatTime(timestamp) {
+      return moment(timestamp).format('HH:mm:ss SSS');
+    },
+    showSelectSpan() {
+      this.eventHub.$emit('HANDLE-SELECT-SPAN', this.data);
+    },
+  },
+};
+</script>

src/views/components/trace/trace-chart-table/trace.scss

@@ -0,0 +1,31 @@
+.method {
+  width: 45%;
+}
+.argument {
+  width: 15%;
+}
+.start-time {
+  width: 5%;
+  min-width: 100px;
+}
+.gap {
+  width: 5%;
+}
+.exec-ms {
+  width: 6%;
+}
+.exec-percent {
+  width: 10%;
+}
+.self {
+  width: 5%;
+}
+.api {
+  width: 10%;
+}
+.agent {
+  width: 15%;
+}
+.application {
+  width: 15%;
+}