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

feat: update expressions config

Browse Source
This commit is contained in:
Fine 2024-01-10 17:50:34 +08:00
parent 55d9df3cbb
commit ddd24fa769
6 changed files with 63 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Tags.vue
View File

@ -31,7 +31,7 @@ limitations under the License. -->
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";
import { nextTick, ref, watch } from "vue";
import type { PropType } from "vue";
import { ElInput } from "element-plus";
@ -69,6 +69,13 @@ limitations under the License. -->
inputValue.value = "";
emits("change", dynamicTags.value);
};
watch(
() => props.tags,
() => {
dynamicTags.value = props.tags || [];
},
);
</script>
<style lang="scss" scoped>
.input-name {

20
src/store/modules/topology.ts
View File

@ -42,7 +42,7 @@ interface TopologyState {
nodeMetricValue: MetricVal;
linkServerMetrics: MetricVal;
linkClientMetrics: MetricVal;
hierarchyNodeMetrics: MetricVal;
hierarchyNodeMetrics: { [key: string]: MetricVal };
hierarchyServiceNode: Nullable<Node>;
}
@ -185,8 +185,8 @@ export const topologyStore = defineStore({
this.hierarchyServiceNodes.push(d);
}
},
setHierarchyNodeMetricValue(m: MetricVal) {
this.hierarchyNodeMetrics = m;
setHierarchyNodeMetricValue(m: MetricVal, layer: string) {
this.hierarchyNodeMetrics[layer] = m;
},
setLinkServerMetrics(m: MetricVal) {
this.linkServerMetrics = m;
@ -590,19 +590,17 @@ export const topologyStore = defineStore({
this.setInstanceTopology(res.data.data.hierarchyInstanceTopology || {});
return res.data;
},
async queryHierarchyNodeExpressions(expressions: string[]) {
async queryHierarchyNodeExpressions(expressions: string[], layer: string) {
const nodes = this.hierarchyServiceNodes.filter((n: Node) => n.layer === layer);
if (!expressions.length) {
this.setHierarchyNodeMetricValue({});
this.setHierarchyNodeMetricValue({}, layer);
return;
}
if (!this.hierarchyServiceNodes.length) {
this.setHierarchyNodeMetricValue({});
this.setHierarchyNodeMetricValue({}, layer);
return;
}
const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
expressions,
this.hierarchyServiceNodes,
);
const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(expressions, nodes);
const param = getExpressionQuery();
const res = await this.getNodeExpressionValue(param);
if (res.errors) {
@ -610,7 +608,7 @@ export const topologyStore = defineStore({
return;
}
const metrics = handleExpressionValues(res.data);
this.setHierarchyNodeMetricValue(metrics);
this.setHierarchyNodeMetricValue(metrics, layer);
},
},
});

4
src/types/dashboard.d.ts vendored
View File

@ -83,6 +83,10 @@ export type MetricConfigOpt = {
detailLabel?: string;
};
export interface HierarchyServicesConfigMap {
[key: string]: HierarchyServicesConfig;
}
export interface HierarchyServicesConfig {
layer: string;
nodeExpressions: string[];

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

@ -32,12 +32,12 @@ limitations under the License. -->
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
</span>
</template>
<Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
<Metrics :type="'hierarchyServicesConfig'" :layer="currentConfig.layer" @update="updateSettings" />
</el-popover>
</div>
<div v-if="currentConfig.layer">
<Tags
:tags="currentConfig.nodeExpressions"
:tags="currentConfig.nodeExpressions || []"
:vertical="true"
:text="t('addExpressions')"
@change="(param) => changeNodeExpressions(param)"
@ -46,10 +46,10 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { onMounted, ref, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import type { HierarchyServicesConfig } from "@/types/dashboard";
import type { HierarchyServicesConfig, MetricConfigOpt } from "@/types/dashboard";
import type { Node } from "@/types/topology";
import type { Option } from "@/types/app";
import { useDashboardStore } from "@/store/modules/dashboard";
@ -63,7 +63,7 @@ limitations under the License. -->
const topologyStore = useTopologyStore();
const selectorStore = useSelectorStore();
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {});
const currentConfig = reactive<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {});
const layers = ref<Option[]>([]);
onMounted(() => {
@ -72,27 +72,31 @@ limitations under the License. -->
function changeLayer(opt: Option[]) {
const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const layer = opt[0].value;
currentConfig.value = hierarchyServicesConfig.find((d: HierarchyServicesConfig) => d.layer === layer) || { layer };
const config = hierarchyServicesConfig.find((d: HierarchyServicesConfig) => d.layer === layer) || {};
currentConfig.layer = layer;
currentConfig.nodeExpressions = config.nodeExpressions || [];
}
function changeNodeExpressions(param: string[]) {
currentConfig.value.nodeExpressions = param;
currentConfig.nodeExpressions = param;
updateSettings();
if (!param.length) {
topologyStore.setHierarchyServiceNode({});
topologyStore.setHierarchyServiceNode({}, currentConfig.layer);
return;
}
topologyStore.queryHierarchyNodeExpressions(param);
topologyStore.queryHierarchyNodeExpressions(param, currentConfig.layer);
}
function updateSettings() {
function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
if (metricConfig) {
currentConfig.expressionsConfig = Object.values(metricConfig)[0];
}
const config = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer);
const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.layer);
if (index < 0) {
config.push(currentConfig.value);
config.push(JSON.parse(JSON.stringify(currentConfig)));
} else {
config[index] = currentConfig.value;
config[index] = JSON.parse(JSON.stringify(currentConfig));
}
const hierarchyServicesConfig = config.filter((d: HierarchyServicesConfig) => d.layer && d.nodeExpressions);

18
src/views/dashboard/related/topology/config/Metrics.vue
View File

@ -63,6 +63,7 @@ limitations under the License. -->
const props = defineProps({
type: { type: String, default: "" },
isExpression: { type: Boolean, default: true },
layer: { type: String, default: "" },
});
const { t } = useI18n();
const emit = defineEmits(["update"]);
@ -76,7 +77,12 @@ limitations under the License. -->
linkClientMetrics,
nodeExpressions,
nodeMetrics,
hierarchyServicesConfig,
} = dashboardStore.selectedGrid;
let item: any = {};
if (hierarchyServicesConfig && props.layer) {
item = hierarchyServicesConfig.find((d: any) => d.layer === props.layer) || {};
}
switch (props.type) {
case "linkServerMetricConfig":
metrics = props.isExpression ? linkServerExpressions : linkServerMetrics;
@ -87,6 +93,9 @@ limitations under the License. -->
case "nodeMetricConfig":
metrics = props.isExpression ? nodeExpressions : nodeMetrics;
break;
case "hierarchyServicesConfig":
metrics = item.nodeExpressions || [];
break;
}
return metrics || [];
});
@ -105,7 +114,11 @@ limitations under the License. -->
const currentIndex = ref<number>(0);
const getMetricConfig = computed(() => {
let config = [];
const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
let item: any = {};
if (hierarchyServicesConfig && props.layer) {
item = hierarchyServicesConfig.find((d: any) => d.layer === props.layer) || {};
}
switch (props.type) {
case "linkServerMetricConfig":
config = dashboardStore.selectedGrid.linkServerMetricConfig;
@ -116,6 +129,9 @@ limitations under the License. -->
case "nodeMetricConfig":
config = dashboardStore.selectedGrid.nodeMetricConfig;
break;
case "hierarchyServicesConfig":
config = item.expressionsConfig || [];
break;
}
return config || [];
});

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

@ -123,6 +123,7 @@ limitations under the License. -->
import zoom from "@/views/dashboard/related/components/utils/zoom";
import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
import HierarchySettings from "../config/HierarchySettings.vue";
import type { HierarchyServicesConfig } from "@/types/dashboard";
/*global Nullable, defineProps */
const props = defineProps({
@ -262,11 +263,13 @@ 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.nodeExpressions;
const nodeMetricConfig = settings.value.nodeMetricConfig || [];
const html = nodeMetrics.map((m, index) => {
const config: HierarchyServicesConfig =
(settings.value.hierarchyServicesConfig || []).find((d: HierarchyServicesConfig) => d.layer === data.layer) || {};
const exprssions = config.nodeExpressions || [];
const nodeMetricConfig = config.expressionsConfig || [];
const html = exprssions.map((m, index) => {
const metric =
topologyStore.hierarchyNodeMetrics[m].values.find(
topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id,
) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};