mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 19:44:25 +00:00
fix: add tooltips for list graphs (#47)
This commit is contained in:
Fine0830
GitHub
parent
767c92c60d
commit
ee06546c20
@ -1,16 +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. -->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path id="a" d="m10.472352 7.28232367c.3431062-.36783247.904419-.36783247 1.2592596-.00644059.3578153.36442148.3578153.95850784.0002156 1.28561559l-3.10532264 3.16826253c-.17025689.1734002-.39845625.2702388-.62654793.2702388-.24380864 0-.45151514-.0919745-.62697852-.2706782l-3.09835734-3.16693764c-.36405333-.352236-.36405333-.94614513-.01248284-1.28566765.34310619-.36783247.90441901-.36783247 1.25901327-.0066912l2.48658215 2.52737493z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1,17 +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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M6.984 9.984h10.031l-5.016 5.016z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 922 B |
@ -1,19 +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. -->
|
||||
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<title>bar_chart</title>
|
||||
<path d="M16.219 12.984h2.766v6h-2.766v-6zM10.594 5.016h2.813v13.969h-2.813v-13.969zM5.016 9.188h3v9.797h-3v-9.797z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1021 B |
@ -1,17 +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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1,15 +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. -->
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M432 617.6l-121.6-121.6L265.6 544l166.4 166.4L758.4 384l-44.8-48z" /></svg>
|
||||
@ -1,18 +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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<title>keyboard_control</title>
|
||||
<path d="M12 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM18 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM6 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,18 +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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<title>library_add</title>
|
||||
<path d="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,18 +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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<title>notification_important</title>
|
||||
<path d="M12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586zM12.984 12v-3.984h-1.969v3.984h1.969zM12.984 15.984v-1.969h-1.969v1.969h1.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1,17 +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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M12.984 12.656l2.625-2.578 1.406 1.406-5.016 5.016-5.016-5.016 1.406-1.406 2.625 2.578v-9.656h1.969v9.656zM18.984 12h2.016v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984h2.016v6.984h13.969v-6.984z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -13,5 +13,5 @@ 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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M8.484 13.5l-3.469 4.5h13.969l-4.5-6-3.469 4.5zM21 18.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969q0.797 0 1.406 0.609t0.609 1.406v13.969z"></path>
|
||||
<path d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016 14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016 3.984h19.969v4.031h-19.969v-4.031zM3.984 17.016v1.969h2.016v-1.969h-2.016zM2.016 20.016v-4.031h19.969v4.031h-19.969z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -13,12 +13,9 @@ 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
|
||||
v-if="available"
|
||||
ref="chartRef"
|
||||
:style="`height:${height};width:${width};`"
|
||||
></div>
|
||||
<div v-else class="no-data">No Data</div>
|
||||
<div ref="chartRef" :style="`height:${height};width:${width};`">
|
||||
<div v-if="!available" class="no-data">No Data</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
@ -50,9 +47,10 @@ const props = defineProps({
|
||||
});
|
||||
const available = computed(
|
||||
() =>
|
||||
Array.isArray(props.option.series) &&
|
||||
props.option.series[0] &&
|
||||
props.option.series[0].data
|
||||
(Array.isArray(props.option.series) &&
|
||||
props.option.series[0] &&
|
||||
props.option.series[0].data) ||
|
||||
(Array.isArray(props.option.series.data) && props.option.series.data[0])
|
||||
);
|
||||
onMounted(async () => {
|
||||
await setOptions(props.option);
|
||||
@ -92,5 +90,6 @@ onBeforeUnmount(() => {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-box-align: center;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,8 +26,8 @@ export enum MetricQueryTypes {
|
||||
export enum Calculations {
|
||||
Percentage = "percentage",
|
||||
ByteToKB = "byteToKB",
|
||||
ByteToMB = "ByteToMB",
|
||||
ByteToGB = "ByteToGB",
|
||||
ByteToMB = "byteToMB",
|
||||
ByteToGB = "byteToGB",
|
||||
Apdex = "apdex",
|
||||
Precision = "precision",
|
||||
ConvertSeconds = "convertSeconds",
|
||||
|
||||
@ -165,7 +165,7 @@ span.collapse {
|
||||
|
||||
.menu-control {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
top: 7px;
|
||||
left: 200px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
@ -311,7 +311,7 @@ const msg = {
|
||||
keywordsOfContentLogTips:
|
||||
"Current storage of SkyWalking OAP server does not support this.",
|
||||
setEvent: "Set Event",
|
||||
viewAttributes: "View Attributes",
|
||||
viewAttributes: "View",
|
||||
serviceEvents: "Service Events",
|
||||
select: "Select",
|
||||
eventID: "Event ID",
|
||||
|
||||
@ -20,7 +20,7 @@ const msg = {
|
||||
traces: "跟踪",
|
||||
metrics: "指标",
|
||||
serviceMesh: "服务网格",
|
||||
infrastructure: "基础结构",
|
||||
infrastructure: "基础设施",
|
||||
virtualMachine: "虚拟机",
|
||||
dashboardNew: "新建仪表板",
|
||||
dashboardHome: "仪表盘首页",
|
||||
@ -112,7 +112,7 @@ const msg = {
|
||||
showGroup: "显示分组",
|
||||
noWidget: "请添加组件",
|
||||
rename: "重命名",
|
||||
selfObservability: "自观性",
|
||||
selfObservability: "自观测性",
|
||||
satellite: "Satellite",
|
||||
skyWalkingServer: "SkyWalking服务",
|
||||
functions: "Functions",
|
||||
@ -310,7 +310,7 @@ const msg = {
|
||||
"只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
|
||||
keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
|
||||
setEvent: "设置事件",
|
||||
viewAttributes: "实例属性",
|
||||
viewAttributes: "查看",
|
||||
serviceEvents: "服务事件",
|
||||
select: "选择",
|
||||
eventID: "事件ID",
|
||||
|
||||
@ -23,7 +23,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
|
||||
name: "Database",
|
||||
meta: {
|
||||
title: "database",
|
||||
icon: "bar_chart",
|
||||
icon: "storage",
|
||||
hasGroup: true,
|
||||
},
|
||||
redirect: "/database",
|
||||
|
||||
@ -139,5 +139,5 @@ pre {
|
||||
}
|
||||
|
||||
.el-icon.menu-icons {
|
||||
margin-right: 8px !important;
|
||||
margin-top: -3px !important;
|
||||
}
|
||||
|
||||
@ -72,6 +72,7 @@ export interface LineConfig extends AreaConfig {
|
||||
step?: boolean;
|
||||
showXAxis?: boolean;
|
||||
showYAxis?: boolean;
|
||||
smallTips?: boolean;
|
||||
}
|
||||
|
||||
export interface AreaConfig {
|
||||
|
||||
@ -92,7 +92,7 @@ const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const originConfig = dashboardStore.selectedGrid;
|
||||
const graph = originConfig.graph || {};
|
||||
const url = ref(originConfig.graph.url || "");
|
||||
const url = ref(graph.url || "");
|
||||
const backgroundColor = ref(graph.backgroundColor || "green");
|
||||
const fontColor = ref(graph.fontColor || "white");
|
||||
const content = ref<string>(graph.content || "");
|
||||
|
||||
@ -34,16 +34,16 @@ import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
|
||||
const opacity = ref(selectedGrid.graph.opacity);
|
||||
const opacity = ref(graph.opacity);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -30,15 +30,15 @@ import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const showBackground = ref(selectedGrid.graph.showBackground || false);
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const showBackground = ref(graph.showBackground || false);
|
||||
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -43,9 +43,9 @@ import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const fontSize = ref(selectedGrid.graph.fontSize);
|
||||
const showUnit = ref<boolean>(selectedGrid.graph.showUnit);
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const fontSize = ref(graph.fontSize);
|
||||
const showUnit = ref<boolean>(graph.showUnit);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
|
||||
@ -33,17 +33,17 @@ import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const { t } = useI18n();
|
||||
|
||||
const fontSize = ref(selectedGrid.graph.fontSize);
|
||||
const fontSize = ref(graph.fontSize);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -34,15 +34,15 @@ import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const fontSize = ref(selectedGrid.graph.fontSize);
|
||||
const graph = dashboardStore.selectedGrid.graph;
|
||||
const fontSize = ref(graph.fontSize);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -16,19 +16,19 @@ limitations under the License. -->
|
||||
<div>
|
||||
<span class="label">{{ t("showXAxis") }}</span>
|
||||
<el-switch
|
||||
v-model="selectedGrid.graph.showXAxis"
|
||||
v-model="graph.showXAxis"
|
||||
active-text="Yes"
|
||||
inactive-text="No"
|
||||
@change="updateConfig({ showXAxis: selectedGrid.graph.showXAxis })"
|
||||
@change="updateConfig({ showXAxis: graph.showXAxis })"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">{{ t("showYAxis") }}</span>
|
||||
<el-switch
|
||||
v-model="selectedGrid.graph.showYAxis"
|
||||
v-model="graph.showYAxis"
|
||||
active-text="Yes"
|
||||
inactive-text="No"
|
||||
@change="updateConfig({ showYAxis: selectedGrid.graph.showYAxis })"
|
||||
@change="updateConfig({ showYAxis: graph.showYAxis })"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@ -60,23 +60,23 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const smooth = ref(selectedGrid.graph.smooth);
|
||||
const showSymbol = ref(selectedGrid.graph.showSymbol);
|
||||
const step = ref(selectedGrid.graph.step);
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const smooth = ref(graph.value.smooth);
|
||||
const showSymbol = ref(graph.value.showSymbol);
|
||||
const step = ref(graph.value.step);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -16,10 +16,10 @@ limitations under the License. -->
|
||||
<div class="item">
|
||||
<span class="label">{{ t("showGroup") }}</span>
|
||||
<el-switch
|
||||
v-model="selectedGrid.graph.showGroup"
|
||||
v-model="graph.showGroup"
|
||||
active-text="Yes"
|
||||
inactive-text="No"
|
||||
@change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
|
||||
@change="updateConfig({ showGroup: graph.showGroup })"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
@ -37,14 +37,14 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const fontSize = ref(selectedGrid.graph.fontSize);
|
||||
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
|
||||
const fontSize = ref(graph.value.fontSize);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const { selectedGrid } = dashboardStore;
|
||||
|
||||
@ -50,17 +50,17 @@ import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const showTableValues = ref(selectedGrid.graph.showTableValues);
|
||||
const tableHeaderCol1 = ref(selectedGrid.graph.tableHeaderCol1);
|
||||
const tableHeaderCol2 = ref(selectedGrid.graph.tableHeaderCol2);
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const showTableValues = ref(graph.showTableValues);
|
||||
const tableHeaderCol1 = ref(graph.tableHeaderCol1);
|
||||
const tableHeaderCol2 = ref(graph.tableHeaderCol2);
|
||||
|
||||
function updateConfig(param: { [key: string]: unknown }) {
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...dashboardStore.selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -32,8 +32,8 @@ import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const color = ref(selectedGrid.graph.color || "purple");
|
||||
const graph = dashboardStore.selectedGrid.graph || {};
|
||||
const color = ref(graph.color || "purple");
|
||||
const Colors = [
|
||||
{ label: "Purple", value: "purple" },
|
||||
{
|
||||
|
||||
@ -349,6 +349,9 @@ async function queryMetrics() {
|
||||
return;
|
||||
}
|
||||
const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
|
||||
if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
|
||||
return;
|
||||
}
|
||||
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
|
||||
const params = useQueryProcessor({ ...states, metricConfig, catalog });
|
||||
if (!params) {
|
||||
|
||||
@ -83,8 +83,8 @@ limitations under the License. -->
|
||||
v-model:layout="dashboardStore.currentTabItems"
|
||||
:col-num="24"
|
||||
:row-height="10"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-draggable="dashboardStore.editMode"
|
||||
:is-resizable="dashboardStore.editMode"
|
||||
@layout-updated="layoutUpdatedEvent"
|
||||
>
|
||||
<grid-item
|
||||
@ -320,7 +320,7 @@ export default defineComponent({
|
||||
.vue-grid-item:not(.vue-grid-placeholder) {
|
||||
background: #fff;
|
||||
box-shadow: 0px 1px 4px 0px #00000029;
|
||||
border-radius: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tab-layout {
|
||||
|
||||
@ -36,21 +36,21 @@ limitations under the License. -->
|
||||
</div>
|
||||
<div
|
||||
class="body"
|
||||
:class="data.graph.textAlign === 'center' ? 'center' : ''"
|
||||
:style="{
|
||||
backgroundColor: TextColors[data.graph.backgroundColor],
|
||||
color: TextColors[data.graph.fontColor],
|
||||
fontSize: data.graph.fontSize + 'px',
|
||||
textAlign: data.graph.textAlign,
|
||||
backgroundColor: TextColors[graph.backgroundColor],
|
||||
color: TextColors[graph.fontColor],
|
||||
fontSize: graph.fontSize + 'px',
|
||||
textAlign: graph.textAlign,
|
||||
}"
|
||||
>
|
||||
<a :href="data.graph.url" target="_blank">
|
||||
{{ data.graph.content }}
|
||||
<a :href="graph.url" target="_blank">
|
||||
{{ graph.content }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
@ -65,6 +65,7 @@ const props = defineProps({
|
||||
activeIndex: { type: String, default: "" },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const graph = computed(() => props.data.graph || {});
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
function removeTopo() {
|
||||
@ -93,16 +94,11 @@ function editConfig() {
|
||||
}
|
||||
|
||||
.body {
|
||||
text-align: center;
|
||||
padding: 5px 20px 0 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
cursor: pointer;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-pack: center;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
// -webkit-box-align: left;
|
||||
}
|
||||
|
||||
.tools {
|
||||
|
||||
@ -53,7 +53,12 @@ limitations under the License. -->
|
||||
v-if="config.metricTypes[index] === 'readMetricsValues'"
|
||||
:data="{ [metric]: scope.row[metric] }"
|
||||
:intervalTime="intervalTime"
|
||||
:config="{ showXAxis: false, showYAxis: false }"
|
||||
:config="{
|
||||
showXAxis: false,
|
||||
showYAxis: false,
|
||||
smallTips: true,
|
||||
showSymbol: true,
|
||||
}"
|
||||
/>
|
||||
<Card
|
||||
v-else
|
||||
@ -204,7 +209,7 @@ watch(
|
||||
@import "./style.scss";
|
||||
|
||||
.chart {
|
||||
height: 39px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
|
||||
@ -36,8 +36,11 @@ const props = defineProps({
|
||||
const option = computed(() => getOption());
|
||||
|
||||
function getOption() {
|
||||
const metric = props.config.metrics[0];
|
||||
const nodes = (props.data[metric] && props.data[metric].nodes) || [];
|
||||
const metric = props.config.metrics && props.config.metrics[0];
|
||||
let nodes: any = [];
|
||||
if (metric) {
|
||||
nodes = (props.data[metric] && props.data[metric].nodes) || [];
|
||||
}
|
||||
const source = (nodes || []).map((d: number[]) => d[2]);
|
||||
const maxItem = Math.max(...source);
|
||||
const minItem = Math.min(...source);
|
||||
|
||||
@ -53,7 +53,12 @@ limitations under the License. -->
|
||||
v-if="config.metricTypes[index] === 'readMetricsValues'"
|
||||
:data="metric ? { [metric]: scope.row[metric] } : {}"
|
||||
:intervalTime="intervalTime"
|
||||
:config="{ showXAxis: false, showYAxis: false }"
|
||||
:config="{
|
||||
showXAxis: false,
|
||||
showYAxis: false,
|
||||
smallTips: true,
|
||||
showSymbol: true,
|
||||
}"
|
||||
/>
|
||||
<Card
|
||||
v-else
|
||||
@ -255,7 +260,7 @@ watch(
|
||||
@import "./style.scss";
|
||||
|
||||
.chart {
|
||||
height: 40px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
|
||||
@ -39,6 +39,7 @@ const props = defineProps({
|
||||
opacity: 0.4,
|
||||
showXAxis: true,
|
||||
showYAxis: true,
|
||||
smallTips: false,
|
||||
}),
|
||||
},
|
||||
});
|
||||
@ -79,7 +80,7 @@ function getOption() {
|
||||
name: i,
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
symbolSize: 6,
|
||||
showSymbol: props.config.showSymbol,
|
||||
step: props.config.step,
|
||||
smooth: props.config.smooth,
|
||||
@ -141,20 +142,31 @@ function getOption() {
|
||||
];
|
||||
break;
|
||||
}
|
||||
const tooltip = {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgb(50,50,50)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
},
|
||||
enterable: true,
|
||||
extraCssText: "max-height: 300px; overflow: auto; border: none;",
|
||||
};
|
||||
const tips = {
|
||||
formatter(params: any) {
|
||||
return `${params[0].value[1]}`;
|
||||
},
|
||||
extraCssText: `height: 20px; padding:0 2px;`,
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#333",
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
color,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
zlevel: 1000,
|
||||
z: 60,
|
||||
backgroundColor: "rgb(50,50,50)",
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: "#ccc",
|
||||
},
|
||||
enterable: true,
|
||||
extraCssText: "max-height: 300px; overflow: auto; border: none",
|
||||
},
|
||||
tooltip: props.config.smallTips ? tips : tooltip,
|
||||
legend: {
|
||||
type: "scroll",
|
||||
show: keys.length === 1 ? false : true,
|
||||
|
||||
@ -65,7 +65,12 @@ limitations under the License. -->
|
||||
v-if="config.metricTypes[index] === 'readMetricsValues'"
|
||||
:data="{ [metric]: scope.row[metric] }"
|
||||
:intervalTime="intervalTime"
|
||||
:config="{ showXAxis: false, showYAxis: false }"
|
||||
:config="{
|
||||
showXAxis: false,
|
||||
showYAxis: false,
|
||||
smallTips: true,
|
||||
showSymbol: true,
|
||||
}"
|
||||
/>
|
||||
<Card
|
||||
v-else
|
||||
@ -288,7 +293,7 @@ watch(
|
||||
@import "./style.scss";
|
||||
|
||||
.chart {
|
||||
height: 39px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
|
||||
@ -17,8 +17,8 @@ limitations under the License. -->
|
||||
v-model:layout="dashboardStore.layout"
|
||||
:col-num="24"
|
||||
:row-height="10"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-draggable="dashboardStore.editMode"
|
||||
:is-resizable="dashboardStore.editMode"
|
||||
v-if="dashboardStore.layout.length"
|
||||
>
|
||||
<grid-item
|
||||
@ -86,7 +86,7 @@ export default defineComponent({
|
||||
.vue-grid-item:not(.vue-grid-placeholder) {
|
||||
background: #fff;
|
||||
box-shadow: 0px 1px 4px 0px #00000029;
|
||||
border-radius: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.vue-grid-item.active {
|
||||
|
||||
@ -16,7 +16,9 @@ limitations under the License. -->
|
||||
<div class="tool">
|
||||
<span
|
||||
v-show="
|
||||
dashboardStore.entity === EntityType[2].value && config.graph.showDepth
|
||||
dashboardStore.entity === EntityType[2].value &&
|
||||
config.graph &&
|
||||
config.graph.showDepth
|
||||
"
|
||||
>
|
||||
<span class="label">{{ t("currentDepth") }}</span>
|
||||
@ -111,7 +113,9 @@ const width = ref<number>(100);
|
||||
const showSettings = ref<boolean>(false);
|
||||
const settings = ref<any>(props.config);
|
||||
const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
|
||||
const depth = ref<number>(props.config.graph.depth || 3);
|
||||
const depth = ref<number>(
|
||||
(props.config.graph && props.config.graph.depth) || 3
|
||||
);
|
||||
const items = [
|
||||
{ id: "inspect", title: "Inspect", func: inspect },
|
||||
{ id: "dashboard", title: "View Dashboard", func: goDashboard },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user