[skywalking-rocketbot-ui] branch master updated: revert trace item (#501)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git


The following commit(s) were added to refs/heads/master by this push:
     new dd3d667  revert trace item (#501)
dd3d667 is described below

commit dd3d667d63c5cd86c04981cf16cf51897829ab25
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Fri Jun 4 09:32:05 2021 +0800

    revert trace item (#501)
---
 .../common/trace-chart-table/trace-item.vue        | 121 ++++++++++-----------
 1 file changed, 60 insertions(+), 61 deletions(-)

diff --git a/src/views/components/common/trace-chart-table/trace-item.vue b/src/views/components/common/trace-chart-table/trace-item.vue
index d95756c..478d772 100644
--- a/src/views/components/common/trace-chart-table/trace-item.vue
+++ b/src/views/components/common/trace-chart-table/trace-item.vue
@@ -90,71 +90,70 @@ limitations under the License. -->
       </div>
     </div>
     <div v-show="data.children && data.children.length > 0 && displayChildren" class="children-trace">
-      <Item :method="method" v-for="(child, index) in data.children" :key="index" :data="child" :type="type"></Item>
+      <item :method="method" v-for="(child, index) in data.children" :key="index" :data="child" :type="type" />
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { Vue, Prop, Watch, Component } from 'vue-property-decorator';
-
-  @Component({
-    components: {},
-  })
-  export default class Item extends Vue {
-    @Prop() public data: any;
-    @Prop() public type!: string;
-    @Prop() public method!: string;
-
-    public displayChildren: boolean = true;
-
-    get selfTime() {
-      return this.data.dur ? this.data.dur : 0;
-    }
-    get execTime() {
-      return this.data.endTime - this.data.startTime ? this.data.endTime - this.data.startTime : 0;
-    }
-    get 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: number = (exec / data.totalExec) * 100;
-        result = result > 100 ? 100 : result;
-        const resultStr: string = result.toFixed(4) + '%';
+<script lang="js">
+  export default {
+    name: 'item',
+    props: ['data', 'method', 'type'],
+    data() {
+      return {
+        displayChildren: true,
+      };
+    },
+    methods: {
+      toggle() {
+        this.displayChildren = !this.displayChildren;
+      },
+      showSelectSpan() {
+        const items = document.querySelectorAll('.trace-item');
+        for (const item of items) {
+          item.style.background = '#fff';
+        }
+        (this.$refs.traceItem).style.background = 'rgba(0, 0, 0, 0.1)';
+        this.$eventBus.$emit('HANDLE-SELECT-SPAN', this.data);
+      },
+      viewSpanDetail() {
+        this.showSelectSpan();
+        this.$eventBus.$emit('HANDLE-VIEW-SPAN', this.data);
+      },
+    },
+    watch: {
+      data(val, oldVal) {
+        const items = document.querySelectorAll('.trace-item');
+        for (const item of items) {
+          item.style.background = '#fff';
+        }
+      },
+    },
+    computed: {
+      selfTime() {
+        return this.data.dur ? this.data.dur : 0;
+      },
+      execTime() {
+        return this.data.endTime - this.data.startTime ? this.data.endTime - this.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;
+          const resultStr = result.toFixed(4) + '%';
+          return resultStr === '0.0000%' ? '0.9%' : resultStr;
+        }
+      },
+      innerPercent() {
+        const result = (this.selfTime / this.execTime) * 100;
+        const resultStr = result.toFixed(4) + '%';
         return resultStr === '0.0000%' ? '0.9%' : resultStr;
-      }
-    }
-    get innerPercent() {
-      const result: number = (this.selfTime / this.execTime) * 100;
-      const resultStr: string = result.toFixed(4) + '%';
-      return resultStr === '0.0000%' ? '0.9%' : resultStr;
-    }
-
-    @Watch('data')
-    public onDataChanged(): void {
-      const items = document.querySelectorAll('.trace-item') as NodeListOf<HTMLElement>;
-      for (const item of items) {
-        item.style.background = '#fff';
-      }
-    }
-
-    private toggle() {
-      this.displayChildren = !this.displayChildren;
-    }
-    private showSelectSpan() {
-      const items = document.querySelectorAll('.trace-item') as NodeListOf<HTMLElement>;
-      for (const item of items) {
-        item.style.background = '#fff';
-      }
-      (this.$refs.traceItem as HTMLElement).style.background = 'rgba(0, 0, 0, 0.1)';
-      this.$eventBus.$emit('HANDLE-SELECT-SPAN', this.data);
-    }
-    private viewSpanDetail() {
-      this.showSelectSpan();
-      this.$eventBus.$emit('HANDLE-VIEW-SPAN', this.data);
-    }
-  }
+      },
+    },
+  };
 </script>
 <style lang="scss" scoped>
   @import './trace.scss';