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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.input-name { .input-name {
width: 300px; width: 250px;
} }
.vertical { .vertical {

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

@ -24,21 +24,25 @@ limitations under the License. -->
@change="changeLayer" @change="changeLayer"
class="inputs" class="inputs"
/> />
<div class="label">{{ t("nodeMetrics") }}</div> <div class="label" v-if="currentConfig.layer">
<el-popover placement="left" :width="400" trigger="click"> <span>{{ t("nodeMetrics") }}</span>
<template #reference> <el-popover placement="left" :width="400" trigger="click">
<span> <template #reference>
<Icon class="cp ml-5" iconName="mode_edit" size="middle" /> <span>
</span> <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
</template> </span>
<Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" /> </template>
</el-popover> <Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
<Tags </el-popover>
:tags="currentConfig.nodeExpressions" </div>
:vertical="true" <div v-if="currentConfig.layer">
:text="t('addExpressions')" <Tags
@change="(param) => changeNodeExpressions(param)" :tags="currentConfig.nodeExpressions"
/> :vertical="true"
:text="t('addExpressions')"
@change="(param) => changeNodeExpressions(param)"
/>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -59,8 +63,8 @@ limitations under the License. -->
const topologyStore = useTopologyStore(); const topologyStore = useTopologyStore();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || []; const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const layers = ref<Option[]>([]);
const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {}); const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {});
const layers = ref<Option[]>([]);
onMounted(() => { onMounted(() => {
setLayers(); setLayers();
@ -69,27 +73,34 @@ limitations under the License. -->
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || []; const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const layer = opt[0].value; 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[]) { function changeNodeExpressions(param: string[]) {
currentConfig.value.nodeExpressions = param; currentConfig.value.nodeExpressions = param;
updateSettings(); updateSettings();
if (!param.length) {
topologyStore.setHierarchyServiceNode({});
return;
}
topologyStore.queryHierarchyNodeExpressions(param);
} }
function updateSettings() { function updateSettings() {
const { hierarchyServicesConfig } = dashboardStore.selectedGrid; const config = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const index = hierarchyServicesConfig.findIndex( const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer);
(d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer,
);
if (index < 0) { 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 = { const param = {
...dashboardStore.selectedGrid, ...dashboardStore.selectedGrid,
hierarchyServicesConfig, hierarchyServicesConfig,
}; };
dashboardStore.selectWidget(param); dashboardStore.selectWidget(param);
dashboardStore.setConfigs(param); dashboardStore.setConfigs(param);
emits("update", 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() { function showConfig() {
showSetting.value = !showSetting.value; showSetting.value = !showSetting.value;
dashboardStore.selectWidget(props.config);
} }
async function initLegendMetrics() { async function initLegendMetrics() {
@ -261,22 +262,19 @@ limitations under the License. -->
return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE; return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
} }
function showNodeTip(event: MouseEvent, data: Node) { function showNodeTip(event: MouseEvent, data: Node) {
const nodeMetrics: string[] = const nodeMetrics: string[] = settings.value.nodeExpressions;
(settings.value.metricMode === MetricModes.Expression
? settings.value.nodeExpressions
: settings.value.nodeMetrics) || [];
const nodeMetricConfig = settings.value.nodeMetricConfig || []; const nodeMetricConfig = settings.value.nodeMetricConfig || [];
const html = nodeMetrics.map((m, index) => { const html = nodeMetrics.map((m, index) => {
const metric = 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 opt: MetricConfigOpt = nodeMetricConfig[index] || {};
const v = aggregation(metric.value, opt); 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 = [ const tipHtml = [
`<div class="mb-5"><span class="grey">name: </span>${ `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
data.name
}</div><div class="mb-5"><span class="grey">type: </span>${data.type || "UNKNOWN"}</div>`,
...html, ...html,
].join(" "); ].join(" ");