diff --git a/package-lock.json b/package-lock.json index c908f59a..217941fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "lodash": "^4.17.21", "monaco-editor": "^0.27.0", "pinia": "^2.0.5", + "vis-timeline": "^7.5.1", "vue": "^3.0.0", "vue-grid-layout": "^3.0.0-beta1", "vue-i18n": "^9.1.9", @@ -1813,6 +1814,18 @@ "ms": "^2.1.1" } }, + "node_modules/@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "peer": true, + "dependencies": { + "@types/hammerjs": "^2.0.36" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/@element-plus/icons-vue": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz", @@ -3302,6 +3315,12 @@ "@types/node": "*" } }, + "node_modules/@types/hammerjs": { + "version": "2.0.41", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz", + "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==", + "peer": true + }, "node_modules/@types/http-proxy": { "version": "1.17.8", "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz", @@ -7884,8 +7903,7 @@ "node_modules/component-emitter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", - "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", - "dev": true + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" }, "node_modules/compressible": { "version": "2.0.18", @@ -8697,6 +8715,12 @@ "node": ">=4" } }, + "node_modules/cssfilter": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz", + "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==", + "peer": true + }, "node_modules/cssnano": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz", @@ -16440,6 +16464,12 @@ "node": ">=0.6.0" } }, + "node_modules/keycharm": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz", + "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==", + "peer": true + }, "node_modules/killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -18231,7 +18261,6 @@ "version": "2.24.0", "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==", - "dev": true, "engines": { "node": "*" } @@ -21732,6 +21761,15 @@ "node": ">= 6" } }, + "node_modules/propagating-hammerjs": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz", + "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==", + "peer": true, + "peerDependencies": { + "@egjs/hammerjs": "^2.0.17" + } + }, "node_modules/proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -26871,7 +26909,6 @@ "version": "8.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true, "bin": { "uuid": "dist/bin/uuid" } @@ -26931,6 +26968,59 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "node_modules/vis-data": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz", + "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==", + "hasInstallScript": true, + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/visjs" + }, + "peerDependencies": { + "uuid": "^7.0.0 || ^8.0.0", + "vis-util": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/vis-timeline": { + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz", + "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/visjs" + }, + "peerDependencies": { + "@egjs/hammerjs": "^2.0.0", + "component-emitter": "^1.3.0", + "keycharm": "^0.3.0 || ^0.4.0", + "moment": "^2.24.0", + "propagating-hammerjs": "^1.4.0 || ^2.0.0", + "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0", + "vis-data": "^6.3.0 || ^7.0.0", + "vis-util": "^3.0.0 || ^4.0.0 || ^5.0.0", + "xss": "^1.0.0" + } + }, + "node_modules/vis-util": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz", + "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==", + "peer": true, + "engines": { + "node": ">=8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/visjs" + }, + "peerDependencies": { + "@egjs/hammerjs": "^2.0.0", + "component-emitter": "^1.3.0" + } + }, "node_modules/vm-browserify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", @@ -28779,6 +28869,28 @@ "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "dev": true }, + "node_modules/xss": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz", + "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==", + "peer": true, + "dependencies": { + "commander": "^2.20.3", + "cssfilter": "0.0.10" + }, + "bin": { + "xss": "bin/xss" + }, + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/xss/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "peer": true + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -30233,6 +30345,15 @@ } } }, + "@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "peer": true, + "requires": { + "@types/hammerjs": "^2.0.36" + } + }, "@element-plus/icons-vue": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz", @@ -31496,6 +31617,12 @@ "@types/node": "*" } }, + "@types/hammerjs": { + "version": "2.0.41", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz", + "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==", + "peer": true + }, "@types/http-proxy": { "version": "1.17.8", "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz", @@ -35187,8 +35314,7 @@ "component-emitter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", - "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", - "dev": true + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" }, "compressible": { "version": "2.0.18", @@ -35829,6 +35955,12 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "cssfilter": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz", + "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==", + "peer": true + }, "cssnano": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz", @@ -41916,6 +42048,12 @@ "verror": "1.10.0" } }, + "keycharm": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz", + "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==", + "peer": true + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -43302,8 +43440,7 @@ "moment": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", - "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==", - "dev": true + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" }, "monaco-editor": { "version": "0.27.0", @@ -45995,6 +46132,13 @@ "sisteransi": "^1.0.5" } }, + "propagating-hammerjs": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz", + "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==", + "peer": true, + "requires": {} + }, "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -50096,8 +50240,7 @@ "uuid": { "version": "8.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, "v8-compile-cache": { "version": "2.3.0", @@ -50146,6 +50289,26 @@ } } }, + "vis-data": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz", + "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==", + "peer": true, + "requires": {} + }, + "vis-timeline": { + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz", + "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==", + "requires": {} + }, + "vis-util": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz", + "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==", + "peer": true, + "requires": {} + }, "vm-browserify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", @@ -51657,6 +51820,24 @@ "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "dev": true }, + "xss": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.13.tgz", + "integrity": "sha512-clu7dxTm1e8Mo5fz3n/oW3UCXBfV89xZ72jM8yzo1vR/pIS0w3sgB3XV2H8Vm6zfGnHL0FzvLJPJEBhd86/z4Q==", + "peer": true, + "requires": { + "commander": "^2.20.3", + "cssfilter": "0.0.10" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "peer": true + } + } + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/package.json b/package.json index e1f48cc3..040092aa 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lodash": "^4.17.21", "monaco-editor": "^0.27.0", "pinia": "^2.0.5", + "vis-timeline": "^7.5.1", "vue": "^3.0.0", "vue-grid-layout": "^3.0.0-beta1", "vue-i18n": "^9.1.9", diff --git a/src/assets/icons/add_fill.svg b/src/assets/icons/add_fill.svg new file mode 100644 index 00000000..5285acaa --- /dev/null +++ b/src/assets/icons/add_fill.svg @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/src/assets/icons/event.svg b/src/assets/icons/event.svg new file mode 100644 index 00000000..93bf25ec --- /dev/null +++ b/src/assets/icons/event.svg @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/src/router/event.ts b/src/router/event.ts deleted file mode 100644 index 6dd2424f..00000000 --- a/src/router/event.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * 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 { RouteRecordRaw } from "vue-router"; -import Layout from "@/layout/Index.vue"; - -export const routesEvent: Array = [ - { - path: "", - name: "Events", - meta: { - title: "events", - icon: "av_timer", - hasGroup: false, - exact: true, - }, - component: Layout, - children: [ - { - path: "/events", - name: "Events", - meta: { - exact: false, - }, - component: () => - import(/* webpackChunkName: "events" */ "@/views/Event.vue"), - }, - ], - }, -]; diff --git a/src/router/index.ts b/src/router/index.ts index da15693d..b4a57531 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -20,7 +20,6 @@ import { routesMesh } from "./serviceMesh"; import { routesDatabase } from "./database"; import { routesInfra } from "./infrastructure"; import { routesDashboard } from "./dashboard"; -import { routesEvent } from "./event"; import { routesSetting } from "./setting"; import { routesAlarm } from "./alarm"; import { routesSelf } from "./selfObservability"; @@ -39,7 +38,6 @@ const routes: Array = [ ...routesSelf, ...routesDashboard, ...routesAlarm, - ...routesEvent, ...routesSetting, ]; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 596ac8b6..d324b4c8 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -110,13 +110,7 @@ export const dashboardStore = defineStore({ : 3, }; } - if ( - type === "Trace" || - type === "Profile" || - type === "Log" || - type === "Ebpf" || - type === "DemandLog" - ) { + if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) { newItem.h = 36; } if (type === "Text") { @@ -171,13 +165,7 @@ export const dashboardStore = defineStore({ showDepth: true, }; } - if ( - type === "Trace" || - type === "Profile" || - type === "Log" || - type === "DemandLog" || - type === "Ebpf" - ) { + if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) { newItem.h = 32; } if (type === "Text") { diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts index 01b6788a..fed1fa74 100644 --- a/src/store/modules/event.ts +++ b/src/store/modules/event.ts @@ -19,16 +19,16 @@ import { store } from "@/store"; import graphql from "@/graphql"; import { AxiosResponse } from "axios"; import { Event, QueryEventCondition } from "@/types/events"; -import { Instance, Endpoint, Service } from "@/types/selector"; +import { Instance, Endpoint } from "@/types/selector"; import { useAppStoreWithOut } from "@/store/modules/app"; +import { useSelectorStore } from "@/store/modules/selectors"; interface eventState { loading: boolean; events: Event[]; - services: Service[]; instances: Instance[]; endpoints: Endpoint[]; - condition: QueryEventCondition | any; + condition: Nullable; } export const eventStore = defineStore({ @@ -36,32 +36,18 @@ export const eventStore = defineStore({ state: (): eventState => ({ loading: false, events: [], - services: [{ value: "", label: "All" }], instances: [{ value: "", label: "All" }], endpoints: [{ value: "", label: "All" }], - condition: { - paging: { pageNum: 1, pageSize: 15 }, - }, + condition: null, }), actions: { - setEventCondition(data: any) { - this.condition = { ...this.condition, ...data }; + setEventCondition(data: QueryEventCondition) { + this.condition = data; }, - async getServices(layer: string) { - if (!layer) { - this.services = [{ value: "", label: "All" }]; - return new Promise((resolve) => resolve([])); - } - const res: AxiosResponse = await graphql.query("queryServices").params({ - layer, - }); - if (res.data.errors) { - return res.data; - } - this.services = res.data.data.services; - return res.data; - }, - async getInstances(serviceId: string) { + async getInstances() { + const serviceId = useSelectorStore().currentService + ? useSelectorStore().currentService.id + : ""; const res: AxiosResponse = await graphql.query("queryInstances").params({ serviceId, duration: useAppStoreWithOut().durationTime, @@ -75,7 +61,13 @@ export const eventStore = defineStore({ ]; return res.data; }, - async getEndpoints(serviceId: string) { + async getEndpoints() { + const serviceId = useSelectorStore().currentService + ? useSelectorStore().currentService.id + : ""; + if (!serviceId) { + return; + } const res: AxiosResponse = await graphql.query("queryEndpoints").params({ serviceId, duration: useAppStoreWithOut().durationTime, diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 9a95d713..5d732b30 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -154,3 +154,38 @@ pre { .switch { margin: 0 5px; } + +div.vis-tooltip { + max-width: 600px; + overflow: hidden; + background-color: #fff !important; + white-space: normal !important; + font-size: 12px !important; +} + +.vis-item { + cursor: pointer; + height: 17px; +} + +.vis-item.Error { + background-color: #e66; + opacity: 0.8; + border-color: #e66; + color: #fff !important; +} + +.vis-item.Normal { + background-color: #fac858; + border-color: #fac858; + color: #666 !important; +} + +.vis-item .vis-item-content { + padding: 0 5px !important; +} + +.vis-item.vis-selected.Error, +.vis-item.vis-selected.Normal { + color: #1a1a1a !important; +} diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue new file mode 100644 index 00000000..e510a138 --- /dev/null +++ b/src/views/dashboard/controls/Event.vue @@ -0,0 +1,102 @@ + + + + diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 2efe3419..8c353993 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -37,13 +37,6 @@ limitations under the License. --> v-if="dashboardStore.editMode && canEditTabName" /> - - - - - - - @@ -51,6 +44,13 @@ limitations under the License. --> + + + + + + +
@@ -117,6 +117,7 @@ import Profile from "./Profile.vue"; import Log from "./Log.vue"; import Text from "./Text.vue"; import Ebpf from "./Ebpf.vue"; +import Event from "./Event.vue"; import { dragIgnoreFrom } from "../data"; import DemandLog from "./DemandLog.vue"; import copy from "@/utils/copy"; @@ -130,7 +131,17 @@ const props = { }; export default defineComponent({ name: "Tab", - components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog }, + components: { + Topology, + Widget, + Trace, + Profile, + Log, + Text, + Ebpf, + DemandLog, + Event, + }, props, setup(props) { const { t } = useI18n(); @@ -199,6 +210,7 @@ export default defineComponent({ editTabIndex.value = index; } function handleClick(el: any) { + needQuery.value = true; if (["tab-name", "edit-tab"].includes(el.target.className)) { return; } diff --git a/src/views/dashboard/controls/index.ts b/src/views/dashboard/controls/index.ts index 858bc5c5..8130b98c 100644 --- a/src/views/dashboard/controls/index.ts +++ b/src/views/dashboard/controls/index.ts @@ -23,6 +23,7 @@ import Log from "./Log.vue"; import Text from "./Text.vue"; import Ebpf from "./Ebpf.vue"; import DemandLog from "./DemandLog.vue"; +import Event from "./Event.vue"; export default { Tab, @@ -34,4 +35,5 @@ export default { Text, Ebpf, DemandLog, + Event, }; diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index b19f65e7..2c81d603 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -15,7 +15,7 @@ * limitations under the License. */ export const dragIgnoreFrom = - "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules"; + "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline"; export const PodsChartTypes = ["EndpointList", "InstanceList"]; @@ -178,15 +178,16 @@ export const AllTools = [ { name: "assignment", content: "Add Log", id: "addLog" }, ]; export const ServiceTools = [ - { name: "playlist_add", content: "Widget", id: "addWidget" }, - { name: "all_inbox", content: "Tab", id: "addTab" }, - { name: "library_books", content: "Text", id: "addText" }, - { name: "device_hub", content: "Topology", id: "addTopology" }, - { name: "merge", content: "Trace", id: "addTrace" }, - { name: "timeline", content: "Trace Profiling", id: "addProfile" }, - { name: "insert_chart", content: "eBPF Profiling", id: "addEbpf" }, - { name: "assignment", content: "Log", id: "addLog" }, + { name: "playlist_add", content: "Add Widget", id: "addWidget" }, + { name: "all_inbox", content: "Add Tab", id: "addTab" }, + { name: "library_books", content: "Add Text", id: "addText" }, + { name: "device_hub", content: "Add Topology", id: "addTopology" }, + { name: "merge", content: "Add Trace", id: "addTrace" }, + { name: "timeline", content: "Add Trace Profiling", id: "addProfile" }, + { name: "insert_chart", content: "Add eBPF Profiling", id: "addEbpf" }, + { name: "assignment", content: "Add Log", id: "addLog" }, { name: "demand", content: "Add On Demand Log", id: "addDemandLog" }, + { name: "event", content: "Add Event", id: "addEvent" }, ]; export const InstanceTools = [ { name: "playlist_add", content: "Add Widget", id: "addWidget" }, @@ -195,6 +196,7 @@ export const InstanceTools = [ { name: "merge", content: "Add Trace", id: "addTrace" }, { name: "assignment", content: "Add Log", id: "addLog" }, { name: "demand", content: "Add On Demand Log", id: "addDemandLog" }, + { name: "event", content: "Add Event", id: "addEvent" }, ]; export const EndpointTools = [ { name: "playlist_add", content: "Add Widget", id: "addWidget" }, @@ -203,6 +205,7 @@ export const EndpointTools = [ { name: "device_hub", content: "Add Topology", id: "addTopology" }, { name: "merge", content: "Add Trace", id: "addTrace" }, { name: "assignment", content: "Add Log", id: "addLog" }, + { name: "event", content: "Add Event", id: "addEvent" }, ]; export const ServiceRelationTools = [ { name: "playlist_add", content: "Add Widget", id: "addWidget" }, diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index 31ea55b5..b240b93d 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -458,6 +458,9 @@ function setTabControls(id: string) { case "addDemandLog": dashboardStore.addTabControls("DemandLog"); break; + case "addEvent": + dashboardStore.addTabControls("Event"); + break; default: ElMessage.info("Don't support this control"); break; @@ -493,6 +496,9 @@ function setControls(id: string) { case "addDemandLog": dashboardStore.addControl("DemandLog"); break; + case "addEvent": + dashboardStore.addControl("Event"); + break; default: dashboardStore.addControl("Widget"); } diff --git a/src/views/dashboard/related/event/Content.vue b/src/views/dashboard/related/event/Content.vue new file mode 100644 index 00000000..d502375f --- /dev/null +++ b/src/views/dashboard/related/event/Content.vue @@ -0,0 +1,129 @@ + + + + diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue new file mode 100644 index 00000000..5ce838ff --- /dev/null +++ b/src/views/dashboard/related/event/Header.vue @@ -0,0 +1,235 @@ + + + + diff --git a/src/views/event/data.ts b/src/views/dashboard/related/event/data.ts similarity index 100% rename from src/views/event/data.ts rename to src/views/dashboard/related/event/data.ts diff --git a/src/views/event/Content.vue b/src/views/event/Content.vue deleted file mode 100644 index b01b9854..00000000 --- a/src/views/event/Content.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - - - diff --git a/src/views/event/Header.vue b/src/views/event/Header.vue deleted file mode 100644 index 3b2da10f..00000000 --- a/src/views/event/Header.vue +++ /dev/null @@ -1,251 +0,0 @@ - - - -