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] 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>