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 legend expressions

Browse Source
This commit is contained in:
Fine 2023-08-22 16:14:21 +08:00
parent 2d5f004ca2
commit 67951a346c
3 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/hooks/useExpressionsProcessor.ts
View File

@ -358,7 +358,7 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], instance
serviceInstanceName,
endpointName,
destServiceName,
destNormal: true,
destNormal: destServiceName ? true : undefined,
destServiceInstanceName,
destEndpointName,
};

7
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -397,6 +397,13 @@ limitations under the License. -->
if (!legend.length) {
return icons.CUBE;
}
if (settings.value.metricMode === MetricModes.Expression) {
let c = true;
for (const l of legend) {
c = c && !!Number(d[l.name]);
}
return c && d.isReal ? icons.CUBEERROR : icons.CUBE;
}
let c = true;
for (const l of legend) {
if (l.condition === "<") {

66
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -204,33 +204,34 @@ limitations under the License. -->
placeholder="Please input a expression"
@change="changeLegend(LegendOpt.NAME, $event, index)"
size="small"
class="item"
/>
<Selector
v-else
class="item"
:value="metric.name"
:options="states.nodeMetricList"
size="small"
placeholder="Select a metric"
@change="changeLegend(LegendOpt.NAME, $event, index)"
/>
<Selector
class="input-small"
:value="metric.condition"
:options="MetricConditions"
size="small"
placeholder="Select a condition"
@change="changeLegend(LegendOpt.CONDITION, $event, index)"
/>
<el-input
v-model="metric.value"
placeholder="Please input a value"
type="number"
@change="changeLegend(LegendOpt.VALUE, $event, index)"
size="small"
class="item"
class="legend-inputs"
/>
<span v-else>
<Selector
class="item"
:value="metric.name"
:options="states.nodeMetricList"
size="small"
placeholder="Select a metric"
@change="changeLegend(LegendOpt.NAME, $event, index)"
/>
<Selector
class="input-small"
:value="metric.condition"
:options="MetricConditions"
size="small"
placeholder="Select a condition"
@change="changeLegend(LegendOpt.CONDITION, $event, index)"
/>
<el-input
v-model="metric.value"
placeholder="Please input a value"
type="number"
@change="changeLegend(LegendOpt.VALUE, $event, index)"
size="small"
class="item"
/>
</span>
<span>
<Icon class="cp delete" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
<Icon
@ -439,7 +440,13 @@ limitations under the License. -->
updateSettings();
}
function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
const metrics = legend.value.filter((d: any) => d.name && d.value && d.condition);
let metrics = [];
if (isExpression.value) {
metrics = legend.value.filter((d: any) => d.name);
} else {
metrics = legend.value.filter((d: any) => d.name && d.value && d.condition);
}
const param = {
...dashboardStore.selectedGrid,
linkDashboard: states.linkDashboard,
@ -600,6 +607,11 @@ limitations under the License. -->
width: 355px;
}
.legend-inputs {
margin-top: 8px;
width: 310px;
}
.item {
width: 130px;
margin-top: 5px;