feat: fetch services, instances, endpoints

src/graph/fragments/selector.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 export const Services = {
-  variable: ["$layer: String!"],
+  variable: "$layer: String!",
   query: `
   services: listServices(layer: $layer) {
     value: id
       label: name
       group
-      layer
+      layers
   }
   `,
 };
@@ -33,10 +33,12 @@ export const Layers = {
 export const Instances = {
   variable: "$serviceId: ID!, $duration: Duration!",
   query: `
-    getServiceInstances(duration: $duration, serviceId: $serviceId) {
+  instances: listInstances(duration: $duration, serviceId: $serviceId) {
       key: id
       label: name
       language
+      instanceUUID
+      layer
       attributes {
         name
         value
@@ -47,7 +49,7 @@ export const Instances = {
 export const Endpoints = {
   variable: "$serviceId: ID!, $keyword: String!",
   query: `
-    getEndpoints: searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
+  endpoints: searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
       key: id
       label: name
     }

src/locales/lang/en.ts

@@ -72,6 +72,7 @@ const msg = {
   fontSize: "Font Size",
   showBackground: "Show Background",
   areaOpacity: "Area Opacity",
+  editGraph: "Edit Graph Options",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -70,6 +70,7 @@ const msg = {
   fontSize: "字体大小",
   showBackground: "显示背景",
   areaOpacity: "透明度",
+  editGraph: "编辑图表选项",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/modules/selectors.ts

@@ -19,17 +19,36 @@ import { Option, Duration } from "@/types/app";
 import { store } from "@/store";
 import graph from "@/graph";
 import { AxiosResponse } from "axios";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface SelectorState {
   services: Option[];
+  instances: Option[];
+  pods: Option[];
+  endpoints: Option[];
+  currentService: string;
+  currentPod: string;
+  durationTime: any;
 }
 
 export const selectorStore = defineStore({
   id: "selector",
   state: (): SelectorState => ({
     services: [],
+    instances: [],
+    pods: [],
+    endpoints: [],
+    currentService: "",
+    currentPod: "",
+    durationTime: useAppStoreWithOut().durationTime,
   }),
   actions: {
+    setCurrentService(service: string) {
+      this.currentService = service;
+    },
+    setCurrentPod(pod: string) {
+      this.currentPod = pod;
+    },
     async fetchLayers(): Promise<AxiosResponse> {
       const res: AxiosResponse = await graph.query("queryLayers").params({});
 
@@ -41,30 +60,40 @@ export const selectorStore = defineStore({
         .params({ layer });
 
       if (!res.data.errors) {
-        this.services = res.data.data.services;
+        this.services = res.data.data.services || [];
+        this.currentService = this.services.length
+          ? this.services[0].value
+          : "";
       }
       return res.data;
     },
-    async getServiceInstances(params: {
+    async getServiceInstances(): Promise<AxiosResponse> {
-      serviceId: string;
+      const res: AxiosResponse = await graph.query("queryInstances").params({
-      duration: Duration;
+        serviceId: this.currentService,
-    }): Promise<AxiosResponse> {
+        duration: this.durationTime,
-      const res: AxiosResponse = await graph
+      });
-        .query("queryInstances")
+      if (!res.data.errors) {
-        .params(params);
+        this.instances = res.data.data.instances || [];
-      return res;
+        this.pods = this.instances;
+        this.currentPod = this.pods.length ? this.pods[0].value : "";
+      }
+      return res.data;
     },
-    async getEndpoints(params: {
+    async getEndpoints(params: { keyword: string }): Promise<AxiosResponse> {
-      keyword: string;
-      serviceId: string;
-    }): Promise<AxiosResponse> {
       if (!params.keyword) {
         params.keyword = "";
       }
-      const res: AxiosResponse = await graph
+      const res: AxiosResponse = await graph.query("queryEndpoints").params({
-        .query("queryEndpoints")
+        serviceId: this.currentService,
-        .params(params);
+        duration: this.durationTime,
-      return res;
+        keyword: params.keyword,
+      });
+      if (!res.data.errors) {
+        this.endpoints = res.data.data.endpoints || [];
+        this.pods = this.endpoints;
+        this.currentPod = this.pods.length ? this.pods[0].value : "";
+      }
+      return res.data;
     },
   },
 });

src/types/app.d.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 export interface Option {
-  value: string | number;
+  value: string;
   label: string;
 }
 export interface Duration {

src/views/dashboard/Edit.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
     <grid-layout />
     <el-dialog
       v-model="dashboardStore.showConfig"
-      title="Edit Graph Options"
+      :title="t('editGraph')"
       fullscreen
       :destroy-on-close="true"
       @closed="dashboardStore.setConfigPanel(false)"
@@ -28,12 +28,14 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import GridLayout from "./panel/Layout.vue";
 // import { LayoutConfig } from "@/types/dashboard";
 import Tool from "./panel/Tool.vue";
 import WidgetConfig from "./configuration/ConfigEdit.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
+const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 // fetch layout data from serve side
 // const layout: any[] = [

src/views/dashboard/New.vue

@@ -84,7 +84,6 @@ onBeforeMount(async () => {
     return { label: d, value: d };
   });
 });
-// selectorStore.fetchServices("general");
 function changeLayer(opt: { label: string; value: string }[]) {
   states.selectedLayer = opt[0].value;
 }

src/views/dashboard/data.ts

@@ -159,28 +159,6 @@ export const ToolIcons = [
   { name: "settings", content: "Settings", id: "settings" },
   { name: "save", content: "Apply", id: "applay" },
 ];
-export const Options = [
-  {
-    value: "Option1",
-    label: "Option1",
-  },
-  {
-    value: "Option2",
-    label: "Option2",
-  },
-  {
-    value: "Option3",
-    label: "Option3",
-  },
-  {
-    value: "Option4",
-    label: "Option4",
-  },
-  {
-    value: "Option5",
-    label: "Option5",
-  },
-];
 export const SelectOpts = [
   {
     value: "guide",

src/views/dashboard/panel/Tool.vue

@@ -18,8 +18,8 @@ limitations under the License. -->
       <div class="selectors-item" v-if="states.key < 3">
         <span class="label">$Service</span>
         <Selector
-          :value="states.service"
+          :value="selectorStore.currentService"
-          :options="Options"
+          :options="selectorStore.services"
           size="mini"
           placeholder="Select a service"
           @change="changeService"
@@ -41,7 +41,7 @@ limitations under the License. -->
         <span class="label">$DestinationService</span>
         <Selector
           :value="states.service"
-          :options="Options"
+          :options="selectorStore.services"
           size="mini"
           placeholder="Select a service"
           :borderRadius="0"
@@ -77,24 +77,25 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Options, SelectOpts, EntityType, ToolIcons } from "../data";
+import { SelectOpts, EntityType, ToolIcons } from "../data";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { ElMessage } from "element-plus";
 
 const dashboardStore = useDashboardStore();
+const selectorStore = useSelectorStore();
 const params = useRoute().params;
 const states = reactive<{
   entity: string | string[];
   layerId: string | string[];
-  service: string;
   pod: string;
   destService: string;
   destPod: string;
   key: number;
 }>({
-  service: Options[0].value,
+  pod: "", // instances or endpoints
-  pod: Options[0].value, // instances and endpoints
   destService: "",
   destPod: "",
   key: EntityType.filter((d: any) => d.value === params.entity)[0].key || 0,
@@ -104,9 +105,25 @@ const states = reactive<{
 
 dashboardStore.setLayer(states.layerId);
 dashboardStore.setEntity(states.entity);
+onBeforeMount(async () => {
+  if (!states.layerId) {
+    return;
+  }
+  const json = await selectorStore.fetchServices(states.layerId);
+  if (json.errors) {
+    ElMessage.error(json.errors);
+    return;
+  }
+  const resp = await selectorStore.getServiceInstances();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  // states.pods =
+});
 
-function changeService(val: { value: string; label: string }) {
+function changeService(service: { value: string; label: string }) {
-  states.service = val.value;
+  selectorStore.setCurrentService(service.value);
 }
 
 function clickIcons(t: { id: string; content: string; name: string }) {