feat: update instanceList and endpointList

src/store/modules/selectors.ts

@@ -83,10 +83,13 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
-    async getEndpoints(params: {
+    async getEndpoints(params?: {
-      keyword: string;
+      keyword?: string;
       serviceId?: string;
     }): Promise<AxiosResponse> {
+      if (!params) {
+        params = {};
+      }
       if (!params.keyword) {
         params.keyword = "";
       }

src/views/dashboard/configuration/ConfigEdit.vue

@@ -169,12 +169,12 @@ export default defineComponent({
       queryMetricType(states.metrics[0]);
     }
 
-    if (PodsChartTypes.includes(String(params.entity))) {
+    if (params.entity === "service") {
+      states.visType = ChartTypes;
+    } else {
       states.visType = ChartTypes.filter(
         (d: Option) => !PodsChartTypes.includes(d.value)
       );
-    } else {
-      states.visType = ChartTypes;
     }
 
     async function changeMetrics(arr: Option[]) {

src/views/dashboard/data.ts

@@ -49,14 +49,19 @@ export const DefaultGraphConfig: { [key: string]: any } = {
     showUint: true,
   },
   Table: {
-    type: "Card",
+    type: "Table",
     showTableValues: true,
     tableHeaderCol1: "",
     tableHeaderCol2: "",
   },
   TopList: {
     type: "TopList",
-    topN: 10,
+  },
+  InstanceList: {
+    type: "InstanceList",
+  },
+  EndpointList: {
+    type: "EndpointList",
   },
 };
 

src/views/dashboard/graphs/EndpointList.vue

@@ -13,22 +13,34 @@ 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>
-  <el-table :data="data" style="width: 100%">
+  <el-table
+    :data="selectorStore.endpoints"
+    style="width: 100%; height: 100%; overflow: auto"
+  >
     <el-table-column prop="label" label="Endpoints" />
   </el-table>
 </template>
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, onBeforeMount } from "vue";
-import type { PropType } from "vue";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
 
 defineProps({
   data: {
-    type: Array as PropType<{ label: string; value: string }[]>,
+    type: Object,
-    default: () => [],
   },
   config: {
     type: Object,
     default: () => ({}),
   },
 });
+const selectorStore = useSelectorStore();
+
+onBeforeMount(async () => {
+  const resp = await selectorStore.getEndpoints();
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+});
 </script>

src/views/dashboard/graphs/InstanceList.vue

@@ -13,22 +13,34 @@ 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>
-  <el-table :data="data" style="width: 100%">
+  <el-table
+    :data="selectorStore.instances"
+    style="width: 100%; height: 100%; overflow: auto"
+  >
     <el-table-column prop="label" label="Service Instances" />
   </el-table>
 </template>
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, onBeforeMount } from "vue";
-import type { PropType } from "vue";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
 
 defineProps({
   data: {
-    type: Array as PropType<{ label: string; value: string }[]>,
+    type: Object,
-    default: () => [],
   },
   config: {
     type: Object,
     default: () => ({}),
   },
 });
+const selectorStore = useSelectorStore();
+
+onBeforeMount(async () => {
+  const resp = await selectorStore.getServiceInstances();
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+});
 </script>

src/views/dashboard/graphs/index.ts

@@ -23,6 +23,8 @@ import TopList from "./TopList.vue";
 import Table from "./Table.vue";
 import Pie from "./Pie.vue";
 import Card from "./Card.vue";
+import InstanceList from "./InstanceList.vue";
+import EndpointList from "./EndpointList.vue";
 
 export default {
   Line,
@@ -33,4 +35,6 @@ export default {
   Table,
   Pie,
   Card,
+  EndpointList,
+  InstanceList,
 };

src/views/dashboard/panel/Tool.vue

@@ -165,10 +165,11 @@ async function fetchPods(type: string) {
     case "serviceInstance":
       resp = await selectorStore.getServiceInstances();
       break;
+    default:
+      resp = {};
   }
   if (resp.errors) {
     ElMessage.error(resp.errors);
-    return [];
   }
 }
 </script>