This is an automated email from the ASF dual-hosted git repository. qiuxiafan pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
commit 9cb8e2b64d9b6ccb3e5a875a119437a823f9e02a Author: Qiuxia Fan <[email protected]> AuthorDate: Wed Dec 15 15:43:38 2021 +0800 feat: add selector module --- src/App.vue | 1 - src/components/TimePicker.vue | 2 +- src/graph/fragments/{global.ts => app.ts} | 0 src/graph/fragments/{global.ts => selector.ts} | 18 +-- src/graph/index.ts | 5 +- src/graph/query/{global.ts => app.ts} | 2 +- .../{fragments/global.ts => query/selector.ts} | 14 +-- 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, 200 insertions(+), 32 deletions(-) diff --git a/src/App.vue b/src/App.vue index 823d6ce..74859ff 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 17625d9..2e27195 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% copy from src/graph/fragments/global.ts copy to src/graph/fragments/app.ts diff --git a/src/graph/fragments/global.ts b/src/graph/fragments/selector.ts similarity index 78% copy from src/graph/fragments/global.ts copy to src/graph/fragments/selector.ts index 120b270..a938ee2 100644 --- a/src/graph/fragments/global.ts +++ b/src/graph/fragments/selector.ts @@ -14,15 +14,19 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export const OAPTimeInfo = { +export const Services = { + variable: ["$layer: String!"], query: ` - getTimeInfo { - timezone - currentTimestamp + services: listServices(layer: $layer) { + value: id + label: name + group + layer } `, }; - -export const OAPVersion = { - query: `version { version }`, +export const Layers = { + query: ` + layers: listLayers + `, }; diff --git a/src/graph/index.ts b/src/graph/index.ts index 70cc543..cbdcb06 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 a475283..d538c41 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/fragments/global.ts b/src/graph/query/selector.ts similarity index 79% rename from src/graph/fragments/global.ts rename to src/graph/query/selector.ts index 120b270..83d9229 100644 --- a/src/graph/fragments/global.ts +++ b/src/graph/query/selector.ts @@ -14,15 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export const OAPTimeInfo = { - query: ` - getTimeInfo { - timezone - currentTimestamp - } - `, -}; +import { Services, Layers } from "../fragments/selector"; -export const OAPVersion = { - query: `version { version }`, -}; +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 05fe3fc..13238cc 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 6e5912f..3c829f8 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 0000000..6e91966 --- /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 ba25a89..c438434 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 f5e65de..44da32e 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 e7614d4..ef53aff 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 01ccb74..141042b 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>
