fix: update graph parameter of query for topology metrics (#543)

* fix: query conditions of topology metrics

* fix: separate alerts for states

Author: Fine0830

src/components/rk-alert.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
   @Component
   export default class RkAlert extends Vue {
     @Prop() private message!: string;
-    @Prop() private type!: string;
+    @Prop({ default: 'error' }) private type!: string;
     @Prop() private description!: string;
     @Prop({ default: true }) private showIcon!: boolean;
     @Prop({ default: true }) private closable!: boolean;

src/graph/query/topology.ts

@@ -44,6 +44,22 @@ export const queryTopoInfo = `query queryTopoInfo(
         ${TopoServiceMetric.query},
         ${TopoClientMetric.query}
       }`;
+export const queryTopoInfoServer = `query queryTopoInfo(
+  ${Topo.variable},
+  ${TopoMetric.variable},
+  ${TopoServiceMetric.variable})
+    {
+      ${TopoMetric.query},
+      ${TopoServiceMetric.query}
+    }`;
+export const queryTopoInfoClient = `query queryTopoInfo(
+  ${Topo.variable},
+  ${TopoMetric.variable},
+  ${TopoClientMetric.variable})
+    {
+      ${TopoMetric.query},
+      ${TopoClientMetric.query}
+    }`;
 
 export const queryTopoInstanceDependency = `query queryTopoInstanceDependency(
   ${TopoInstanceDependency.variable}) {${TopoInstanceDependency.query}}`;

src/store/modules/topology/index.ts

@@ -624,25 +624,29 @@ const actions: ActionTree<State, any> = {
       .params(params)
       .then((res: AxiosResponse) => {
         context.commit(types.SET_TOPO_ERRORS, { msg: query, desc: res.data.errors || '' });
-        if (res.data.errors) {
+        if (!res.data.data) {
           context.commit(types.SET_TOPO, { calls: [], nodes: [] });
           return;
         }
         const calls = res.data.data.topo.calls;
         const nodes = res.data.data.topo.nodes;
         const ids = nodes.map((i: any) => i.id);
         const idsC = calls.filter((i: any) => i.detectPoints.includes('CLIENT')).map((b: any) => b.id);
-        const idsS = calls.filter((i: any) => i.detectPoints.includes('CLIENT')).map((b: any) => b.id);
+        const idsS = calls.filter((i: any) => i.detectPoints.includes('SERVER')).map((b: any) => b.id);
+        if (!ids.length) {
+          return context.commit(types.SET_TOPO, { calls: [], nodes: [] });
+        }
+        const queryName = !idsC.length ? 'queryTopoInfoServer' : !idsS.length ? 'queryTopoInfoClient' : 'queryTopoInfo';
         return graph
-          .query('queryTopoInfo')
+          .query(queryName)
           .params({ ...params, ids, idsC, idsS })
           .then((info: AxiosResponse) => {
             context.commit(types.SET_TOPO_ERRORS, { msg: 'queryTopoInfo', desc: info.data.errors || '' });
-            if (info.data.errors) {
+            const resInfo = info.data.data;
+            if (!resInfo) {
               context.commit(types.SET_TOPO, { calls: [], nodes: [] });
               return;
             }
-            const resInfo = info.data.data;
             if (!resInfo.sla) {
               return context.commit(types.SET_TOPO, { calls, nodes });
             }

src/views/components/common/alerts-content.vue

@@ -15,12 +15,60 @@ limitations under the License. -->
 <template>
   <div class="alert-content">
     <rk-alert
-      v-for="(msg, index) in Object.keys(allAlerts)"
+      v-for="(msg, index) in Object.keys(stateOption.selectorErrors)"
       :key="msg + index"
-      :show.sync="allAlerts[msg]"
-      type="error"
+      :show.sync="stateOption.selectorErrors[msg]"
       :message="msg"
-      :description="allAlerts[msg]"
+      :description="stateOption.selectorErrors[msg]"
+    />
+    <rk-alert
+      v-for="(msg, index) in Object.keys(rocketData.dashboardErrors)"
+      :key="msg + index"
+      :show.sync="rocketData.dashboardErrors[msg]"
+      :message="msg"
+      :description="rocketData.dashboardErrors[msg]"
+    />
+    <rk-alert
+      v-for="(msg, index) in Object.keys(stateTopo.topoErrors)"
+      :key="msg + index"
+      :show.sync="stateTopo.topoErrors[msg]"
+      :message="msg"
+      :description="stateTopo.topoErrors[msg]"
+    />
+    <rk-alert
+      v-for="(msg, index) in Object.keys(rocketTrace.traceErrors)"
+      :key="msg + index"
+      :show.sync="rocketTrace.traceErrors[msg]"
+      :message="msg"
+      :description="rocketTrace.traceErrors[msg]"
+    />
+    <rk-alert
+      v-for="(msg, index) in Object.keys(rocketLog.logErrors)"
+      :key="msg + index"
+      :show.sync="rocketLog.logErrors[msg]"
+      :message="msg"
+      :description="rocketLog.logErrors[msg]"
+    />
+    <rk-alert
+      v-for="(msg, index) in Object.keys(rocketAlarm.alarmErrors)"
+      :key="msg + index"
+      :show.sync="rocketAlarm.alarmErrors[msg]"
+      :message="msg"
+      :description="rocketAlarm.alarmErrors[msg]"
+    />
+    <rk-alert
+      v-for="(msg, index) in Object.keys(stateProfile.profileErrors)"
+      :key="msg + index"
+      :show.sync="stateProfile.profileErrors[msg]"
+      :message="msg"
+      :description="stateProfile.profileErrors[msg]"
+    />
+    <rk-alert
+      v-for="(msg, index) in Object.keys(rocketEvent.eventErrors)"
+      :key="msg + index"
+      :show.sync="rocketEvent.eventErrors[msg]"
+      :message="msg"
+      :description="rocketEvent.eventErrors[msg]"
     />
   </div>
 </template>
@@ -47,19 +95,6 @@ limitations under the License. -->
     @State('rocketAlarm') private rocketAlarm!: alarmState;
     @State('rocketEvent') private rocketEvent!: EventState;
     @State('rocketTrace') private rocketTrace!: traceState;
-
-    private get allAlerts() {
-      return {
-        ...this.rocketEvent.eventErrors,
-        ...this.stateOption.selectorErrors,
-        ...this.rocketData.dashboardErrors,
-        ...this.stateTopo.topoErrors,
-        ...this.stateProfile.profileErrors,
-        ...this.rocketLog.logErrors,
-        ...this.rocketAlarm.alarmErrors,
-        ...this.rocketTrace.traceErrors,
-      };
-    }
   }
 </script>
 <style lang="scss" scoped>