fix: update components, save templates (#35)

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>("");
 
-queryInstance();
-
+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;
-      };
+      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;