github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: config

Browse Source
This commit is contained in:
Fine 2024-01-10 14:54:23 +08:00
parent 77a08456e6
commit 55d9df3cbb
3 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Tags.vue
View File

@ -72,7 +72,7 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.input-name {
width: 300px;
width: 250px;
}
.vertical {

57
src/views/dashboard/related/topology/config/HierarchySettings.vue
View File

@ -24,21 +24,25 @@ limitations under the License. -->
@change="changeLayer"
class="inputs"
/>
<div class="label">{{ t("nodeMetrics") }}</div>
<el-popover placement="left" :width="400" trigger="click">
<template #reference>
<span>
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
</span>
</template>
<Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
</el-popover>
<Tags
:tags="currentConfig.nodeExpressions"
:vertical="true"
:text="t('addExpressions')"
@change="(param) => changeNodeExpressions(param)"
/>
<div class="label" v-if="currentConfig.layer">
<span>{{ t("nodeMetrics") }}</span>
<el-popover placement="left" :width="400" trigger="click">
<template #reference>
<span>
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
</span>
</template>
<Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
</el-popover>
</div>
<div v-if="currentConfig.layer">
<Tags
:tags="currentConfig.nodeExpressions"
:vertical="true"
:text="t('addExpressions')"
@change="(param) => changeNodeExpressions(param)"
/>
</div>
</div>
</template>
<script lang="ts" setup>
@ -59,8 +63,8 @@ limitations under the License. -->
const topologyStore = useTopologyStore();
const selectorStore = useSelectorStore();
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const layers = ref<Option[]>([]);
const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {});
const layers = ref<Option[]>([]);
onMounted(() => {
setLayers();
@ -69,27 +73,34 @@ limitations under the License. -->
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const layer = opt[0].value;
currentConfig.value = hierarchyServicesConfig.value.find((d: HierarchyServicesConfig) => d.layer === layer) || {};
currentConfig.value = hierarchyServicesConfig.find((d: HierarchyServicesConfig) => d.layer === layer) || { layer };
}
function changeNodeExpressions(param: string[]) {
currentConfig.value.nodeExpressions = param;
updateSettings();
if (!param.length) {
topologyStore.setHierarchyServiceNode({});
return;
}
topologyStore.queryHierarchyNodeExpressions(param);
}
function updateSettings() {
const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
const index = hierarchyServicesConfig.findIndex(
(d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer,
);
const config = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer);
if (index < 0) {
return;
config.push(currentConfig.value);
} else {
config[index] = currentConfig.value;
}
hierarchyServicesConfig[index] = currentConfig.value;
const hierarchyServicesConfig = config.filter((d: HierarchyServicesConfig) => d.layer && d.nodeExpressions);
const param = {
...dashboardStore.selectedGrid,
hierarchyServicesConfig,
};
dashboardStore.selectWidget(param);
dashboardStore.setConfigs(param);
emits("update", param);

16
src/views/dashboard/related/topology/service/HierarchyMap.vue
View File

@ -215,6 +215,7 @@ limitations under the License. -->
function showConfig() {
showSetting.value = !showSetting.value;
dashboardStore.selectWidget(props.config);
}
async function initLegendMetrics() {
@ -261,22 +262,19 @@ limitations under the License. -->
return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
}
function showNodeTip(event: MouseEvent, data: Node) {
const nodeMetrics: string[] =
(settings.value.metricMode === MetricModes.Expression
? settings.value.nodeExpressions
: settings.value.nodeMetrics) || [];
const nodeMetrics: string[] = settings.value.nodeExpressions;
const nodeMetricConfig = settings.value.nodeMetricConfig || [];
const html = nodeMetrics.map((m, index) => {
const metric =
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
topologyStore.hierarchyNodeMetrics[m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id,
) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
const v = aggregation(metric.value, opt);
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || "unknown"}</div>`;
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
});
const tipHtml = [
`<div class="mb-5"><span class="grey">name: </span>${
data.name
}</div><div class="mb-5"><span class="grey">type: </span>${data.type || "UNKNOWN"}</div>`,
`<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
...html,
].join(" ");