diff --git a/src/assets/icons/control.svg b/src/assets/icons/control.svg index 250d63bf..8ecf7f50 100644 --- a/src/assets/icons/control.svg +++ b/src/assets/icons/control.svg @@ -12,4 +12,4 @@ 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. --> - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/time_range.svg b/src/assets/icons/time_range.svg new file mode 100644 index 00000000..5b5238ba --- /dev/null +++ b/src/assets/icons/time_range.svg @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/src/assets/img/technologies/MICRONAUT.png b/src/assets/img/technologies/MICRONAUT.png new file mode 100644 index 00000000..8d351f62 Binary files /dev/null and b/src/assets/img/technologies/MICRONAUT.png differ diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 51256016..cfc99215 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -149,6 +149,7 @@ const msg = { "The name only supports Chinese and English, horizontal lines and underscores. The length of the name is limited to 300 characters", duplicateName: "Duplicate name", enableAssociate: "Enable association", + text: "Text", seconds: "Seconds", hourTip: "Select Hour", minuteTip: "Select Minute", diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts index 5f54bc3b..fc702987 100644 --- a/src/locales/lang/es.ts +++ b/src/locales/lang/es.ts @@ -145,6 +145,7 @@ const msg = { begin: "Inicio", associateOptions: "Opciones de asociación", widget: "Dispositivo pequeño", + text: "Texto", duplicateName: "Nombre duplicado", nameTip: "El nombre sólo admite chino e inglés, líneas horizontales y subrayado, y la longitud del nombre no excederá de 300 caracteres", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index dc776759..1713244e 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -146,6 +146,7 @@ const msg = { enableAssociate: "启用关联", nameTip: "该名称仅支持中文和英文、横线和下划线, 并且限制长度为300个字符", duplicateName: "重复的名称", + text: "文本", seconds: "秒", hourTip: "选择小时", minuteTip: "选择分钟", diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts index c985e2fc..3fe651f2 100644 --- a/src/router/dashboard.ts +++ b/src/router/dashboard.ts @@ -182,7 +182,7 @@ export const routesDashboard: Array = [ import( /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue" ), - name: "ViewPodRelation", + name: "PodRelation", meta: { notShow: true, }, @@ -205,6 +205,37 @@ export const routesDashboard: Array = [ }, ], }, + { + path: "", + redirect: + "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name", + component: () => + import( + /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue" + ), + name: "ProcessRelation", + meta: { + notShow: true, + }, + children: [ + { + path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name", + component: () => + import( + /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue" + ), + name: "ViewProcessRelation", + }, + { + path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/tab/:activeTabIndex", + component: () => + import( + /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue" + ), + name: "ViewProcessRelationActiveTabIndex", + }, + ], + }, ], }, ]; diff --git a/src/store/data.ts b/src/store/data.ts index d6d3e01e..ce31dd2c 100644 --- a/src/store/data.ts +++ b/src/store/data.ts @@ -29,3 +29,11 @@ export const TextConfig = { fontSize: 14, textAlign: "left", }; + +export const TimeRangeConfig = { + fontColor: "black", + backgroundColor: "white", + fontSize: 14, + textAlign: "center", + text: "text", +}; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 213510fa..bad5e8ef 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -21,7 +21,7 @@ import graphql from "@/graphql"; import query from "@/graphql/fetch"; import { DashboardItem } from "@/types/dashboard"; import { useSelectorStore } from "@/store/modules/selectors"; -import { NewControl, TextConfig } from "../data"; +import { NewControl, TextConfig, TimeRangeConfig } from "../data"; import { AxiosResponse } from "axios"; import { ElMessage } from "element-plus"; import { useI18n } from "vue-i18n"; @@ -129,6 +129,11 @@ export const dashboardStore = defineStore({ newItem.h = 6; newItem.graph = TextConfig; } + if (type === "TimeRange") { + newItem.w = 8; + newItem.h = 6; + newItem.graph = TimeRangeConfig; + } this.activedGridItem = newItem.i; this.selectedGrid = newItem; this.layout = this.layout.map((d: LayoutConfig) => { @@ -195,6 +200,11 @@ export const dashboardStore = defineStore({ newItem.h = 6; newItem.graph = TextConfig; } + if (type === "TimeRange") { + newItem.w = 8; + newItem.h = 6; + newItem.graph = TextConfig; + } if (this.layout[idx].children) { const items = children.map((d: LayoutConfig) => { d.y = d.y + newItem.h; diff --git a/src/views/dashboard/configuration/TimeRange.vue b/src/views/dashboard/configuration/TimeRange.vue new file mode 100644 index 00000000..13a493c1 --- /dev/null +++ b/src/views/dashboard/configuration/TimeRange.vue @@ -0,0 +1,161 @@ + + + + diff --git a/src/views/dashboard/configuration/index.ts b/src/views/dashboard/configuration/index.ts index 6d39f192..0055f828 100644 --- a/src/views/dashboard/configuration/index.ts +++ b/src/views/dashboard/configuration/index.ts @@ -19,10 +19,12 @@ import Text from "./Text.vue"; import Widget from "./Widget.vue"; import Topology from "./Topology.vue"; import Event from "./Event.vue"; +import TimeRange from "./TimeRange.vue"; export default { Text, Widget, Topology, Event, + TimeRange, }; diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index 3a63c062..233eb8a2 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -179,12 +179,16 @@ const setVisTypes = computed(() => { async function setMetricType(chart?: any) { const g = chart || dashboardStore.selectedGrid.graph || {}; - const json = await dashboardStore.fetchMetricList(); - if (json.errors) { - ElMessage.error(json.errors); - return; + let arr: any[] = states.metricList; + if (!chart) { + const json = await dashboardStore.fetchMetricList(); + if (json.errors) { + ElMessage.error(json.errors); + return; + } + arr = json.data.metrics; } - states.metricList = (json.data.metrics || []).filter( + states.metricList = (arr || []).filter( (d: { catalog: string; type: string }) => { if (states.isList) { if (d.type === MetricsType.REGULAR_VALUE) { diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue new file mode 100644 index 00000000..8832f9c6 --- /dev/null +++ b/src/views/dashboard/controls/TimeRange.vue @@ -0,0 +1,187 @@ + + + + diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index c1653891..ec582664 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -213,7 +213,10 @@ export default defineComponent({ watch( () => [selectorStore.currentPod, selectorStore.currentDestPod], () => { - if (dashboardStore.entity === EntityType[0].value) { + if ( + dashboardStore.entity === EntityType[0].value || + dashboardStore.entity === EntityType[7].value + ) { return; } if (isList.value) { @@ -222,6 +225,14 @@ export default defineComponent({ queryMetrics(); } ); + watch( + () => [selectorStore.currentProcess, selectorStore.currentDestProcess], + () => { + if (dashboardStore.entity === EntityType[7].value) { + queryMetrics(); + } + } + ); watch( () => appStore.durationTime, () => { diff --git a/src/views/dashboard/controls/index.ts b/src/views/dashboard/controls/index.ts index 2633ce8d..70cb7f9c 100644 --- a/src/views/dashboard/controls/index.ts +++ b/src/views/dashboard/controls/index.ts @@ -25,6 +25,7 @@ import Ebpf from "./Ebpf.vue"; import DemandLog from "./DemandLog.vue"; import Event from "./Event.vue"; import NetworkProfiling from "./NetworkProfiling.vue"; +import TimeRange from "./TimeRange.vue"; export default { Tab, @@ -38,4 +39,5 @@ export default { DemandLog, Event, NetworkProfiling, + TimeRange, }; diff --git a/src/views/dashboard/controls/tab.ts b/src/views/dashboard/controls/tab.ts index 90c33ed7..f081a10d 100644 --- a/src/views/dashboard/controls/tab.ts +++ b/src/views/dashboard/controls/tab.ts @@ -24,6 +24,7 @@ import Ebpf from "./Ebpf.vue"; import DemandLog from "./DemandLog.vue"; import Event from "./Event.vue"; import NetworkProfiling from "./NetworkProfiling.vue"; +import TimeRange from "./TimeRange.vue"; export default { Widget, @@ -36,4 +37,5 @@ export default { DemandLog, Event, NetworkProfiling, + TimeRange, }; diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 934d3d69..61b08eab 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -217,6 +217,7 @@ export const ProcessTools = [ { 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: "time_range", content: "Add Time Range Text", id: "addTimeRange" }, ]; 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 4c32bef8..d2b6616a 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -14,94 +14,98 @@ See the License for the specific language governing permissions and limitations under the License. -->