fix: update components, save templates (#35)

src/hooks/useProcessor.ts

@@ -318,11 +318,11 @@ function aggregation(val: number, standard: any): number | string {
     data = val - Number(standard.plus);
     return data;
   }
-  if (!isNaN(standard.multiply)) {
+  if (!isNaN(standard.multiply) && standard.divide !== 0) {
     data = val * Number(standard.multiply);
     return data;
   }
-  if (!isNaN(standard.divide)) {
+  if (!isNaN(standard.divide) && standard.divide !== 0) {
     data = val / Number(standard.divide);
     return data;
   }

src/store/modules/dashboard.ts

@@ -293,7 +293,7 @@ export const dashboardStore = defineStore({
         return res.data;
       }
       const data = res.data.data.getAllTemplates;
-      const list = [];
+      let list = [];
       for (const t of data) {
         const c = JSON.parse(t.configuration);
         const key = [c.layer, c.entity, c.name].join("_");
@@ -310,6 +310,17 @@ export const dashboardStore = defineStore({
           JSON.stringify({ id: t.id, configuration: c })
         );
       }
+      list = list.sort((a, b) => {
+        const nameA = a.name.toUpperCase();
+        const nameB = b.name.toUpperCase();
+        if (nameA < nameB) {
+          return -1;
+        }
+        if (nameA > nameB) {
+          return 1;
+        }
+        return 0;
+      });
       sessionStorage.setItem("dashboards", JSON.stringify(list));
       return res.data;
     },

src/store/modules/selectors.ts

@@ -101,6 +101,7 @@ export const selectorStore = defineStore({
       keyword?: string;
       serviceId?: string;
       isRelation?: boolean;
+      limit?: number;
     }): Promise<Nullable<AxiosResponse>> {
       if (!params) {
         params = {};
@@ -113,6 +114,7 @@ export const selectorStore = defineStore({
         serviceId,
         duration: this.durationTime,
         keyword: params.keyword || "",
+        limit: params.limit,
       });
       if (!res.data.errors) {
         if (params.isRelation) {

src/views/dashboard/List.vue

@@ -46,6 +46,7 @@ limitations under the License. -->
         ref="multipleTableRef"
         :default-sort="{ prop: 'name' }"
         @selection-change="handleSelectionChange"
+        height="637px"
       >
         <el-table-column type="selection" width="55" />
         <el-table-column prop="name" label="Name">

src/views/dashboard/configuration/widget/MetricOptions.vue

@@ -144,10 +144,17 @@ async function setMetricType() {
   }
   states.metricList = (json.data.metrics || []).filter(
     (d: { catalog: string; type: string }) => {
-      if (states.isList || graph.type === "Table") {
+      if (states.isList) {
         if (d.type === MetricsType.REGULAR_VALUE) {
           return d;
         }
+      } else if (graph.type === "Table") {
+        if (
+          d.type === MetricsType.LABELED_VALUE ||
+          d.type === MetricsType.REGULAR_VALUE
+        ) {
+          return d;
+        }
       } else {
         return d;
       }

src/views/dashboard/configuration/widget/StandardOptions.vue

@@ -33,7 +33,7 @@ limitations under the License. -->
       @change="changeStandardOpt({ sortOrder })"
     />
   </div>
-  <div class="item" v-show="percentile">
+  <div class="item">
     <span class="label">{{ t("labels") }}</span>
     <el-input
       class="input"
@@ -43,7 +43,7 @@ limitations under the License. -->
       @change="changeStandardOpt"
     />
   </div>
-  <div class="item" v-show="percentile">
+  <div class="item">
     <span class="label">{{ t("labelsIndex") }}</span>
     <el-input
       class="input"
@@ -55,61 +55,67 @@ limitations under the License. -->
   </div>
   <div class="item">
     <span class="label">{{ t("plus") }}</span>
-    <el-input
+    <el-input-number
       class="input"
       v-model="selectedGrid.standard.plus"
+      :min="0"
       size="small"
-      placeholder="none"
+      placeholder="Please input"
       @change="changeStandardOpt"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("minus") }}</span>
-    <el-input
+    <el-input-number
       class="input"
       v-model="selectedGrid.standard.minus"
+      :min="0"
       size="small"
-      placeholder="none"
+      placeholder="Please input"
       @change="changeStandardOpt"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("multiply") }}</span>
-    <el-input
+    <el-input-number
       class="input"
       v-model="selectedGrid.standard.multiply"
+      :min="1"
       size="small"
-      placeholder="none"
+      placeholder="Please input"
       @change="changeStandardOpt"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("divide") }}</span>
-    <el-input
+    <el-input-number
       class="input"
       v-model="selectedGrid.standard.divide"
       size="small"
-      placeholder="none"
+      placeholder="Please input"
+      :min="1"
       @change="changeStandardOpt"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("convertToMilliseconds") }}</span>
-    <el-input
+    <el-input-number
       class="input"
+      :min="0"
       v-model="selectedGrid.standard.milliseconds"
       size="small"
-      placeholder="none"
+      placeholder="Please input"
       @change="changeStandardOpt"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("convertToSeconds") }}</span>
-    <el-input
+    <el-input-number
       class="input"
+      :min="0"
       v-model="selectedGrid.standard.seconds"
       size="small"
-      placeholder="none"
+      placeholder="Please input"
       @change="changeStandardOpt"
     />
   </div>
@@ -127,9 +133,6 @@ const { t } = useI18n();
 const emit = defineEmits(["update", "loading"]);
 const dashboardStore = useDashboardStore();
 const { selectedGrid } = dashboardStore;
-const percentile = ref<boolean>(
-  selectedGrid.metricTypes.includes("readLabeledMetricsValues")
-);
 const sortOrder = ref<string>(selectedGrid.standard.sortOrder || "DES");
 
 function changeStandardOpt(param?: any) {

src/views/dashboard/controls/Widget.vue

@@ -66,6 +66,7 @@ limitations under the License. -->
           i: data.i,
         }"
         :standard="data.standard"
+        :needQuery="needQuery"
       />
     </div>
     <div v-else class="no-data">{{ t("noData") }}</div>
@@ -153,6 +154,7 @@ export default defineComponent({
         if (props.data.i !== dashboardStore.selectedGrid.i) {
           return;
         }
+        const isList = ListChartTypes.includes(props.data.graph.type || "");
         if (
           ListChartTypes.includes(dashboardStore.selectedGrid.graph.type) ||
           isList
@@ -165,6 +167,7 @@ export default defineComponent({
     watch(
       () => [selectorStore.currentService, selectorStore.currentDestService],
       () => {
+        const isList = ListChartTypes.includes(props.data.graph.type || "");
         if (isList) {
           return;
         }

src/views/dashboard/graphs/EndpointList.vue

@@ -110,6 +110,7 @@ const props = defineProps({
     default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
+  needQuery: { type: Boolean, default: false },
 });
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
@@ -117,13 +118,18 @@ const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
 const searchEndpoints = ref<Endpoint[]>([]);
 const pageSize = 5;
+const total = 10;
 const searchText = ref<string>("");
 
-queryEndpoints();
-
-async function queryEndpoints() {
+if (props.needQuery) {
+  queryEndpoints(total);
+}
+async function queryEndpoints(limit?: number) {
   chartLoading.value = true;
-  const resp = await selectorStore.getEndpoints();
+  const resp = await selectorStore.getEndpoints({
+    limit,
+    keyword: searchText.value,
+  });
 
   chartLoading.value = false;
   if (resp.errors) {
@@ -132,7 +138,7 @@ async function queryEndpoints() {
   }
   searchEndpoints.value = selectorStore.pods;
   endpoints.value = selectorStore.pods.splice(0, pageSize);
-  if (props.config.isEdit) {
+  if (props.config.isEdit || !endpoints.value.length) {
     return;
   }
   queryEndpointMetrics(endpoints.value);
@@ -177,12 +183,9 @@ function changePage(pageIndex: number) {
     pageSize * (pageIndex || 1)
   );
 }
-function searchList() {
-  const currentEndpoints = selectorStore.pods.filter((d: { label: string }) =>
-    d.label.includes(searchText.value)
-  );
-  searchEndpoints.value = currentEndpoints;
-  endpoints.value = currentEndpoints.splice(0, pageSize);
+async function searchList() {
+  const limit = searchText.value ? undefined : total;
+  await queryEndpoints(limit);
 }
 watch(
   () => [props.config.metricTypes, props.config.metrics],
@@ -193,9 +196,9 @@ watch(
   }
 );
 watch(
-  () => [selectorStore.currentService],
+  () => selectorStore.currentService,
   () => {
-    queryEndpoints();
+    queryEndpoints(total);
   }
 );
 </script>

src/views/dashboard/graphs/InstanceList.vue

@@ -42,6 +42,20 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
+        <el-table-column label="Service Instances">
+          <template #default="scope">
+            <div class="attributes" v-if="scope.row.attributes.length">
+              <div
+                v-for="(attr, index) in scope.row.attributes"
+                :key="attr.name + index"
+                :style="{ fontSize: `${config.fontSize}px` }"
+              >
+                {{ attr.name }}: {{ attr.value || null }}
+              </div>
+            </div>
+            <div v-else>No Data</div>
+          </template>
+        </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
           :label="metric"
@@ -113,6 +127,7 @@ const props = defineProps({
     }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
+  needQuery: { type: Boolean, default: false },
 });
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
@@ -122,15 +137,18 @@ const searchInstances = ref<Instance[]>([]); // all instances
 const pageSize = 5;
 const searchText = ref<string>("");
 
+if (props.needQuery) {
   queryInstance();
-
+}
 async function queryInstance() {
   chartLoading.value = true;
   const resp = await selectorStore.getServiceInstances();
 
   chartLoading.value = false;
-  if (resp.errors) {
+  if (resp && resp.errors) {
     ElMessage.error(resp.errors);
+    searchInstances.value = [];
+    instances.value = [];
     return;
   }
   searchInstances.value = selectorStore.pods;
@@ -178,6 +196,7 @@ function clickInstance(scope: any) {
 function changePage(pageIndex: number) {
   instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
 }
+
 function searchList() {
   searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
@@ -193,6 +212,12 @@ watch(
     }
   }
 );
+watch(
+  () => selectorStore.currentService,
+  () => {
+    queryInstance();
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
@@ -204,4 +229,9 @@ watch(
 .inputs {
   width: 300px;
 }
+
+.attributes {
+  max-height: 80px;
+  overflow: auto;
+}
 </style>

src/views/dashboard/graphs/Table.vue

@@ -21,13 +21,13 @@ limitations under the License. -->
         :style="`width: ${nameWidth + initWidth}px`"
       >
         <div class="name" :style="`width: ${nameWidth}px`">
-          {{ config.graph.tableHeaderCol1 || t("name") }}
+          {{ config.tableHeaderCol1 || t("name") }}
           <i class="r cp" ref="draggerName">
             <Icon iconName="settings_ethernet" size="middle" />
           </i>
         </div>
         <div class="value-col" v-if="showTableValues">
-          {{ config.graph.tableHeaderCol2 || t("value") }}
+          {{ config.tableHeaderCol2 || t("value") }}
         </div>
       </div>
       <div
@@ -60,11 +60,9 @@ const props = defineProps({
   },
   config: {
     type: Object as PropType<{
-      graph: {
       showTableValues: boolean;
       tableHeaderCol2: string;
       tableHeaderCol1: string;
-      };
       metricTypes: string[];
     }>,
     default: () => ({ showTableValues: true }),
@@ -77,15 +75,15 @@ const chartTable = ref<Nullable<HTMLElement>>(null);
 const initWidth = ref<number>(0);
 const nameWidth = ref<number>(0);
 const draggerName = ref<Nullable<HTMLElement>>(null);
-const showTableValues = ref<boolean>(props.config.graph.showTableValues);
+const showTableValues = ref<boolean>(props.config.showTableValues || false);
 onMounted(() => {
   if (!chartTable.value) {
     return;
   }
-  const width = props.config.graph.showTableValues
+  const width = props.config.showTableValues
     ? chartTable.value.offsetWidth / 2
     : chartTable.value.offsetWidth;
-  initWidth.value = props.config.graph.showTableValues
+  initWidth.value = props.config.showTableValues
     ? chartTable.value.offsetWidth / 2
     : 0;
   nameWidth.value = width - 5;

src/views/dashboard/panel/Tool.vue

@@ -72,7 +72,7 @@ limitations under the License. -->
         />
       </div>
     </div>
-    <div class="flex-h tools">
+    <div class="flex-h tools" v-loading="loading">
       <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
         <span
           @click="clickIcons(t)"
@@ -118,7 +118,6 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
 import { useI18n } from "vue-i18n";
-import { useThrottleFn } from "@vueuse/core";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
@@ -128,6 +127,7 @@ const params = useRoute().params;
 const toolIcons = ref<{ name: string; content: string; id: string }[]>(
   EndpointRelationTools
 );
+const loading = ref<boolean>(false);
 const states = reactive<{
   destService: string;
   destPod: string;
@@ -145,7 +145,6 @@ const states = reactive<{
   currentDestService: "",
   currentDestPod: "",
 });
-const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000);
 
 setCurrentDashboard();
 appStore.setEventStack([initSelector]);
@@ -329,7 +328,13 @@ function changeMode() {
   ElMessage.warning(t("viewWarning"));
 }
 
-function clickIcons(t: { id: string; content: string; name: string }) {
+async function clickIcons(t: { id: string; content: string; name: string }) {
+  if (t.id === "apply") {
+    loading.value = true;
+    await dashboardStore.saveDashboard();
+    loading.value = false;
+    return;
+  }
   if (
     dashboardStore.selectedGrid &&
     dashboardStore.selectedGrid.type === "Tab"
@@ -361,9 +366,6 @@ function setTabControls(id: string) {
     case "addTopology":
       dashboardStore.addTabControls("Topology");
       break;
-    case "apply":
-      applyDashboard();
-      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -390,9 +392,6 @@ function setControls(id: string) {
     case "addTopology":
       dashboardStore.addControl("Topology");
       break;
-    case "apply":
-      applyDashboard();
-      break;
     default:
       dashboardStore.addControl("Widget");
   }