feat: query layers

src/graph/query/selector.ts

@@ -17,7 +17,7 @@
 import { Services, Layers, Endpoints, Instances } from "../fragments/selector";
 
 export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
-export const queryLayers = `query ${Layers.query}`;
 export const queryEndpoints = `query queryEndpoints(${Endpoints.variable}) {${Endpoints.query}}`;
 
 export const queryInstances = `query queryInstances(${Instances.variable}) {${Instances.query}}`;
+export const queryLayers = `query listLayer {${Layers.query}}`;

src/store/modules/selectors.ts

@@ -33,7 +33,7 @@ export const selectorStore = defineStore({
     async fetchLayers(): Promise<AxiosResponse> {
       const res: AxiosResponse = await graph.query("queryLayers").params({});
 
-      return res;
+      return res.data || {};
     },
     async fetchServices(layer: string): Promise<AxiosResponse> {
       const res: AxiosResponse = await graph
@@ -43,7 +43,7 @@ export const selectorStore = defineStore({
       if (!res.data.errors) {
         this.services = res.data.data.services;
       }
-      return res;
+      return res.data;
     },
     async getServiceInstances(params: {
       serviceId: string;

src/views/dashboard/New.vue

@@ -26,8 +26,8 @@ limitations under the License. -->
     <div class="item">
       <div class="label">{{ t("layer") }}</div>
       <Selector
-        :value="states.layer"
+        v-model="states.selectedLayer"
-        :options="Options"
+        :options="states.layers"
         size="small"
         placeholder="Select a layer"
         @change="changeLayer"
@@ -53,28 +53,40 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, onBeforeMount } from "vue";
 import { useI18n } from "vue-i18n";
 import router from "@/router";
 import { useSelectorStore } from "@/store/modules/selectors";
-import { EntityType, Options } from "./data";
+import { EntityType } from "./data";
 import uuid from "@/utils/uuid";
+import { ElMessage } from "element-plus";
 
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const states = reactive({
   name: "",
-  layer: Options[0].value,
+  selectedLayer: "",
   entity: EntityType[0].value,
+  layers: [],
 });
 const onCreate = () => {
   const id = uuid();
-  const path = `/dashboard/edit/${states.layer}/${states.entity}/${id}`;
+  const path = `/dashboard/edit/${states.selectedLayer}/${states.entity}/${id}`;
   router.push(path);
 };
-selectorStore.fetchServices("general");
+onBeforeMount(async () => {
+  const resp = await selectorStore.fetchLayers();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+  states.selectedLayer = resp.data.layers[0];
+  states.layers = resp.data.layers.map((d: string) => {
+    return { label: d, value: d };
+  });
+});
+// selectorStore.fetchServices("general");
 function changeLayer(opt: { label: string; value: string }[]) {
-  states.layer = opt[0].value;
+  states.selectedLayer = opt[0].value;
 }
 function changeEntity(opt: { label: string; value: string }[]) {
   states.entity = opt[0].value;

src/views/dashboard/configuration/ConfigEdit.vue

@@ -245,7 +245,7 @@ export default defineComponent({
         return;
       }
 
-      if (json.error) {
+      if (json.errors) {
         return;
       }
       const metricVal = json.data.readMetricsValues.values.values.map(

vue.config.js

@@ -40,9 +40,19 @@ module.exports = {
         chunks: "all",
         cacheGroups: {
           echarts: {
+            name: "echarts",
+            test: /[\\/]node_modules[\\/]echarts[\\/]/,
+            priority: 1,
+          },
+          elementPlus: {
+            name: "element-plus",
+            test: /[\\/]node_modules[\\/]element-plus[\\/]/,
+            priority: 2,
+          },
+          three: {
             name: "three",
             test: /[\\/]node_modules[\\/]three[\\/]/,
-            priority: 2,
+            priority: 3,
           },
         },
       },