feat: update instanceList and 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 type { PropType } from "vue";
+import { defineProps, onBeforeMount } from "vue";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
 
 defineProps({
   data: {
-    type: Array as PropType<{ label: string; value: string }[]>,
-    default: () => [],
+    type: Object,
   },
   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 type { PropType } from "vue";
+import { defineProps, onBeforeMount } from "vue";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
 
 defineProps({
   data: {
-    type: Array as PropType<{ label: string; value: string }[]>,
-    default: () => [],
+    type: Object,
   },
   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,
 };