fix: update current service in store before navigating to dashboard (#514)

package-lock.json

@@ -8722,9 +8722,9 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
@@ -20533,9 +20533,9 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "requires": {
         "argparse": "^2.0.1"

src/assets/icons/list-tree.svg

@@ -0,0 +1,17 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+  <path d="M896 469.333333h-341.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h341.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667zM341.333333 298.666667h554.666667c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H341.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666667zM896 725.333333h-341.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h341.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667zM213.333333 554.666667h128c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H213.333333c-25.6 0-42.666667-17.066667-42.666666-42.666666V256c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v426.666667c0 72.533333 55.466667 128 128 128h128c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H213.333333c-25.6 0-42.666667-17.066667-42.666666-42.666666v-136.533334c12.8 4.266667 25.6 8.533333 42.666666 8.533334z"></path>
+</svg>

src/assets/icons/statistics-bulleted.svg

@@ -12,4 +12,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
-<svg t="1619507658599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2073" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M331.840623 793.484755 331.840623 387.450978c0-16.191531-12.457456-28.645338-27.399836-28.645338L222.235197 358.80564c-14.94238 0-27.399836 13.698094-27.399836 28.645338L194.835361 793.484755 331.840623 793.484755 331.840623 793.484755zM506.210956 793.484755 506.210956 213.081861c0-16.192747-12.453808-29.89449-27.401052-29.89449l-82.20559 0c-14.94238 0-27.399836 13.701743-27.399836 29.89449L369.204478 793.484755 506.210956 793.484755 506.210956 793.484755zM680.580073 793.484755 680.580073 536.910048c0-16.191531-12.452591-29.889625-27.399836-29.889625L570.979512 507.020423c-14.947245 0-27.405918 13.698094-27.405918 29.889625L543.573595 793.484755 680.580073 793.484755 680.580073 793.484755zM854.94919 793.484755 854.94919 387.450978c0-16.191531-12.452591-28.645338-27.399836-28.645338l-82.200725 0c-14.947245 0-27.399836 13.698094-27.399836 28.645338L717.948794 793.484755 854.94919 793.484755 854.94919 793.484755zM879.860454 830.84861" p-id="2074" fill="#ffffff"></path></svg>
+<svg t="1619507658599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2073" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M331.840623 793.484755 331.840623 387.450978c0-16.191531-12.457456-28.645338-27.399836-28.645338L222.235197 358.80564c-14.94238 0-27.399836 13.698094-27.399836 28.645338L194.835361 793.484755 331.840623 793.484755 331.840623 793.484755zM506.210956 793.484755 506.210956 213.081861c0-16.192747-12.453808-29.89449-27.401052-29.89449l-82.20559 0c-14.94238 0-27.399836 13.701743-27.399836 29.89449L369.204478 793.484755 506.210956 793.484755 506.210956 793.484755zM680.580073 793.484755 680.580073 536.910048c0-16.191531-12.452591-29.889625-27.399836-29.889625L570.979512 507.020423c-14.947245 0-27.405918 13.698094-27.405918 29.889625L543.573595 793.484755 680.580073 793.484755 680.580073 793.484755zM854.94919 793.484755 854.94919 387.450978c0-16.191531-12.452591-28.645338-27.399836-28.645338l-82.200725 0c-14.947245 0-27.399836 13.698094-27.399836 28.645338L717.948794 793.484755 854.94919 793.484755 854.94919 793.484755zM879.860454 830.84861"></path></svg>

src/graphql/fragments/alarm.ts

@@ -23,6 +23,7 @@ export const Alarm = {
         key: id
         message
         startTime
+        recoveryTime
         scope
         name
         tags {

src/locales/lang/en.ts

@@ -215,6 +215,7 @@ const msg = {
   timeRange: "Time Range",
   duration: "Duration",
   startTime: "Start Time",
+  recoveryTime: "Recovery Time",
   start: "Start",
   spans: "Spans",
   spanInfo: "Span Info",
@@ -327,6 +328,7 @@ const msg = {
   message: "Message",
   tooltipsContent: "Tooltip Content",
   alarmDetail: "Alarm Detail",
+  recoveredAt: "Recovered At",
   scope: "Scope",
   destService: "Destination Service",
   destServiceInstance: "Destination Service Instance",

src/locales/lang/es.ts

@@ -213,6 +213,7 @@ const msg = {
   timeRange: "Rango de Tiempo",
   duration: "Duración",
   startTime: "Hora Inicio",
+  recoveryTime: "Tiempo Recuperación",
   start: "Incio",
   spans: "Lapso",
   spanInfo: "Info Lapso",
@@ -324,6 +325,7 @@ const msg = {
   message: "Mensaje",
   tooltipsContent: "Contenido de Información de Herramienta",
   alarmDetail: "Detalle Alarma",
+  recoveredAt: "Recuperado En",
   scope: "Alcance",
   destService: "Servicio Destinación",
   destServiceInstance: "Instancia Servicio Destinación",

src/locales/lang/zh.ts

@@ -216,6 +216,7 @@ const msg = {
   timeRange: "时间范围",
   duration: "持续时间",
   startTime: "开始时间",
+  recoveryTime: "恢复时间",
   start: "起始点",
   spans: "跨度",
   spanInfo: "跨度信息",
@@ -324,6 +325,7 @@ const msg = {
   message: "信息",
   tooltipsContent: "提示内容",
   alarmDetail: "警告详情",
+  recoveredAt: "恢复于",
   scope: "范围",
   destService: "终点服务",
   destServiceInstance: "终点实例",

src/types/alarm.ts

@@ -24,6 +24,7 @@ export interface Alarm {
   message: string;
   key: string;
   startTime: string;
+  recoveryTime: string;
   scope: string;
   tags: Array<{ key: string; value: string }>;
   events: Event[];

src/views/alarm/Content.vue

@@ -37,6 +37,9 @@ limitations under the License. -->
         <div class="grey sm show-xs">
           {{ dateFormat(parseInt(i.startTime)) }}
         </div>
+        <div class="grey sm" v-if="i.recoveryTime">
+          {{ t("recoveredAt") }} {{ dateFormat(parseInt(i.recoveryTime)) }}
+        </div>
       </div>
     </div>
     <div v-if="!alarmStore.alarms.length" class="tips">{{ t("noData") }}</div>
@@ -53,6 +56,9 @@ limitations under the License. -->
       <span v-if="item.label === 'startTime'">
         {{ dateFormat(currentDetail[item.label]) }}
       </span>
+      <span v-else-if="item.label === 'recoveryTime'">
+        {{ currentDetail[item.label] ? dateFormat(currentDetail[item.label]) : "" }}
+      </span>
       <span v-else-if="item.label === 'tags'">
         <div v-for="(d, index) in alarmTags" :key="index">{{ d }}</div>
       </span>

src/views/alarm/data.ts

@@ -40,6 +40,10 @@ export const AlarmDetailCol = [
     label: "startTime",
     value: "startTime",
   },
+  {
+    label: "recoveryTime",
+    value: "recoveryTime",
+  },
   {
     label: "tags",
     value: "tags",

src/views/dashboard/graphs/ServiceList.vue

@@ -191,6 +191,7 @@ limitations under the License. -->
       ElMessage.error("No this dashboard");
       return;
     }
+    selectorStore.setCurrentService(scope.row);
     const path = `/dashboard/${dashboard.layer}/${dashboard.entity}/${scope.row.id}/${dashboard.name}`;
 
     router.push(path);

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -293,7 +293,7 @@ limitations under the License. -->
           selectedMinTimestamp: props.selectedMinTimestamp,
         });
       }
-      tree.value.draw(() => {
+      tree.value?.draw(() => {
         setTimeout(() => {
           loading.value = false;
         }, 200);

src/views/dashboard/related/trace/components/VisGraph/constant.ts

@@ -24,6 +24,6 @@ export enum TraceGraphType {
 export const GraphTypeOptions = [
   { value: "List", icon: "list-bulleted", label: "list" },
   { value: "Tree", icon: "issue-child", label: "tree" },
-  { value: "Table", icon: "table", label: "table" },
+  { value: "Table", icon: "list-tree", label: "table" },
   { value: "Statistics", icon: "statistics-bulleted", label: "statistics" },
 ] as const;