From 9cb8e2b64d9b6ccb3e5a875a119437a823f9e02a Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 15 Dec 2021 15:43:38 +0800
Subject: [PATCH 1/6] feat: add selector module

---
 src/App.vue                                |   1 -
 src/components/TimePicker.vue              |   2 +-
 src/graph/fragments/{global.ts => app.ts}  |   0
 src/graph/fragments/selector.ts            |  32 ++++++
 src/graph/index.ts                         |   5 +-
 src/graph/query/{global.ts => app.ts}      |   2 +-
 src/graph/query/selector.ts                |  20 ++++
 src/locales/lang/en.ts                     |   1 +
 src/locales/lang/zh.ts                     |   1 +
 src/store/modules/{app/index.ts => app.ts} |   0
 src/store/modules/selectors.ts             |  54 +++++++++
 src/styles/reset.scss                      |   2 +-
 src/utils/cancelToken.ts                   |   4 +-
 src/views/dashboard/List.vue               |   6 +-
 src/views/dashboard/New.vue                | 122 ++++++++++++++++++++-
 15 files changed, 238 insertions(+), 14 deletions(-)
 rename src/graph/fragments/{global.ts => app.ts} (100%)
 create mode 100644 src/graph/fragments/selector.ts
 rename src/graph/query/{global.ts => app.ts} (93%)
 create mode 100644 src/graph/query/selector.ts
 rename src/store/modules/{app/index.ts => app.ts} (100%)
 create mode 100644 src/store/modules/selectors.ts

diff --git a/src/App.vue b/src/App.vue
index 823d6cea..74859ffc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,6 @@ limitations under the License. -->
 
 <style>
 #app {
-  text-align: center;
   color: #2c3e50;
   height: 100%;
 }
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index 17625d9f..2e271955 100755
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -492,7 +492,7 @@ watch(
 }
 
 .datepicker-range {
-  min-width: 238px;
+  min-width: 260px;
 }
 
 .datepicker-range .datepicker-popup {
diff --git a/src/graph/fragments/global.ts b/src/graph/fragments/app.ts
similarity index 100%
rename from src/graph/fragments/global.ts
rename to src/graph/fragments/app.ts
diff --git a/src/graph/fragments/selector.ts b/src/graph/fragments/selector.ts
new file mode 100644
index 00000000..a938ee21
--- /dev/null
+++ b/src/graph/fragments/selector.ts
@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+export const Services = {
+  variable: ["$layer: String!"],
+  query: `
+    services: listServices(layer: $layer) {
+      value: id
+      label: name
+      group
+      layer
+    }
+  `,
+};
+export const Layers = {
+  query: `
+    layers: listLayers
+  `,
+};
diff --git a/src/graph/index.ts b/src/graph/index.ts
index 70cc5437..cbdcb063 100644
--- a/src/graph/index.ts
+++ b/src/graph/index.ts
@@ -16,9 +16,10 @@
  */
 import axios, { AxiosPromise, AxiosResponse } from "axios";
 import { cancelToken } from "@/utils/cancelToken";
-import * as global from "./query/global";
+import * as app from "./query/app";
+import * as selector from "./query/selector";
 
-const query: { [key: string]: string } = { ...global };
+const query: { [key: string]: string } = { ...app, ...selector };
 class Graph {
   private queryData = "";
   public query(queryData: string) {
diff --git a/src/graph/query/global.ts b/src/graph/query/app.ts
similarity index 93%
rename from src/graph/query/global.ts
rename to src/graph/query/app.ts
index a475283b..d538c417 100644
--- a/src/graph/query/global.ts
+++ b/src/graph/query/app.ts
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { OAPTimeInfo, OAPVersion } from "../fragments/global";
+import { OAPTimeInfo, OAPVersion } from "../fragments/app";
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
 
diff --git a/src/graph/query/selector.ts b/src/graph/query/selector.ts
new file mode 100644
index 00000000..83d9229c
--- /dev/null
+++ b/src/graph/query/selector.ts
@@ -0,0 +1,20 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+import { Services, Layers } from "../fragments/selector";
+
+export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
+export const queryLayers = `query ${Layers.query}`;
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 05fe3fc9..13238cce 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -43,6 +43,7 @@ const msg = {
   eventList: "Event List",
   databasePanel: "Database Panel",
   meshServicePanel: "Service Panel",
+  newDashboard: "New a dashboard",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 6e5912fb..3c829f83 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -43,6 +43,7 @@ const msg = {
   eventList: "事件列表",
   databasePanel: "数据库面板",
   meshServicePanel: "服务面板",
+  newDashboard: "新增仪表盘",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app.ts
similarity index 100%
rename from src/store/modules/app/index.ts
rename to src/store/modules/app.ts
diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts
new file mode 100644
index 00000000..6e919664
--- /dev/null
+++ b/src/store/modules/selectors.ts
@@ -0,0 +1,54 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+import { defineStore } from "pinia";
+import { Option } from "@/types/app";
+import { store } from "@/store";
+import graph from "@/graph";
+import { AxiosResponse } from "axios";
+
+interface SelectorState {
+  services: Option[];
+}
+
+export const selectorStore = defineStore({
+  id: "selector",
+  state: (): SelectorState => ({
+    services: [],
+  }),
+  getters: {},
+  actions: {
+    async fetchLayers() {
+      const res: AxiosResponse = await graph.query("queryLayers").params({});
+
+      return res;
+    },
+    async fetchServices(layer: string): Promise<AxiosResponse> {
+      const res: AxiosResponse = await graph
+        .query("queryServices")
+        .params({ layer });
+
+      if (!res.data.errors) {
+        this.services = res.data.data.services;
+      }
+      return res;
+    },
+  },
+});
+
+export function useSelectorStore(): any {
+  return selectorStore(store);
+}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index ba25a893..c4384346 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -18,7 +18,7 @@
  body {
   margin: 0;
   line-height: 1.5;
-  font-size: 13px;
+  font-size: 14px;
   color: #3d444f;
   font-family: 'Helvetica', 'Arial', 'Source Han Sans CN', 'Microsoft YaHei', 'sans-serif';
   text-rendering: optimizeLegibility;
diff --git a/src/utils/cancelToken.ts b/src/utils/cancelToken.ts
index f5e65dee..44da32ea 100644
--- a/src/utils/cancelToken.ts
+++ b/src/utils/cancelToken.ts
@@ -14,11 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable */
+
 import axios from "axios";
 const CancelToken = axios.CancelToken;
 
-export const cancelToken = () =>
+export const cancelToken = (): any =>
   new CancelToken(function executor(c) {
     const w = window as any;
     w.axiosCancel.push(c);
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index e7614d45..ef53affe 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -28,7 +28,9 @@ limitations under the License. -->
         </template>
       </el-input>
       <router-link to="/dashboard/new">
-        <el-button size="small" type="primary">+ New Dashboard</el-button>
+        <el-button size="small" type="primary">
+          + {{ t("newDashboard") }}
+        </el-button>
       </router-link>
     </div>
     <el-table :data="tableData" style="width: 100%" max-height="550">
@@ -57,6 +59,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
 //  # - os-linux
 //  # - k8s
@@ -69,6 +72,7 @@ import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
 //  # - cache
 //  # - browser
 //  # - skywalking
+const { t } = useI18n();
 const searchText = ref<string>("");
 const tableData = [
   {
diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue
index 01ccb749..141042bb 100644
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@@ -13,11 +13,123 @@ 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>
-  <div class="new-dashboard">{{ props.msg }}</div>
+  <div class="new-dashboard">
+    <h4>Create a new dashboard</h4>
+    <div class="item">
+      <div class="label">Layer</div>
+      <el-select
+        size="small"
+        v-model="template"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <div class="label">Entity</div>
+      <el-select
+        size="small"
+        v-model="entity"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in EntityType"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <div class="label">Service</div>
+      <el-select
+        size="small"
+        v-model="template"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <div class="label">Service / Endpoint</div>
+      <el-cascader
+        v-model="value"
+        :options="options"
+        :props="props"
+      ></el-cascader>
+    </div>
+    <div class="item">
+      <div class="label">Destination Service</div>
+      <el-select
+        size="small"
+        v-model="template"
+        placeholder="Select"
+        class="selectors"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="item">
+      <span class="label">Destination Service / Endpoint</span>
+      <el-cascader
+        v-model="value"
+        :options="options"
+        :props="props"
+      ></el-cascader>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import { defineProps } from "vue";
-const props = defineProps({
-  msg: String,
-});
+import { ref } from "vue";
+import { ElSelect, ElOption, ElCascader } from "element-plus";
+import { useSelectorStore } from "@/store/modules/selectors";
+
+const EntityType = [
+  { value: "Service", label: "Service" },
+  { value: "All", label: "All" },
+  { value: "Endpoint", label: "Service Endpoint" },
+  { value: "ServiceInstance", label: "Service Instance" },
+  { value: "ServiceRelation", label: "Service Relation" },
+  { value: "ServiceInstanceRelation", label: "Service Instance Relation" },
+  { value: "EndpointRelation", label: "Endpoint Relation" },
+];
+const selectorStore = useSelectorStore();
+const entity = ref("");
+const template = ref("");
+const options = ref([]);
+selectorStore.fetchServices("general");
 </script>
+<style lang="scss" scoped>
+.new-dashboard {
+  width: 600px;
+  margin: 0 auto;
+}
+.item {
+  margin-top: 20px;
+}
+.selectors {
+  width: 600px;
+}
+</style>

From 1b30216545546ff1df5f3e7416ad5ada308c9e10 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 15 Dec 2021 16:57:00 +0800
Subject: [PATCH 2/6] feat: add new dashboard

---
 src/components/TimePicker.vue    |   2 +-
 src/layout/components/NavBar.vue |   1 +
 src/views/dashboard/New.vue      | 133 +++++++++----
 src/views/dashboard/data.ts      | 315 +++++++++++++++++++++++++++++++
 4 files changed, 415 insertions(+), 36 deletions(-)
 create mode 100644 src/views/dashboard/data.ts

diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index 2e271955..17625d9f 100755
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -492,7 +492,7 @@ watch(
 }
 
 .datepicker-range {
-  min-width: 260px;
+  min-width: 238px;
 }
 
 .datepicker-range .datepicker-popup {
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 59f10033..27501d0a 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -91,6 +91,7 @@ watch(
   background-color: #fafbfc;
   border-bottom: 1px solid #dfe4e8;
   color: #222;
+  font-size: 12px;
 }
 .nav-bar.dark {
   background-color: #333840;
diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue
index 141042bb..45d55f49 100644
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@@ -15,16 +15,24 @@ limitations under the License. -->
 <template>
   <div class="new-dashboard">
     <h4>Create a new dashboard</h4>
+    <div class="item">
+      <div class="label">Name</div>
+      <el-input
+        size="small"
+        v-model="state.name"
+        placeholder="Please input name"
+      />
+    </div>
     <div class="item">
       <div class="label">Layer</div>
       <el-select
         size="small"
-        v-model="template"
-        placeholder="Select"
+        v-model="state.layer"
+        placeholder="Select a layer"
         class="selectors"
       >
         <el-option
-          v-for="item in options"
+          v-for="item in Options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -36,8 +44,8 @@ limitations under the License. -->
       <div class="label">Entity</div>
       <el-select
         size="small"
-        v-model="entity"
-        placeholder="Select"
+        v-model="state.entity"
+        placeholder="Select a entity"
         class="selectors"
       >
         <el-option
@@ -49,16 +57,16 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item">
+    <div class="item" v-show="state.entity === 'Service'">
       <div class="label">Service</div>
       <el-select
         size="small"
-        v-model="template"
-        placeholder="Select"
+        v-model="state.service"
+        placeholder="Select a service"
         class="selectors"
       >
         <el-option
-          v-for="item in options"
+          v-for="item in Options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -66,24 +74,38 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item">
+    <div class="item" v-show="state.entity === 'Endpoint'">
       <div class="label">Service / Endpoint</div>
       <el-cascader
-        v-model="value"
-        :options="options"
+        v-model="state.serviceEndpoint"
+        :options="SelectOpt"
         :props="props"
+        size="small"
+        @change="handleChange"
+        :style="{ width: '600px' }"
       ></el-cascader>
     </div>
-    <div class="item">
+    <div class="item" v-show="state.entity === 'ServiceInstance'">
+      <div class="label">Service / Instance</div>
+      <el-cascader
+        v-model="state.serviceInstance"
+        :options="SelectOpt"
+        :props="props"
+        size="small"
+        @change="handleChange"
+        :style="{ width: '600px' }"
+      ></el-cascader>
+    </div>
+    <div class="item" v-show="state.entity === 'ServiceRelation'">
       <div class="label">Destination Service</div>
       <el-select
         size="small"
-        v-model="template"
+        v-model="state.destService"
         placeholder="Select"
         class="selectors"
       >
         <el-option
-          v-for="item in options"
+          v-for="item in Options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -91,35 +113,67 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item">
+    <div class="item" v-show="state.entity === 'EndpointRelation'">
       <span class="label">Destination Service / Endpoint</span>
       <el-cascader
-        v-model="value"
-        :options="options"
+        v-model="state.destServiceEndpoint"
+        :options="SelectOpt"
         :props="props"
+        @change="handleChange"
+        :style="{ width: '600px' }"
       ></el-cascader>
     </div>
+    <div class="item" v-show="state.entity === 'ServiceInstanceRelation'">
+      <span class="label">Destination Service / Instance</span>
+      <el-cascader
+        v-model="state.destServiceInstance"
+        :options="SelectOpt"
+        :props="props"
+        @change="handleChange"
+        :style="{ width: '600px' }"
+      ></el-cascader>
+    </div>
+    <div class="btn">
+      <el-button class="create" size="small" type="primary" @click="onCreate">
+        Create
+      </el-button>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
-import { ElSelect, ElOption, ElCascader } from "element-plus";
-import { useSelectorStore } from "@/store/modules/selectors";
+import { reactive } from "vue";
+import {
+  ElSelect,
+  ElOption,
+  ElCascader,
+  ElInput,
+  ElButton,
+} from "element-plus";
+// import { useSelectorStore } from "@/store/modules/selectors";
+import { EntityType, SelectOpt, Options } from "./data";
 
-const EntityType = [
-  { value: "Service", label: "Service" },
-  { value: "All", label: "All" },
-  { value: "Endpoint", label: "Service Endpoint" },
-  { value: "ServiceInstance", label: "Service Instance" },
-  { value: "ServiceRelation", label: "Service Relation" },
-  { value: "ServiceInstanceRelation", label: "Service Instance Relation" },
-  { value: "EndpointRelation", label: "Endpoint Relation" },
-];
-const selectorStore = useSelectorStore();
-const entity = ref("");
-const template = ref("");
-const options = ref([]);
-selectorStore.fetchServices("general");
+// const selectorStore = useSelectorStore();
+const props = {
+  expandTrigger: "hover",
+};
+const state = reactive({
+  name: "",
+  layer: "",
+  entity: EntityType[0].value,
+  service: "",
+  serviceEndpoint: "",
+  serviceInstance: "",
+  destService: "",
+  destServiceEndpoint: "",
+  destServiceInstance: "",
+});
+const handleChange = (value: any) => {
+  console.log(value);
+};
+const onCreate = () => {
+  console.log(state);
+};
+// selectorStore.fetchServices("general");
 </script>
 <style lang="scss" scoped>
 .new-dashboard {
@@ -132,4 +186,13 @@ selectorStore.fetchServices("general");
 .selectors {
   width: 600px;
 }
+.el-cascader-menu {
+  width: 600px;
+}
+.create {
+  width: 160px;
+}
+.btn {
+  margin-top: 40px;
+}
 </style>
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
new file mode 100644
index 00000000..9e521e81
--- /dev/null
+++ b/src/views/dashboard/data.ts
@@ -0,0 +1,315 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+export const EntityType = [
+  { value: "Service", label: "Service" },
+  { value: "All", label: "All" },
+  { value: "Endpoint", label: "Service Endpoint" },
+  { value: "ServiceInstance", label: "Service Instance" },
+  { value: "ServiceRelation", label: "Service Relation" },
+  { value: "ServiceInstanceRelation", label: "Service Instance Relation" },
+  { value: "EndpointRelation", label: "Endpoint Relation" },
+];
+export const SelectOpt = [
+  {
+    value: "guide",
+    label: "Guide",
+    children: [
+      {
+        value: "disciplines",
+        label: "Disciplines",
+        children: [
+          {
+            value: "consistency",
+            label: "Consistency",
+          },
+          {
+            value: "feedback",
+            label: "Feedback",
+          },
+          {
+            value: "efficiency",
+            label: "Efficiency",
+          },
+          {
+            value: "controllability",
+            label: "Controllability",
+          },
+        ],
+      },
+      {
+        value: "navigation",
+        label: "Navigation",
+        children: [
+          {
+            value: "side nav",
+            label: "Side Navigation",
+          },
+          {
+            value: "top nav",
+            label: "Top Navigation",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: "component",
+    label: "Component",
+    children: [
+      {
+        value: "basic",
+        label: "Basic",
+        children: [
+          {
+            value: "layout",
+            label: "Layout",
+          },
+          {
+            value: "color",
+            label: "Color",
+          },
+          {
+            value: "typography",
+            label: "Typography",
+          },
+          {
+            value: "icon",
+            label: "Icon",
+          },
+          {
+            value: "button",
+            label: "Button",
+          },
+        ],
+      },
+      {
+        value: "form",
+        label: "Form",
+        children: [
+          {
+            value: "radio",
+            label: "Radio",
+          },
+          {
+            value: "checkbox",
+            label: "Checkbox",
+          },
+          {
+            value: "input",
+            label: "Input",
+          },
+          {
+            value: "input-number",
+            label: "InputNumber",
+          },
+          {
+            value: "select",
+            label: "Select",
+          },
+          {
+            value: "cascader",
+            label: "Cascader",
+          },
+          {
+            value: "switch",
+            label: "Switch",
+          },
+          {
+            value: "slider",
+            label: "Slider",
+          },
+          {
+            value: "time-picker",
+            label: "TimePicker",
+          },
+          {
+            value: "date-picker",
+            label: "DatePicker",
+          },
+          {
+            value: "datetime-picker",
+            label: "DateTimePicker",
+          },
+          {
+            value: "upload",
+            label: "Upload",
+          },
+          {
+            value: "rate",
+            label: "Rate",
+          },
+          {
+            value: "form",
+            label: "Form",
+          },
+        ],
+      },
+      {
+        value: "data",
+        label: "Data",
+        children: [
+          {
+            value: "table",
+            label: "Table",
+          },
+          {
+            value: "tag",
+            label: "Tag",
+          },
+          {
+            value: "progress",
+            label: "Progress",
+          },
+          {
+            value: "tree",
+            label: "Tree",
+          },
+          {
+            value: "pagination",
+            label: "Pagination",
+          },
+          {
+            value: "badge",
+            label: "Badge",
+          },
+        ],
+      },
+      {
+        value: "notice",
+        label: "Notice",
+        children: [
+          {
+            value: "alert",
+            label: "Alert",
+          },
+          {
+            value: "loading",
+            label: "Loading",
+          },
+          {
+            value: "message",
+            label: "Message",
+          },
+          {
+            value: "message-box",
+            label: "MessageBox",
+          },
+          {
+            value: "notification",
+            label: "Notification",
+          },
+        ],
+      },
+      {
+        value: "navigation",
+        label: "Navigation",
+        children: [
+          {
+            value: "menu",
+            label: "Menu",
+          },
+          {
+            value: "tabs",
+            label: "Tabs",
+          },
+          {
+            value: "breadcrumb",
+            label: "Breadcrumb",
+          },
+          {
+            value: "dropdown",
+            label: "Dropdown",
+          },
+          {
+            value: "steps",
+            label: "Steps",
+          },
+        ],
+      },
+      {
+        value: "others",
+        label: "Others",
+        children: [
+          {
+            value: "dialog",
+            label: "Dialog",
+          },
+          {
+            value: "tooltip",
+            label: "Tooltip",
+          },
+          {
+            value: "popover",
+            label: "Popover",
+          },
+          {
+            value: "card",
+            label: "Card",
+          },
+          {
+            value: "carousel",
+            label: "Carousel",
+          },
+          {
+            value: "collapse",
+            label: "Collapse",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: "resource",
+    label: "Resource",
+    children: [
+      {
+        value: "axure",
+        label: "Axure Components",
+      },
+      {
+        value: "sketch",
+        label: "Sketch Templates",
+      },
+      {
+        value: "docs",
+        label: "Design Documentation",
+      },
+    ],
+  },
+];
+export const Options = [
+  {
+    value: "Option1",
+    label: "Option1",
+  },
+  {
+    value: "Option2",
+    label: "Option2",
+  },
+  {
+    value: "Option3",
+    label: "Option3",
+  },
+  {
+    value: "Option4",
+    label: "Option4",
+  },
+  {
+    value: "Option5",
+    label: "Option5",
+  },
+];

From b0f6194f0c9e3562d7471f9dee4e350ccacb947c Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 15 Dec 2021 17:39:56 +0800
Subject: [PATCH 3/6] feat: add axiosCancel

---
 src/router/index.ts         | 12 ++++++++++++
 src/shims-vue.d.ts          |  8 ++++++++
 src/views/dashboard/New.vue | 14 ++++++--------
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 71c22d0c..95a2080f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -43,4 +43,16 @@ const router = createRouter({
   routes,
 });
 
+(window as any).axiosCancel = [];
+
+router.beforeEach((to, from, next) => {
+  const token = window.localStorage.getItem("skywalking-authority");
+  if ((window as any).axiosCancel.length !== 0) {
+    for (const func of (window as any).axiosCancel) {
+      setTimeout(func(), 0);
+    }
+    (window as any).axiosCancel = [];
+  }
+  next();
+});
 export default router;
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 81a9eb4c..a65cf341 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -19,3 +19,11 @@ declare module "*.vue" {
   const Component: ReturnType<typeof defineComponent>;
   export default Component;
 }
+declare global {
+  namespace JSX {}
+  interface Window {
+    Promise: any;
+    moment: any;
+    axiosCancel: any;
+  }
+}
diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue
index 45d55f49..f104bb27 100644
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@@ -149,10 +149,10 @@ import {
   ElInput,
   ElButton,
 } from "element-plus";
-// import { useSelectorStore } from "@/store/modules/selectors";
+import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType, SelectOpt, Options } from "./data";
 
-// const selectorStore = useSelectorStore();
+const selectorStore = useSelectorStore();
 const props = {
   expandTrigger: "hover",
 };
@@ -173,24 +173,22 @@ const handleChange = (value: any) => {
 const onCreate = () => {
   console.log(state);
 };
-// selectorStore.fetchServices("general");
+selectorStore.fetchServices("general");
 </script>
 <style lang="scss" scoped>
 .new-dashboard {
-  width: 600px;
   margin: 0 auto;
 }
 .item {
   margin-top: 20px;
 }
-.selectors {
-  width: 600px;
-}
+.new-dashboard,
+.selectors,
 .el-cascader-menu {
   width: 600px;
 }
 .create {
-  width: 160px;
+  width: 600px;
 }
 .btn {
   margin-top: 40px;

From f4c1c81c095a4b316a8aa754d1f129e71a576428 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 15 Dec 2021 20:42:50 +0800
Subject: [PATCH 4/6] feat: add event stack

---
 src/store/modules/app.ts    |  31 ++++-
 src/views/dashboard/data.ts | 228 ------------------------------------
 2 files changed, 29 insertions(+), 230 deletions(-)

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index e3bc570e..64d7554c 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -26,6 +26,8 @@ interface AppState {
   utc: string;
   utcHour: number;
   utcMin: number;
+  eventStack: (() => unknown)[];
+  timer: ReturnType<typeof setInterval> | null;
 }
 
 export const appStore = defineStore({
@@ -35,6 +37,8 @@ export const appStore = defineStore({
     utc: "",
     utcHour: 0,
     utcMin: 0,
+    eventStack: [],
+    timer: null,
   }),
   getters: {
     duration(): Duration {
@@ -92,15 +96,38 @@ export const appStore = defineStore({
     },
   },
   actions: {
-    setDuration(data: Duration) {
+    setDuration(data: Duration): void {
       this.durationRow = data;
+      if ((window as any).axiosCancel.length !== 0) {
+        for (const event of (window as any).axiosCancel) {
+          setTimeout(event(), 0);
+        }
+        (window as any).axiosCancel = [];
+      }
+      this.runEventStack();
     },
-    setUTC(utcHour: number, utcMin: number) {
+    setUTC(utcHour: number, utcMin: number): void {
+      this.runEventStack();
       this.utcMin = utcMin;
       this.utcHour = utcHour;
       this.utc = `${utcHour}:${utcMin}`;
       localStorage.setItem("utc", this.utc);
     },
+    setEventStack(funcs: (() => void)[]): void {
+      this.eventStack = funcs;
+    },
+    runEventStack() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(
+        () =>
+          this.eventStack.forEach((event: any) => {
+            setTimeout(event(), 0);
+          }),
+        500
+      );
+    },
   },
 });
 export function useAppStoreWithOut(): any {
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 9e521e81..d13455c3 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -44,10 +44,6 @@ export const SelectOpt = [
             value: "efficiency",
             label: "Efficiency",
           },
-          {
-            value: "controllability",
-            label: "Controllability",
-          },
         ],
       },
       {
@@ -66,230 +62,6 @@ export const SelectOpt = [
       },
     ],
   },
-  {
-    value: "component",
-    label: "Component",
-    children: [
-      {
-        value: "basic",
-        label: "Basic",
-        children: [
-          {
-            value: "layout",
-            label: "Layout",
-          },
-          {
-            value: "color",
-            label: "Color",
-          },
-          {
-            value: "typography",
-            label: "Typography",
-          },
-          {
-            value: "icon",
-            label: "Icon",
-          },
-          {
-            value: "button",
-            label: "Button",
-          },
-        ],
-      },
-      {
-        value: "form",
-        label: "Form",
-        children: [
-          {
-            value: "radio",
-            label: "Radio",
-          },
-          {
-            value: "checkbox",
-            label: "Checkbox",
-          },
-          {
-            value: "input",
-            label: "Input",
-          },
-          {
-            value: "input-number",
-            label: "InputNumber",
-          },
-          {
-            value: "select",
-            label: "Select",
-          },
-          {
-            value: "cascader",
-            label: "Cascader",
-          },
-          {
-            value: "switch",
-            label: "Switch",
-          },
-          {
-            value: "slider",
-            label: "Slider",
-          },
-          {
-            value: "time-picker",
-            label: "TimePicker",
-          },
-          {
-            value: "date-picker",
-            label: "DatePicker",
-          },
-          {
-            value: "datetime-picker",
-            label: "DateTimePicker",
-          },
-          {
-            value: "upload",
-            label: "Upload",
-          },
-          {
-            value: "rate",
-            label: "Rate",
-          },
-          {
-            value: "form",
-            label: "Form",
-          },
-        ],
-      },
-      {
-        value: "data",
-        label: "Data",
-        children: [
-          {
-            value: "table",
-            label: "Table",
-          },
-          {
-            value: "tag",
-            label: "Tag",
-          },
-          {
-            value: "progress",
-            label: "Progress",
-          },
-          {
-            value: "tree",
-            label: "Tree",
-          },
-          {
-            value: "pagination",
-            label: "Pagination",
-          },
-          {
-            value: "badge",
-            label: "Badge",
-          },
-        ],
-      },
-      {
-        value: "notice",
-        label: "Notice",
-        children: [
-          {
-            value: "alert",
-            label: "Alert",
-          },
-          {
-            value: "loading",
-            label: "Loading",
-          },
-          {
-            value: "message",
-            label: "Message",
-          },
-          {
-            value: "message-box",
-            label: "MessageBox",
-          },
-          {
-            value: "notification",
-            label: "Notification",
-          },
-        ],
-      },
-      {
-        value: "navigation",
-        label: "Navigation",
-        children: [
-          {
-            value: "menu",
-            label: "Menu",
-          },
-          {
-            value: "tabs",
-            label: "Tabs",
-          },
-          {
-            value: "breadcrumb",
-            label: "Breadcrumb",
-          },
-          {
-            value: "dropdown",
-            label: "Dropdown",
-          },
-          {
-            value: "steps",
-            label: "Steps",
-          },
-        ],
-      },
-      {
-        value: "others",
-        label: "Others",
-        children: [
-          {
-            value: "dialog",
-            label: "Dialog",
-          },
-          {
-            value: "tooltip",
-            label: "Tooltip",
-          },
-          {
-            value: "popover",
-            label: "Popover",
-          },
-          {
-            value: "card",
-            label: "Card",
-          },
-          {
-            value: "carousel",
-            label: "Carousel",
-          },
-          {
-            value: "collapse",
-            label: "Collapse",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: "resource",
-    label: "Resource",
-    children: [
-      {
-        value: "axure",
-        label: "Axure Components",
-      },
-      {
-        value: "sketch",
-        label: "Sketch Templates",
-      },
-      {
-        value: "docs",
-        label: "Design Documentation",
-      },
-    ],
-  },
 ];
 export const Options = [
   {

From 54f80fddb3df4effa7fa75e78a98cf0a9c4bba93 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 16 Dec 2021 11:26:34 +0800
Subject: [PATCH 5/6] feat: add router for dashboard

---
 src/locales/lang/en.ts       |  1 +
 src/locales/lang/zh.ts       |  1 +
 src/router/dashboard.ts      | 30 ++++++++++++++++++++++++++++++
 src/router/index.ts          |  2 +-
 src/views/dashboard/Edit.vue |  1 +
 src/views/dashboard/New.vue  | 27 ++++++++++++++++++++-------
 src/views/dashboard/data.ts  | 14 +++++++-------
 7 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 src/views/dashboard/Edit.vue

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 13238cce..089d589d 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -44,6 +44,7 @@ const msg = {
   databasePanel: "Database Panel",
   meshServicePanel: "Service Panel",
   newDashboard: "New a dashboard",
+  dashboardEdit: "Edit the dashboard",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 3c829f83..d3a8eea7 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -44,6 +44,7 @@ const msg = {
   databasePanel: "数据库面板",
   meshServicePanel: "服务面板",
   newDashboard: "新增仪表盘",
+  dashboardEdit: "编辑仪表盘",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts
index 90829095..520fc710 100644
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -47,6 +47,36 @@ export const routesDashboard: Array<RouteRecordRaw> = [
           exact: false,
         },
       },
+      {
+        path: "/dashboard/edit/service/:serviceId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "serviceEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/edit/endpoint/:serviceId/:endpointId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "endpointEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/edit/instance/:serviceId/:instanceId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "instanceEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
     ],
   },
 ];
diff --git a/src/router/index.ts b/src/router/index.ts
index 95a2080f..13b8ace9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -46,7 +46,7 @@ const router = createRouter({
 (window as any).axiosCancel = [];
 
 router.beforeEach((to, from, next) => {
-  const token = window.localStorage.getItem("skywalking-authority");
+  // const token = window.localStorage.getItem("skywalking-authority");
   if ((window as any).axiosCancel.length !== 0) {
     for (const func of (window as any).axiosCancel) {
       setTimeout(func(), 0);
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
new file mode 100644
index 00000000..6ecc4bd9
--- /dev/null
+++ b/src/views/dashboard/Edit.vue
@@ -0,0 +1 @@
+<template>dashboard edit</template>
diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue
index f104bb27..8181114a 100644
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@@ -57,7 +57,7 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item" v-show="state.entity === 'Service'">
+    <div class="item" v-show="state.entity === EntityType[0].value">
       <div class="label">Service</div>
       <el-select
         size="small"
@@ -74,7 +74,7 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item" v-show="state.entity === 'Endpoint'">
+    <div class="item" v-show="state.entity === EntityType[2].value">
       <div class="label">Service / Endpoint</div>
       <el-cascader
         v-model="state.serviceEndpoint"
@@ -85,7 +85,7 @@ limitations under the License. -->
         :style="{ width: '600px' }"
       ></el-cascader>
     </div>
-    <div class="item" v-show="state.entity === 'ServiceInstance'">
+    <div class="item" v-show="state.entity === EntityType[3].value">
       <div class="label">Service / Instance</div>
       <el-cascader
         v-model="state.serviceInstance"
@@ -96,7 +96,7 @@ limitations under the License. -->
         :style="{ width: '600px' }"
       ></el-cascader>
     </div>
-    <div class="item" v-show="state.entity === 'ServiceRelation'">
+    <div class="item" v-show="state.entity === EntityType[4].value">
       <div class="label">Destination Service</div>
       <el-select
         size="small"
@@ -113,7 +113,7 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item" v-show="state.entity === 'EndpointRelation'">
+    <div class="item" v-show="state.entity === EntityType[5].value">
       <span class="label">Destination Service / Endpoint</span>
       <el-cascader
         v-model="state.destServiceEndpoint"
@@ -123,7 +123,7 @@ limitations under the License. -->
         :style="{ width: '600px' }"
       ></el-cascader>
     </div>
-    <div class="item" v-show="state.entity === 'ServiceInstanceRelation'">
+    <div class="item" v-show="state.entity === EntityType[6].value">
       <span class="label">Destination Service / Instance</span>
       <el-cascader
         v-model="state.destServiceInstance"
@@ -142,6 +142,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
+import router from "@/router";
 import {
   ElSelect,
   ElOption,
@@ -171,7 +172,19 @@ const handleChange = (value: any) => {
   console.log(value);
 };
 const onCreate = () => {
-  console.log(state);
+  let path = `/dashboard/edit/${state.entity}/`;
+  switch (state.entity) {
+    case EntityType[0].value:
+      path += state.service;
+      break;
+    case EntityType[2].value:
+      path += `${state.service}/${state.serviceEndpoint}`;
+      break;
+    case EntityType[3].value:
+      path += `${state.service}/${state.serviceInstance}`;
+      break;
+  }
+  router.push(path);
 };
 selectorStore.fetchServices("general");
 </script>
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index d13455c3..dbe83cc9 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 export const EntityType = [
-  { value: "Service", label: "Service" },
-  { value: "All", label: "All" },
-  { value: "Endpoint", label: "Service Endpoint" },
-  { value: "ServiceInstance", label: "Service Instance" },
-  { value: "ServiceRelation", label: "Service Relation" },
-  { value: "ServiceInstanceRelation", label: "Service Instance Relation" },
-  { value: "EndpointRelation", label: "Endpoint Relation" },
+  { value: "service", label: "Service" },
+  { value: "all", label: "All" },
+  { value: "endpoint", label: "Service Endpoint" },
+  { value: "serviceInstance", label: "Service Instance" },
+  { value: "serviceRelation", label: "Service Relation" },
+  { value: "serviceInstanceRelation", label: "Service Instance Relation" },
+  { value: "endpointRelation", label: "Endpoint Relation" },
 ];
 export const SelectOpt = [
   {

From 857bf371691ee6e8ce36713d07ff7e669d72b739 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 16 Dec 2021 11:34:37 +0800
Subject: [PATCH 6/6] fix: header

---
 src/views/dashboard/Edit.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 6ecc4bd9..a4c4b8ac 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -1 +1,15 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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>dashboard edit</template>