You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2020/12/01 09:24:20 UTC

[skywalking-rocketbot-ui] branch master updated: fix: dashboard metrics name and optimize code (#387)

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 f64b686  fix: dashboard metrics name and optimize code (#387)
f64b686 is described below

commit f64b68668d3e7214c9380b9fda13b11c2af3a408
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Tue Dec 1 17:21:43 2020 +0800

    fix: dashboard metrics name and optimize code (#387)
---
 src/assets/lang/en.ts                                |  6 ++++++
 src/assets/lang/zh.ts                                |  6 ++++++
 src/graph/query/log.ts                               | 19 +------------------
 src/graph/query/option.ts                            |  3 ++-
 src/views/components/dashboard/charts/chart-num.vue  |  1 -
 src/views/components/dashboard/charts/chart-slow.vue |  8 ++++++--
 src/views/components/log/log-detail-table.vue        |  2 --
 src/views/components/log/log-table/log-constant.ts   | 16 ++++++++--------
 src/views/components/log/log-table/log-item.vue      | 10 ++++------
 src/views/components/log/log-table/log-table.vue     |  8 ++++----
 10 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 81c5ccb..d49d5cb 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -163,6 +163,12 @@ const m = {
   logCategory: 'Log Category',
   errorCatalog: 'Error Catalog',
   logDetail: 'Log Detail ',
+  errorInfo: 'Error Info',
+  stack: 'Stack',
+  serviceVersion: 'Service Version',
+  errorPage: 'Error Page',
+  category: 'Category',
+  grade: 'Grade',
 };
 
 export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index c781b1e..40b8e6a 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -162,6 +162,12 @@ const m = {
   logCategory: '日志类别',
   errorCatalog: '错误类目',
   logDetail: '日志详情',
+  errorInfo: '错误信息',
+  stack: '堆栈',
+  serviceVersion: '服务版本',
+  errorPage: '错误页面',
+  category: '类别',
+  grade: '等级',
 };
 
 export default m;
diff --git a/src/graph/query/log.ts b/src/graph/query/log.ts
index 069a9b9..20db18e 100644
--- a/src/graph/query/log.ts
+++ b/src/graph/query/log.ts
@@ -15,23 +15,6 @@
  * limitations under the License.
  */
 
-import {
-  QueryBrowserErrorLogs,
-  // GetAllBrowserServices,
-  // readMetricsValues,
-  // readMetricsValue,
-  // OverviewServiceDetail,
-} from '../fragments/log';
+import { QueryBrowserErrorLogs } from '../fragments/log';
 
 export const queryBrowserErrorLogs = `query queryBrowserErrorLogs(${QueryBrowserErrorLogs.variable}) {${QueryBrowserErrorLogs.query}}`;
-// export const getAllBrowserServices = `query getAllBrowserServices(${GetAllBrowserServices.variable}) {${GetAllBrowserServices.query}}`;
-// export const readBrowserMetricsValue = `query readMetricsValue(${readMetricsValue.variable}) {${readMetricsValue.fragment}}`;
-// export const overviewServiceDetail = `query readMetricsValue(${OverviewServiceDetail.variable}) {${OverviewServiceDetail.query}}`;
-
-// export const mutationAddTemplate = `mutation mutationAddTemplate(${addTemplate.variable}) {${addTemplate.query}}`;
-//
-// export const mutationChangeTemplate = `mutation mutationChangeTemplate(${changeTemplate.variable}) {${changeTemplate.query}}`;
-//
-// export const mutationDisableTemplate = `mutation mutationDisableTemplate(${disableTemplate.variable}) {${disableTemplate.query}}`;
-//
-// export const queryGetAllTemplates = `query queryGetAllTemplates {${getAllTemplates.query}}`;
diff --git a/src/graph/query/option.ts b/src/graph/query/option.ts
index fa6f8b8..52f1adc 100644
--- a/src/graph/query/option.ts
+++ b/src/graph/query/option.ts
@@ -19,7 +19,8 @@ import { Services, BrowserServices, Endpoints, Instances, Database, OAPTimeInfo
 
 export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
 
-export const queryBrowserServices = `query queryBrowserServices(${BrowserServices.variable}) {${BrowserServices.query}}`;
+export const queryBrowserServices = `query queryBrowserServices(
+  ${BrowserServices.variable}) {${BrowserServices.query}}`;
 
 export const queryDatabases = `query queryDatabases(${Database.variable}) {${Database.query}}`;
 
diff --git a/src/views/components/dashboard/charts/chart-num.vue b/src/views/components/dashboard/charts/chart-num.vue
index eab44af..0970672 100644
--- a/src/views/components/dashboard/charts/chart-num.vue
+++ b/src/views/components/dashboard/charts/chart-num.vue
@@ -16,7 +16,6 @@ limitations under the License. -->
 <template>
   <div class="rk-chart-num">
     <div v-for="(item, index) in data" :key="index" class="rk-num-detail">
-      <span>{{ item.name }}</span>
       <span class="b">{{
         typeof item.avgNum === 'string' ? item.avgNum : isNaN(item.avgNum) ? null : item.avgNum.toFixed(2)
       }}</span>
diff --git a/src/views/components/dashboard/charts/chart-slow.vue b/src/views/components/dashboard/charts/chart-slow.vue
index 21d861d..33fe56c 100644
--- a/src/views/components/dashboard/charts/chart-slow.vue
+++ b/src/views/components/dashboard/charts/chart-slow.vue
@@ -55,13 +55,17 @@ limitations under the License. -->
       copy(i);
     }
     get datas() {
+      if (!this.data.length) {
+        return [];
+      }
       const val = this.item.sortOrder;
+
       switch (val) {
         case 'DES':
-          this.data.length && this.data.sort((a: any, b: any) => b.value - a.value);
+          this.data.sort((a: any, b: any) => b.value - a.value);
           break;
         case 'ASC':
-          this.data.length && this.data.sort((a: any, b: any) => a.value - b.value);
+          this.data.sort((a: any, b: any) => a.value - b.value);
           break;
         default:
           break;
diff --git a/src/views/components/log/log-detail-table.vue b/src/views/components/log/log-detail-table.vue
index 408bb41..307a560 100644
--- a/src/views/components/log/log-detail-table.vue
+++ b/src/views/components/log/log-detail-table.vue
@@ -63,8 +63,6 @@ limitations under the License. -->
       LogTable,
     },
     props: ['data', 'loading', 'showBtnDetail'],
-    watch: {
-    },
     data() {
       return {
         diaplay: true,
diff --git a/src/views/components/log/log-table/log-constant.ts b/src/views/components/log/log-table/log-constant.ts
index 24d9b4a..1261fc6 100644
--- a/src/views/components/log/log-table/log-constant.ts
+++ b/src/views/components/log/log-table/log-constant.ts
@@ -25,31 +25,31 @@ export const ServiceLogConstants = [
 export const BrowserLogConstants = [
   {
     label: 'time',
-    value: 'Time',
+    value: 'time',
   },
   {
     label: 'service',
-    value: 'Service',
+    value: 'service',
   },
   {
     label: 'message',
-    value: 'Error Info',
+    value: 'errorInfo',
     drag: true,
     method: 350,
   },
   {
     label: 'stack',
-    value: 'Stack',
+    value: 'stack',
     drag: true,
     method: 350,
   },
   {
     label: 'serviceVersion',
-    value: 'Service Version',
+    value: 'serviceVersion',
   },
   {
     label: 'errorUrl',
-    value: 'Error Page',
+    value: 'errorPage',
   },
   // {
   //   label: 'pagePath',
@@ -57,11 +57,11 @@ export const BrowserLogConstants = [
   // },
   {
     label: 'category',
-    value: 'Catalog',
+    value: 'category',
   },
 
   {
     label: 'grade',
-    value: 'Grade',
+    value: 'grade',
   },
 ];
diff --git a/src/views/components/log/log-table/log-item.vue b/src/views/components/log/log-table/log-item.vue
index 71d7e66..ae7b636 100644
--- a/src/views/components/log/log-table/log-item.vue
+++ b/src/views/components/log/log-table/log-item.vue
@@ -38,11 +38,9 @@ limitations under the License. -->
   export default {
     name: 'item',
     props: ['data', 'type', 'method'],
-    created() {
-    },
     watch: {
       data: {
-        handler: function() {
+        handler() {
           this.setLogItemHeight();
         },
         deep: true,
@@ -59,17 +57,17 @@ limitations under the License. -->
     computed: {},
     methods: {
       lineBreak(str = '') {
-        let s = str
+        const param = str
           .replace(/</g, '&lt;')
           .replace(/>/g, '&gt;')
           .replace(/\r\n/g, '<br />')
           .replace(/\n/g, '<br />');
-        return s;
+        return param;
       },
       setLogItemHeight() {
         this.$nextTick(() => {
           const heights = [];
-          this.$refs.logItem.childNodes.forEach(item => {
+          this.$refs.logItem.childNodes.forEach((item) => {
             if (item.getAttribute('class').indexOf('autoHeight') > -1) {
               const autoHeightChild = item.childNodes[0];
               const height = autoHeightChild.getBoundingClientRect().height;
diff --git a/src/views/components/log/log-table/log-table.vue b/src/views/components/log/log-table/log-table.vue
index 4686711..3a526cc 100644
--- a/src/views/components/log/log-table/log-table.vue
+++ b/src/views/components/log/log-table/log-table.vue
@@ -23,10 +23,10 @@ limitations under the License. -->
               <use xlink:href="#settings_ethernet"></use>
             </svg>
           </span>
-          {{ item.value }}
+          {{ $t(item.value) }}
         </div>
         <div v-else :class="item.label" :key="index">
-          {{ item.value }}
+          {{ $t(item.value) }}
         </div>
       </template>
     </div>
@@ -62,7 +62,7 @@ limitations under the License. -->
     },
     mounted() {
       const drags = this.$refs.dragger;
-      drags.forEach(drag => {
+      drags.forEach((drag) => {
         drag.onmousedown = (event) => {
           const diffX = event.clientX;
           const index = +drag.dataset.index;
@@ -72,7 +72,7 @@ limitations under the License. -->
           document.onmousemove = (documentEvent) => {
             const moveX = documentEvent.clientX - diffX;
             const method = copy + moveX;
-            this.$set(this.data, index, { ...item, 'method': method });
+            this.$set(this.data, index, { ...item, method });
           };
           document.onmouseup = () => {
             document.onmousemove = null;