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 54f80fddb3df4effa7fa75e78a98cf0a9c4bba93 Author: Qiuxia Fan <[email protected]> AuthorDate: Thu Dec 16 11:26:34 2021 +0800 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(-) diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 13238cc..089d589 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 3c829f8..d3a8eea 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 9082909..520fc71 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 95a2080..13b8ace 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 0000000..6ecc4bd --- /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 f104bb2..8181114 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 d13455c..dbe83cc 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 = [ {
