feat: implement Alerts for query errors (#542)

src/components/index.ts

@@ -16,8 +16,6 @@
  */
 
 import noty from './noty';
-import RkHeader from './rk-header.vue';
-import RkFooter from './rk-footer.vue';
 import RkFooterTime from './rk-footer-time.vue';
 import RkProgress from './rk-progress.vue';
 import RkPage from './rk-page.vue';
@@ -33,10 +31,9 @@ import RkBack from './rk-back.vue';
 import RkButton from './rk-button.vue';
 import RkIcon from './rk-icon.vue';
 import RkRadio from './rk-radio.vue';
+import RkAlert from './rk-alert.vue';
 
 const components: any = {
-  RkHeader,
-  RkFooter,
   RkProgress,
   RkDate,
   RkPanel,
@@ -52,6 +49,7 @@ const components: any = {
   RkButton,
   RkIcon,
   RkRadio,
+  RkAlert,
 };
 
 const componentsName: string[] = Object.keys(components);

src/components/rk-alert.vue

@@ -0,0 +1,131 @@
+<!-- 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. -->
+<template>
+  <div v-if="show" class="rk-alert flex-h" :class="type">
+    <span v-show="closable" @click="closeAlert">
+      <rk-icon icon="clearclose" class="close" />
+    </span>
+    <rk-icon v-show="showIcon" :icon="iconType" class="xll mr-5 tip-icon" />
+    <div class="rk-alert-content">
+      <div class="rk-alert-message">{{ message }}</div>
+      <div class="rk-alert-description">{{ description }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { Vue, Component, Prop } from 'vue-property-decorator';
+  @Component
+  export default class RkAlert extends Vue {
+    @Prop() private message!: string;
+    @Prop() private type!: string;
+    @Prop() private description!: string;
+    @Prop({ default: true }) private showIcon!: boolean;
+    @Prop({ default: true }) private closable!: boolean;
+    @Prop() private show!: boolean;
+
+    private iconType: string = 'error';
+
+    private mounted() {
+      this.iconType =
+        this.type === 'error'
+          ? 'highlight_remove'
+          : this.type === 'warning'
+          ? 'error_outline'
+          : this.type === 'info'
+          ? 'info_outline'
+          : 'sentiment_satisfied_alt';
+      setTimeout(() => {
+        this.$emit('update:show', false);
+      }, 30000);
+    }
+
+    private closeAlert() {
+      this.$emit('update:show', false);
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .rk-alert {
+    position: relative;
+    display: flex;
+    word-wrap: break-word;
+    width: 580px;
+    z-index: 1000;
+    color: #000;
+    border-radius: 2px;
+    padding: 10px 10px;
+    align-items: flex-start;
+    transition: all 0.7s;
+    margin-bottom: 15px;
+    &.error {
+      border: 1px solid #ffccc7;
+      background-color: #fff2f0;
+    }
+    &.warning {
+      border: 1px solid #ffe58f;
+      background-color: #fffbe6;
+    }
+    &.info {
+      border: 1px solid #91d5ff;
+      background-color: #e6f7ff;
+    }
+    &.success {
+      border: 1px solid #b7eb8f;
+      background-color: #f6ffed;
+    }
+  }
+  .error {
+    .tip-icon {
+      color: #ff4d4f;
+    }
+  }
+  .warning {
+    .tip-icon {
+      color: #faad14;
+    }
+  }
+  .info {
+    .tip-icon {
+      color: #1890ff;
+    }
+  }
+  .success {
+    .tip-icon {
+      color: #52c41a;
+    }
+  }
+  .close {
+    font-size: 20px;
+    color: #00000073;
+    transition: color 0.3s;
+    position: absolute;
+    top: 2px;
+    right: 0;
+    cursor: pointer;
+    z-index: 1001;
+  }
+  .rk-alert-message {
+    font-size: 16px;
+  }
+  .rk-alert-content {
+    flex: 1;
+    min-width: 0;
+  }
+  .rk-alert-description {
+    line-height: 22px;
+  }
+</style>

src/components/rk-icon.vue

@@ -18,6 +18,7 @@ limitations under the License. -->
     :class="{
       sm: size === 'sm',
       lg: size === 'lg',
+      xll: size === 'xll',
       offset: offset,
       loading: loading,
     }"
@@ -46,13 +47,17 @@ limitations under the License. -->
     vertical-align: middle;
     fill: currentColor;
     &.sm {
-      width: 13px;
+      width: 1px;
       height: 13px;
     }
     &.lg {
       width: 18px;
       height: 18px;
     }
+    &.xll {
+      width: 25px;
+      height: 25px;
+    }
     &.offset {
       margin-top: -2px;
     }

src/components/rk-sidebox.vue

@@ -35,7 +35,9 @@ limitations under the License. -->
   export default {
     name: 'RkSidebox',
     props: {
-      show: {},
+      show: {
+        default: false,
+      },
       title: {
         default: '',
       },

src/graph/index.ts

@@ -44,14 +44,24 @@ class Graph {
     return this;
   }
   public params(variablesData: any): AxiosPromise<void> {
-    return axios.post(
-      '/graphql',
-      {
-        query: query[this.queryData],
-        variables: variablesData,
-      },
-      { cancelToken: cancelToken() },
-    );
+    return axios
+      .post(
+        '/graphql',
+        {
+          query: query[this.queryData],
+          variables: variablesData,
+        },
+        { cancelToken: cancelToken() },
+      )
+      .then((res: any) => {
+        if (res.data.errors) {
+          res.data.errors = res.data.errors.map((e: { message: string }) => e.message).join(' ');
+        }
+        return res;
+      })
+      .catch((err) => {
+        throw err;
+      });
   }
 }
 

src/store/modules/alarm/index.ts

@@ -24,11 +24,13 @@ import { Alarm, AlarmParams } from '@/types/alarm';
 export interface State {
   alarmService: Alarm[];
   total: number;
+  alarmErrors: { [key: string]: string };
 }
 
 const initState: State = {
   alarmService: [],
   total: 0,
+  alarmErrors: {},
 };
 
 // getters
@@ -44,15 +46,25 @@ const mutations: MutationTree<State> = {
     state.alarmService = [];
     state.total = 0;
   },
+  [types.SET_ALARM_ERRORS](state: State, data: { msg: string; desc: string }) {
+    state.alarmErrors = {
+      ...state.alarmErrors,
+      [data.msg]: data.desc,
+    };
+  },
 };
 
 // actions
 const actions: ActionTree<State, any> = {
-  GET_ALARM(context: { commit: Commit; state: State }, params: AlarmParams): Promise<void> {
+  GET_ALARM(context: { commit: Commit; state: State }, params: AlarmParams): Promise<any> {
     return graph
       .query('queryAlarms')
       .params(params)
       .then((res: AxiosResponse<any>) => {
+        context.commit(types.SET_ALARM_ERRORS, { msg: 'queryAlarms', desc: res.data.errors || '' });
+        if (res.data.errors) {
+          return;
+        }
         if (res.data.data.getAlarm.items) {
           context.commit(types.SET_ALARM, res.data.data.getAlarm);
         }

src/store/modules/dashboard/dashboard-data-query.ts

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import { Commit, ActionTree, Dispatch } from 'vuex';
+import { Commit, ActionTree, Dispatch, MutationTree } from 'vuex';
 import { AxiosResponse } from 'axios';
+import * as types from './mutation-types';
 import { State } from './dashboard-data';
 import graph from '@/graph';
 import { TopologyType } from '@/constants/constant';
@@ -236,6 +237,13 @@ const actions: ActionTree<State, any> = {
             .query(config.queryMetricType)
             .params(variable)
             .then((res: AxiosResponse) => {
+              if (res.data.errors) {
+                context.commit(types.SET_DASHBOARD_ERRORS, {
+                  msg: variable.condition.name,
+                  desc: res.data.errors,
+                });
+                return;
+              }
               const resData = res.data.data;
 
               return { ...resData, config, metricName: variable.condition.name };

src/store/modules/dashboard/dashboard-data.ts

@@ -38,6 +38,7 @@ export interface State {
   enableEvents: boolean;
   eventsPageType: string;
   currentSeriesType: Option[];
+  dashboardErrors: { [key: string]: string };
 }
 
 const initState: State = {
@@ -47,11 +48,12 @@ const initState: State = {
   enableEvents: false,
   eventsPageType: PageEventsType.DASHBOARD_EVENTS,
   currentSeriesType: [],
+  dashboardErrors: {},
   ...dashboardLayout.state,
 };
 
 // mutations
-const mutations: MutationTree<any> = {
+const mutations: MutationTree<State> = {
   ...dashboardLayout.mutations,
   [types.SET_DASHBOARD_EVENTS](state: State, param: { events: Event[]; type: string; duration: DurationTime }) {
     const events = param.events.map((d: Event, index: number) => {
@@ -122,6 +124,12 @@ const mutations: MutationTree<any> = {
       item.checked = false;
     }
   },
+  [types.SET_DASHBOARD_ERRORS](state: State, data: { msg: string; desc: string }) {
+    state.dashboardErrors = {
+      ...state.dashboardErrors,
+      [data.msg]: data.desc,
+    };
+  },
 };
 
 // actions
@@ -179,6 +187,10 @@ const actions: ActionTree<State, any> = {
           .query('queryTypeOfMetrics')
           .params({ name: item })
           .then((res: AxiosResponse) => {
+            context.commit(types.SET_DASHBOARD_ERRORS, { msg: 'queryTypeOfMetrics', desc: res.data.errors });
+            if (res.data.errors) {
+              return;
+            }
             return res.data.data;
           });
       }),
@@ -189,7 +201,8 @@ const actions: ActionTree<State, any> = {
       .query('queryGetAllTemplates')
       .params({})
       .then((res: AxiosResponse) => {
-        if (!res.data.data) {
+        context.commit(types.SET_DASHBOARD_ERRORS, { msg: 'queryGetAllTemplates', desc: res.data.errors });
+        if (res.data.errors) {
           return;
         }
         return res.data.data.getAllTemplates || [];
@@ -200,9 +213,11 @@ const actions: ActionTree<State, any> = {
       .query('queryEvents')
       .params({ condition: params.condition })
       .then((res: AxiosResponse) => {
-        if (!(res.data.data && res.data.data.fetchEvents)) {
+        context.commit(types.SET_DASHBOARD_ERRORS, { msg: 'queryEvents', desc: res.data.errors });
+        if (res.data.errors) {
           context.commit('SET_DASHBOARD_EVENTS', { events: [], type: params.type, duration: params.condition.time });
-          return [];
+
+          return;
         }
         context.commit('SET_DASHBOARD_EVENTS', {
           events: res.data.data.fetchEvents.events,

src/store/modules/dashboard/mutation-types.ts

@@ -45,6 +45,8 @@ export const SET_CLEAR_SELECTED_EVENTS = 'SET_CLEAR_SELECTED_EVENTS';
 export const SET_SERVICE_DEPENDENCY = 'SET_SERVICE_DEPENDENCY';
 export const SET_SERVICE_INSTANCE_DEPENDENCY = 'SET_SERVICE_INSTANCE_DEPENDENCY';
 export const SET_ENDPOINT_DEPENDENCY = 'SET_ENDPOINT_DEPENDENCY';
+export const SET_SELECTOR_ERRORS = 'SET_SELECTOR_ERRORS';
+export const SET_DASHBOARD_ERRORS = 'SET_DASHBOARD_ERRORS';
 
 // comp
 export const SET_CURRENT_GROUP = 'SET_CURRENT_GROUP';