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

feat: update

Browse Source
This commit is contained in:
Fine 2023-06-07 15:45:41 +08:00
parent 00281e8920
commit 44f6e32953
7 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/hooks/useExpressionsProcessor.ts
View File

@ -214,6 +214,7 @@ export async function useExpressionsQueryPodsMetrics(
return {};
}
const names: string[] = [];
const subNames: string[] = [];
const metricConfigArr: MetricConfigOpt[] = [];
const metricTypesArr: string[] = [];
const data = pods.map((d: any, idx: number) => {
@ -256,16 +257,21 @@ export async function useExpressionsQueryPodsMetrics(
return d;
}
const name = config.expressions[index] || "";
const subName = config.subExpressions[index] || "";
if (!d[name]) {
d[name] = {};
}
d[name]["avg"] = [results[0].values[0].value];
if (subResults[0]) {
d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
if (!d[subName]) {
d[subName] = {};
}
d[subName]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
}
const j = names.find((d: string) => d === name);
if (!j) {
names.push(name);
subNames.push(subName);
metricConfigArr.push(c);
metricTypesArr.push(config.typesOfMQE[index]);
}
@ -274,7 +280,7 @@ export async function useExpressionsQueryPodsMetrics(
return d;
});
return { data, names, metricConfigArr, metricTypesArr };
return { data, names, subNames, metricConfigArr, metricTypesArr };
}
const dashboardStore = useDashboardStore();
const params = await expressionsGraphqlPods();
@ -284,7 +290,7 @@ export async function useExpressionsQueryPodsMetrics(
ElMessage.error(json.errors);
return {};
}
const { data, names, metricTypesArr, metricConfigArr } = expressionsPodsSource(json);
const expressionParams = expressionsPodsSource(json);
return { data, names, metricTypesArr, metricConfigArr };
return expressionParams;
}

2
src/hooks/useListConfig.ts
View File

@ -17,7 +17,7 @@
import { MetricQueryTypes, Calculations } from "./data";
import { MetricModes } from "@/views/dashboard/data";
export function useListConfig(config: Indexable, index: string) {
export function useListConfig(config: Indexable, index: number) {
if (config.metricModes === MetricModes.Expression) {
return {
isLinear: false,

9
src/views/dashboard/configuration/widget/metric/Index.vue
View File

@ -490,13 +490,14 @@ limitations under the License. -->
const metricConfig = config[index] ? config.splice(index, 1) : config;
let p = {};
if (isExpression.value) {
p = { typesOfMQE: states.metricTypes, expressions: states.metrics };
if (states.isList) {
states.subMetrics = [""];
states.subMetricTypes = [""];
states.subTips = [""];
states.subMetrics.splice(index, 1);
states.subMetricTypes.splice(index, 1);
states.subTips.splice(index, 1);
p = {
...p,
typesOfMQE: states.metricTypes,
expressions: states.metrics,
subTypesOfMQE: states.subMetricTypes,
subExpressions: states.subMetrics,
};

9
src/views/dashboard/graphs/EndpointList.vue
View File

@ -36,9 +36,9 @@ limitations under the License. -->
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:colSubMetrics="colSubMetrics"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@ -103,6 +103,7 @@ limitations under the License. -->
const endpoints = ref<Endpoint[]>([]);
const searchText = ref<string>("");
const colMetrics = ref<string[]>([]);
const colSubMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
const metricMode = ref<string>(props.config.metricMode);
@ -180,11 +181,13 @@ limitations under the License. -->
colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
colSubMetrics.value = params.colSubMetrics;
return;
}
endpoints.value = currentPods;
colMetrics.value = [];
colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
@ -230,9 +233,9 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
.tips {
color: rgba(255, 0, 0, 0.5);
color: rgb(255 0 0 / 50%);
}
</style>

7
src/views/dashboard/graphs/InstanceList.vue
View File

@ -35,9 +35,9 @@ limitations under the License. -->
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:colSubMetrics="colSubMetrics"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@ -130,6 +130,7 @@ limitations under the License. -->
const pageSize = 10;
const searchText = ref<string>("");
const colMetrics = ref<string[]>([]);
const colSubMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
const pods = ref<Instance[]>([]); // all instances
@ -213,12 +214,14 @@ limitations under the License. -->
);
instances.value = params.data;
colMetrics.value = params.names;
colSubMetrics.value = params.colSubMetrics;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
instances.value = currentInstances;
colSubMetrics.value = [];
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
@ -281,7 +284,7 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
.attributes {
max-height: 400px;

7
src/views/dashboard/graphs/ServiceList.vue
View File

@ -47,9 +47,9 @@ limitations under the License. -->
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:colSubMetrics="colSubMetrics"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@ -121,6 +121,7 @@ limitations under the License. -->
const pageSize = 10;
const services = ref<Service[]>([]);
const colMetrics = ref<string[]>([]);
const colSubMetrics = ref<string[]>([]);
const searchText = ref<string>("");
const groups = ref<any>({});
const sortServices = ref<(Service & { merge: boolean })[]>([]);
@ -261,12 +262,14 @@ limitations under the License. -->
);
services.value = params.data;
colMetrics.value = params.names;
colSubMetrics.value = params.subNames;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
services.value = currentServices;
colMetrics.value = [];
colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
@ -329,5 +332,5 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
</style>

11
src/views/dashboard/graphs/components/ColumnGraph.vue
View File

@ -48,7 +48,8 @@ limitations under the License. -->
<div class="view-line">
<Line
:data="{
[metric]: scope.row[metric] && scope.row[metric].values,
[colSubMetrics[index] || metric]:
scope.row[colSubMetrics[index] || metric] && scope.row[colSubMetrics[index] || metric].values,
}"
:intervalTime="intervalTime"
:config="{
@ -86,11 +87,11 @@ limitations under the License. -->
/*global defineProps */
const props = defineProps({
colMetrics: { type: Object },
colMetrics: { type: Array as PropType<string[]>, default: () => [] },
colSubMetrics: { type: Array as PropType<string[]>, default: () => [] },
config: {
type: Object as PropType<{
i: string;
metrics: string[];
metricTypes: string[];
metricConfig: MetricConfigOpt[];
metricMode: string;
@ -100,7 +101,7 @@ limitations under the License. -->
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
});
function getUnit(index: string) {
function getUnit(index: number) {
const i = Number(index);
const u = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].unit;
if (u) {
@ -108,7 +109,7 @@ limitations under the License. -->
}
return encodeURIComponent("");
}
function getLabel(metric: string, index: string) {
function getLabel(metric: string, index: number) {
const i = Number(index);
const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
if (label) {