From 5bb6ca625b279ae7b8c2f33fe9d913ae0329142d Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Thu, 16 Dec 2021 15:36:18 +0800 Subject: [PATCH 01/35] feat: use i18n --- src/locales/lang/en.ts | 16 +++++++++------- src/locales/lang/zh.ts | 10 ++++++---- src/views/dashboard/List.vue | 6 +++--- src/views/dashboard/New.vue | 28 +++++++++++++++++----------- 4 files changed, 35 insertions(+), 25 deletions(-) diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 089d589d..ca98a81a 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -17,6 +17,7 @@ const msg = { generalService: "General Service", services: "Services", + service: "Service", traces: "Traces", metrics: "Metrics", serviceMesh: "Service Mesh", @@ -43,8 +44,14 @@ const msg = { eventList: "Event List", databasePanel: "Database Panel", meshServicePanel: "Service Panel", - newDashboard: "New a dashboard", + newDashboard: "Create a new dashboard", dashboardEdit: "Edit the dashboard", + edit: "Edit", + delete: "Delete", + layer: "Layer", + endpoint: "Endpoint", + instance: "Instance", + create: "Create", hourTip: "Select Hour", minuteTip: "Select Minute", secondTip: "Select Second", @@ -71,9 +78,6 @@ const msg = { reload: "Reload", usermode: "User Mode", editmode: "Edit Mode", - currentService: "Current Service", - currentEndpoint: "Current Endpoint", - currentInstance: "Current Instance", currentVersion: "Current Version", currentPage: "Current Page", version: "Version", @@ -109,8 +113,6 @@ const msg = { all: "All", success: "Success", error: "Error", - service: "Service", - instance: "Instance", endpoints: "Endpoints", cache: "Cache", global: "Global", @@ -190,7 +192,6 @@ const msg = { noneParentService: "No Parent Service", serviceGroup: "Service Group", endpointFilter: "Endpoint Filter", - editConfig: "Edit Config", databaseView: "Database", browserView: "Browser", metricsView: "NOC - Network Operation Center", @@ -257,6 +258,7 @@ const msg = { scope: "Scope", destService: "Destination Service", destServiceInstance: "Destination Service Instance", + destEndpoint: "Destination Endpoint", eventSource: "Event Source", modalTitle: "Inspection", selectRedirectPage: "Do you want to inspect Traces or Logs of %s service?", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index d3a8eea7..12e6b7f4 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -45,6 +45,11 @@ const msg = { meshServicePanel: "服务面板", newDashboard: "新增仪表盘", dashboardEdit: "编辑仪表盘", + edit: "编辑", + delete: "删除", + layer: "层", + endpoint: "端点", + create: "新建", hourTip: "选择小时", minuteTip: "选择分钟", secondTip: "选择秒数", @@ -70,9 +75,6 @@ const msg = { reload: "刷新", usermode: "用户模式", editmode: "编辑模式", - currentService: "当前服务", - currentEndpoint: "当前端点", - currentInstance: "当前实例", currentVersion: "当前版本", currentPage: "当前页面", version: "版本", @@ -190,7 +192,6 @@ const msg = { noneParentService: "不设置父服务", serviceGroup: "服务组", endpointFilter: "端点过滤器", - editConfig: "编辑", databaseView: "数据库视图", browserView: "浏览器视图", metricsView: "大屏视图", @@ -255,6 +256,7 @@ const msg = { scope: "范围", destService: "终点服务", destServiceInstance: "终点实例", + destEndpoint: "终点端点", eventSource: "事件资源", modalTitle: "查看", selectRedirectPage: "查看 %s 服务的追踪或日志？", diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index ef53affe..6f936fb7 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -40,17 +40,17 @@ limitations under the License. --> diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 8181114a..0cb46eb7 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. --> + diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 0cb46eb7..7b13573d 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -181,7 +181,7 @@ const onCreate = () => { let path = `/dashboard/edit/${state.entity}/`; switch (state.entity) { case EntityType[0].value: - path += state.service; + path += state.service || 1; break; case EntityType[2].value: path += `${state.service}/${state.serviceEndpoint}`; From 2aa82044344f76b8743613be1a917603441e9037 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Mon, 20 Dec 2021 13:59:12 +0800 Subject: [PATCH 03/35] feat: add dashboard layout --- src/views/dashboard/Edit.vue | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index fdf2a852..b19de603 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -18,7 +18,14 @@ limitations under the License. --> Discard Apply -
+
+
+
item
+
item
+
item
+
+
config
+
diff --git a/tsconfig.json b/tsconfig.json index b15fea51..3587ae2e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,6 +34,7 @@ "webpack-env", "jest" ], + "typeRoots": ["./node_modules/@types/", "./types"], "paths": { "@/*": [ "src/*" From 8a858dfe00d72bb3854f99672bd836228f3bc31e Mon Sep 17 00:00:00 2001 From: heyanlong Date: Tue, 21 Dec 2021 10:06:19 +0800 Subject: [PATCH 05/35] Fix bugs: active side bar --- src/layout/components/SideBar.vue | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue index 43fb6ce7..f6e57ccf 100644 --- a/src/layout/components/SideBar.vue +++ b/src/layout/components/SideBar.vue @@ -24,14 +24,14 @@ limitations under the License. --> active-text-color="#448dfe" background-color="#252a2f" class="el-menu-vertical" - default-active="0" + :default-active="name" text-color="#efefef" :unique-opened="true" :collapse="isCollapse" :style="{ border: 'none' }" > @@ -35,29 +33,20 @@ import GridLayout from "./widget/GridLayout.vue"; text-align: right; padding: 5px 10px; background: rgb(240, 242, 245); - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #dfe4e8; } .ds-main { - background: #f7f9fa; - // background: #eee; -} - -.ds-layout { - // background: rgb(240, 242, 245); - // background-color: #fafbfc; - height: 890px; - flex-grow: 2; - overflow: auto; - // padding: 0 5px; + height: calc(100% - 40px); } .ds-config { width: 360px; margin: 5px 0; background-color: #fff; - box-shadow: 5px 5px 5px #fff; + box-shadow: 2px 0 2px 0 #ccc; text-align: center; + border-left: 1px solid #eee; } .panel { diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 7b13573d..342d25c7 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. --> diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index d15b4774..ad175775 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/src/views/dashboard/panel/Layout.vue @@ -16,12 +16,9 @@ limitations under the License. --> ") - no-repeat; - background-position: bottom right; - padding: 0 8px 8px 0; - background-repeat: no-repeat; - background-origin: content-box; - box-sizing: border-box; - cursor: pointer; -} diff --git a/src/views/dashboard/panel/Widget.vue b/src/views/dashboard/panel/Widget.vue index 01e4e67b..f1fe184a 100644 --- a/src/views/dashboard/panel/Widget.vue +++ b/src/views/dashboard/panel/Widget.vue @@ -17,7 +17,12 @@ limitations under the License. -->
title
- +
@@ -37,6 +42,9 @@ const dashboardStore = useDashboardStore(); function removeWidget() { dashboardStore.removeWidget(props.item); } +function setConfig() { + dashboardStore.setConfigPanel(true); +} diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index dbe83cc9..8775cfc9 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -25,40 +25,30 @@ export const EntityType = [ ]; export const SelectOpt = [ { - value: "guide", - label: "Guide", + value: "service1", + label: "Service1", children: [ { - value: "disciplines", - label: "Disciplines", - children: [ - { - value: "consistency", - label: "Consistency", - }, - { - value: "feedback", - label: "Feedback", - }, - { - value: "efficiency", - label: "Efficiency", - }, - ], + value: "instance1", + label: "Instance1", }, { - value: "navigation", - label: "Navigation", - children: [ - { - value: "side nav", - label: "Side Navigation", - }, - { - value: "top nav", - label: "Top Navigation", - }, - ], + value: "instance2", + label: "Instance2", + }, + ], + }, + { + value: "service2", + label: "Service2", + children: [ + { + value: "instance1", + label: "Instance1", + }, + { + value: "instance2", + label: "Instance2", }, ], }, diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index ad175775..b1741ad5 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/src/views/dashboard/panel/Layout.vue @@ -47,7 +47,6 @@ function layoutUpdatedEvent(newLayout: GridItemData) { diff --git a/src/components/index.ts b/src/components/index.ts index 39ad3e8c..a2214c47 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -16,25 +16,18 @@ */ import Icon from "./Icon.vue"; import TimePicker from "./TimePicker.vue"; -import type { App, Plugin } from "vue"; +import Selector from "./Selector.vue"; +import type { App } from "vue"; import VueGridLayout from "vue-grid-layout"; const components: { [key: string]: any } = { Icon, TimePicker, VueGridLayout, + Selector, }; const componentsName: string[] = Object.keys(components); -const withInstall = (component: T, alias?: string) => { - const comp = component as any; - comp.install = (app: App) => { - app.component(comp.name || comp.displayName, component); - if (alias) { - app.config.globalProperties[alias] = component; - } - }; - return component as T & Plugin; -}; + export default { install: (vue: App): void => { vue.use(components["VueGridLayout"]); diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index 0d4ae911..12c1ed5c 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -14,31 +14,49 @@ See the License for the specific language governing permissions and limitations under the License. --> diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 565ff9e7..2598faf0 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -25,37 +25,21 @@ limitations under the License. -->
{{ t("layer") }}
- - - - + @change="changeLayer" + />
{{ t("entityType") }}
- - - - + @change="changeEntity" + />
@@ -68,7 +52,7 @@ limitations under the License. --> import { reactive } from "vue"; import { useI18n } from "vue-i18n"; import router from "@/router"; -import { ElSelect, ElOption, ElInput, ElButton } from "element-plus"; +import { ElInput, ElButton } from "element-plus"; import { useSelectorStore } from "@/store/modules/selectors"; import { EntityType, Options } from "./data"; import uuid from "@/utils/uuid"; @@ -86,6 +70,12 @@ const onCreate = () => { router.push(path); }; selectorStore.fetchServices("general"); +function changeLayer(val: { label: string; value: string }) { + state.layer = val.value; +} +function changeEntity(val: { label: string; value: string }) { + state.entity = val.value; +}