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

feat: update

Browse Source
This commit is contained in:
Fine 2023-06-09 10:31:08 +08:00
commit a0f4f8a4fa
22 changed files with 1910 additions and 623 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1986
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -72,9 +72,9 @@
"stylelint-config-standard": "^33.0.0",
"stylelint-order": "^6.0.3",
"typescript": "~4.7.4",
"unplugin-auto-import": "^0.16.4",
"unplugin-vue-components": "^0.25.0",
"vite": "^4.0.0",
"unplugin-auto-import": "^0.7.0",
"unplugin-vue-components": "^0.19.2",
"vite": "^4.0.5",
"vite-plugin-monaco-editor": "^1.1.0",
"vite-plugin-svg-icons": "^2.0.1",
"vitest": "^0.25.6",

9
src/graphql/fragments/dashboard.ts
View File

@ -68,12 +68,3 @@ export const deleteTemplate = {
message
}`,
};
export const TypeOfMQE = {
variable: "$expression: String!",
query: `
metricType: returnTypeOfMQE(expression: $expression) {
type
error
}
`,
};

3
src/graphql/query/dashboard.ts
View File

@ -21,7 +21,6 @@ import {
addTemplate,
changeTemplate,
deleteTemplate,
TypeOfMQE,
} from "../fragments/dashboard";
export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
@ -35,5 +34,3 @@ export const updateTemplate = `mutation template(${changeTemplate.variable}) {${
export const removeTemplate = `mutation template(${deleteTemplate.variable}) {${deleteTemplate.query}}`;
export const getTemplates = `query templates {${getAllTemplates.query}}`;
export const getTypeOfMQE = `query returnTypeOfMQE(${TypeOfMQE.variable}) {${TypeOfMQE.query}}`;

1
src/hooks/data.ts
View File

@ -116,7 +116,6 @@ export const RespFields: Indexable = {
type
results {
metric {
name
labels {
key
value

91
src/hooks/useExpressionsProcessor.ts
View File

@ -23,13 +23,11 @@ import { useAppStoreWithOut } from "@/store/modules/app";
import type { MetricConfigOpt } from "@/types/dashboard";
import type { Instance, Endpoint, Service } from "@/types/selector";
export function useExpressionsQueryProcessor(config: Indexable) {
export async function useExpressionsQueryProcessor(config: Indexable) {
function expressionsGraphqlPods() {
if (!(config.metrics && config.metrics[0])) {
return;
}
if (!(config.metricTypes && config.metricTypes[0])) {
return;
}
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
@ -87,32 +85,32 @@ export function useExpressionsQueryProcessor(config: Indexable) {
queryStr,
conditions,
};
}
}
export function useExpressionsSourceProcessor(
resp: { errors: string; data: Indexable },
config: {
metrics: string[];
metricTypes: string[];
metricConfig: MetricConfigOpt[];
},
) {
function expressionsSource(resp: { errors: string; data: Indexable }) {
if (resp.errors) {
ElMessage.error(resp.errors);
return {};
return { source: {}, tips: [], typesOfMQE: [] };
}
if (!resp.data) {
ElMessage.error("The query is wrong");
return {};
return { source: {}, tips: [], typesOfMQE: [] };
}
const tips: string[] = [];
const source: { [key: string]: unknown } = {};
const keys = Object.keys(resp.data);
for (let i = 0; i < config.metricTypes.length; i++) {
const type = config.metricTypes[i];
const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
const results = (resp.data[keys[i]] && resp.data[keys[i]].results) || [];
const name = ((results[0] || {}).metric || {}).name;
const typesOfMQE: string[] = [];
for (let i = 0; i < config.metrics.length; i++) {
const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
const obj = resp.data[keys[i]] || {};
const results = obj.results || [];
const name = config.metrics[i];
const type = obj.type;
tips.push(obj.error);
typesOfMQE.push(type);
if (!obj.error) {
if (type === ExpressionResultType.TIME_SERIES_VALUES) {
if (results.length === 1) {
source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
@ -137,15 +135,30 @@ export function useExpressionsSourceProcessor(
source[name] = results[0].values;
}
}
}
return source;
return { source, tips, typesOfMQE };
}
const params = await expressionsGraphqlPods();
if (!params) {
return { source: {}, tips: [], typesOfMQE: [] };
}
const dashboardStore = useDashboardStore();
const json = await dashboardStore.fetchMetricValue(params);
if (json.errors) {
ElMessage.error(json.errors);
return { source: {}, tips: [], typesOfMQE: [] };
}
const data = expressionsSource(json);
return data;
}
export async function useExpressionsQueryPodsMetrics(
pods: Array<(Instance | Endpoint | Service) & Indexable>,
config: {
expressions: string[];
typesOfMQE: string[];
subExpressions: string[];
metricConfig: MetricConfigOpt[];
},
@ -154,16 +167,13 @@ export async function useExpressionsQueryPodsMetrics(
function expressionsGraphqlPods() {
const metrics: string[] = [];
const subMetrics: string[] = [];
const metricTypes: string[] = [];
config.expressions = config.expressions || [];
config.subExpressions = config.subExpressions || [];
config.typesOfMQE = config.typesOfMQE || [];
for (let i = 0; i < config.expressions.length; i++) {
if (config.expressions[i]) {
metrics.push(config.expressions[i]);
subMetrics.push(config.subExpressions[i]);
metricTypes.push(config.typesOfMQE[i]);
}
}
if (!metrics.length) {
@ -214,16 +224,24 @@ export async function useExpressionsQueryPodsMetrics(
return {};
}
const names: string[] = [];
const subNames: string[] = [];
const metricConfigArr: MetricConfigOpt[] = [];
const metricTypesArr: string[] = [];
const expressionsTips: string[] = [];
const subExpressionsTips: string[] = [];
const data = pods.map((d: any, idx: number) => {
for (let index = 0; index < config.expressions.length; index++) {
const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[index]) || {};
const k = "expression" + idx + index;
const sub = "subexpression" + idx + index;
const results = (resp.data[k] && resp.data[k].results) || [];
const subResults = (resp.data[sub] && resp.data[sub].results) || [];
const obj = resp.data[k] || {};
const results = obj.results || [];
const typesOfMQE = obj.type || "";
const subObj = resp.data[sub] || {};
const subResults = subObj.results || [];
expressionsTips.push(obj.error);
subExpressionsTips.push(subObj.error);
if (results.length > 1) {
const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
@ -248,33 +266,38 @@ export async function useExpressionsQueryPodsMetrics(
if (!j) {
names.push(name);
metricConfigArr.push({ ...c, index: i });
metricTypesArr.push(config.typesOfMQE[index]);
metricTypesArr.push(typesOfMQE);
}
}
} else {
if (!results[0]) {
return d;
}
const name = results[0].metric.name || "";
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]);
metricTypesArr.push(typesOfMQE);
}
}
}
return d;
});
return { data, names, metricConfigArr, metricTypesArr };
return { data, names, subNames, metricConfigArr, metricTypesArr, expressionsTips, subExpressionsTips };
}
const dashboardStore = useDashboardStore();
const params = await expressionsGraphqlPods();
@ -284,7 +307,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,

3
src/locales/lang/en.ts
View File

@ -402,5 +402,8 @@ const msg = {
monitorInstances: "Monitor Instances",
processDashboards: "Process Dashboards",
instanceDashboards: "Instance Dashboards",
detailLabel: "Detail Label",
summary: "Summary",
detail: "Detail",
};
export default msg;

3
src/locales/lang/es.ts
View File

@ -401,5 +401,8 @@ const msg = {
monitorInstances: "Ejemplo de Monitor",
processDashboards: "Tablero de proceso",
instanceDashboards: "Tablero de ejemplo",
detailLabel: "Detail Label",
summary: "Summary",
detail: "Detail",
};
export default msg;

3
src/locales/lang/zh.ts
View File

@ -399,5 +399,8 @@ const msg = {
monitorInstances: "监视实例",
processDashboards: "进程仪表板",
instanceDashboards: "实例仪表板",
detailLabel: "详细标签",
summary: "概括",
detail: "详细",
};
export default msg;

2
src/types/app.d.ts vendored
View File

@ -42,7 +42,7 @@ export type EventParams = {
dataIndex: number;
data: unknown;
dataType: string;
value: number | Array<any>;
value: number | any[];
color: string;
event: any;
};

1
src/types/components.d.ts vendored
View File

@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']

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

@ -15,7 +15,6 @@
* limitations under the License.
*/
import { DurationTime } from "./app";
export type DashboardItem = {
id?: string;
entity: string;
@ -80,6 +79,7 @@ export type MetricConfigOpt = {
sortOrder?: string;
topN?: number;
index?: number;
detailLabel?: string;
};
export interface WidgetConfig {

24
src/views/dashboard/Widget.vue
View File

@ -57,7 +57,7 @@ limitations under the License. -->
import { useSelectorStore } from "@/store/modules/selectors";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import graphs from "./graphs";
import { EntityType } from "./data";
import timeFormat from "@/utils/timeFormat";
@ -130,11 +130,18 @@ limitations under the License. -->
}
async function queryMetrics() {
const isExpression = config.value.metricMode === MetricModes.Expression;
const params = isExpression
? await useExpressionsQueryProcessor({
...config.value,
})
: await useQueryProcessor({ ...config.value });
if (isExpression) {
loading.value = true;
const params = await useExpressionsQueryProcessor({
metrics: config.value.expressions || [],
metricConfig: config.value.metricConfig || [],
subExpressions: config.value.subExpressions || [],
});
loading.value = false;
source.value = params.source || {};
return;
}
const params = await useQueryProcessor({ ...config.value });
if (!params) {
source.value = {};
return;
@ -149,9 +156,8 @@ limitations under the License. -->
metrics: config.value.metrics || [],
metricTypes: config.value.metricTypes || [],
metricConfig: config.value.metricConfig || [],
subExpressions: config.value.subExpressions || [],
};
source.value = isExpression ? await useExpressionsSourceProcessor(json, d) : await useSourceProcessor(json, d);
source.value = await useSourceProcessor(json, d);
}
watch(
() => appStoreWithOut.durationTime,
@ -181,7 +187,7 @@ limitations under the License. -->
.widget-chart {
background: #fff;
box-shadow: 0px 1px 4px 0px #00000029;
box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px;
padding: 5px;
width: 100%;

13
src/views/dashboard/configuration/Widget.vue
View File

@ -45,6 +45,7 @@ limitations under the License. -->
subTypesOfMQE: dashboardStore.selectedGrid.subTypesOfMQE || [],
}"
:needQuery="true"
@expressionTips="getErrors"
/>
<div v-show="!graph.type" class="no-data">
{{ t("noData") }}
@ -54,7 +55,7 @@ limitations under the License. -->
<div class="collapse" :style="{ height: configHeight + 'px' }">
<el-collapse v-model="states.activeNames" :style="{ '--el-collapse-header-font-size': '15px' }">
<el-collapse-item :title="t('selectVisualization')" name="1">
<MetricOptions @update="getSource" @loading="setLoading" />
<MetricOptions @update="getSource" @loading="setLoading" :errors="errors" :subErrors="subErrors" />
</el-collapse-item>
<el-collapse-item :title="t('graphStyles')" name="2">
<component :is="`${graph.type}Config`" />
@ -102,6 +103,8 @@ limitations under the License. -->
const dashboardStore = useDashboardStore();
const appStoreWithOut = useAppStoreWithOut();
const loading = ref<boolean>(false);
const errors = ref<string[]>([]);
const subErrors = ref<string[]>([]);
const states = reactive<{
activeNames: string;
source: unknown;
@ -128,6 +131,11 @@ limitations under the License. -->
states.source = source;
}
function getErrors(params: { tips: string[]; subTips: string[] }) {
errors.value = params.tips;
subErrors.value = params.subTips;
}
function setLoading(load: boolean) {
loading.value = load;
}
@ -169,12 +177,15 @@ limitations under the License. -->
applyConfig,
cancelConfig,
getSource,
getErrors,
setLoading,
widget,
graph,
title,
tips,
hasAssociate,
errors,
subErrors,
};
},
});

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

@ -35,8 +35,8 @@ limitations under the License. -->
@change="changeMetricMode"
/>
<div v-if="isExpression && states.isList">
<span class="title">Summary</span>
<span>Detail</span>
<span class="title">{{ t("summary") }}</span>
<span>{{ t("detail") }}</span>
</div>
<div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
<span v-if="isExpression">
@ -93,8 +93,12 @@ limitations under the License. -->
/>
<Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
</span>
<div v-if="states.tips[index] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</div>
<div v-if="states.tips[index] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</div>
<div v-if="(errors || states.tips)[index] && isExpression" class="ml-10 red sm">
{{ (errors || states.tips)[index] }}
</div>
<div v-if="(subErrors || states.tips)[index] && isExpression" class="ml-10 red sm">
{{ (subErrors || states.tips)[index] }}
</div>
</div>
<div>{{ t("visualization") }}</div>
<div class="chart-types">
@ -102,9 +106,7 @@ limitations under the License. -->
v-for="(type, index) in setVisTypes"
:key="index"
@click="changeChartType(type)"
:class="{
active: type.value === graph.type,
}"
:class="{ active: type.value === graph.type }"
>
{{ type.label }}
</span>
@ -112,6 +114,7 @@ limitations under the License. -->
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import type { PropType } from "vue";
import type { Option } from "@/types/app";
import { useDashboardStore } from "@/store/modules/dashboard";
import {
@ -129,14 +132,23 @@ limitations under the License. -->
import { ElMessage } from "element-plus";
import Icon from "@/components/Icon.vue";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { useI18n } from "vue-i18n";
import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
import Standard from "./Standard.vue";
/*global defineEmits */
/*global defineEmits, Indexable */
const { t } = useI18n();
const emit = defineEmits(["update", "loading"]);
/*global defineProps */
defineProps({
errors: {
type: Array as PropType<string[]>,
},
subErrors: {
type: Array as PropType<string[]>,
},
});
const dashboardStore = useDashboardStore();
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
const metrics = computed(
@ -398,26 +410,20 @@ limitations under the License. -->
}
async function queryMetricsWithExpressions() {
const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid;
if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) {
const { expressions, metricConfig } = dashboardStore.selectedGrid;
if (!(expressions && expressions[0])) {
return emit("update", {});
}
const params = useExpressionsQueryProcessor({ ...states, metricConfig });
if (!params) {
emit("update", {});
return;
}
const params: Indexable = (await useExpressionsQueryProcessor({ ...states, metricConfig })) || {};
states.tips = params.tips || [];
states.metricTypes = params.typesOfMQE || [];
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
typesOfMQE: states.metricTypes,
});
emit("loading", true);
const json = await dashboardStore.fetchMetricValue(params);
emit("loading", false);
if (json.errors) {
ElMessage.error(json.errors);
return;
}
const source = useExpressionsSourceProcessor(json, { ...states, metricConfig });
emit("update", source);
emit("update", params.source || {});
}
function changeDashboard(opt: any) {
@ -490,13 +496,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,
};
@ -553,21 +560,10 @@ limitations under the License. -->
async function changeExpression(event: any, index: number) {
const params = (event.target.textContent || "").replace(/\s+/g, "");
if (params) {
const resp = await dashboardStore.getTypeOfMQE(params);
states.metrics[index] = params;
states.metricTypes[index] = resp.data.metricType.type;
states.tips[index] = resp.data.metricType.error || "";
} else {
states.metrics[index] = params;
states.metricTypes[index] = "";
states.tips[index] = "";
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
expressions: states.metrics,
typesOfMQE: states.metricTypes,
});
if (params) {
await queryMetrics();
@ -576,17 +572,7 @@ limitations under the License. -->
async function changeSubExpression(event: any, index: number) {
const params = (event.target.textContent || "").replace(/\s+/g, "");
if (params) {
const resp = await dashboardStore.getTypeOfMQE(params);
states.subMetrics[index] = params;
states.subMetricTypes[index] = resp.data.metricType.type;
states.subTips[index] = resp.data.metricType.error || "";
} else {
states.subMetrics[index] = params;
states.subMetricTypes[index] = "";
states.subTips[index] = "";
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
subExpressions: states.subMetrics,
@ -640,8 +626,8 @@ limitations under the License. -->
border-radius: 3px;
color: #606266;
outline: none;
height: 26px;
margin-right: 5px;
min-height: 26px;
&:focus {
border-color: #409eff;

29
src/views/dashboard/configuration/widget/metric/Standard.vue
View File

@ -34,7 +34,7 @@ limitations under the License. -->
class="input"
v-model="currentMetric.label"
size="small"
placeholder="Please input a name"
placeholder="Please input a label"
@change="
updateConfig(index, {
label: encodeURIComponent(currentMetric.label || ''),
@ -42,13 +42,21 @@ limitations under the License. -->
"
/>
</div>
<div
class="item mb-10"
v-if="
[ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) &&
dashboardStore.selectedGrid.metricMode === MetricModes.General
<div class="item mb-10" v-if="isList && isExpression">
<span class="label">{{ t("detailLabel") }}</span>
<el-input
class="input"
v-model="currentMetric.detailLabel"
size="small"
placeholder="Please input a label"
@change="
updateConfig(index, {
detailLabel: encodeURIComponent(currentMetric.detailLabel || ''),
})
"
>
/>
</div>
<div class="item mb-10" v-if="[ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) && !isExpression">
<span class="label">{{ t("labelsIndex") }}</span>
<el-input
class="input"
@ -57,7 +65,7 @@ limitations under the License. -->
placeholder="auto"
@change="
updateConfig(index, {
labelsIndex: encodeURIComponent(currentMetric.labelsIndex),
labelsIndex: encodeURIComponent(currentMetric.labelsIndex || ''),
})
"
/>
@ -136,6 +144,10 @@ limitations under the License. -->
].includes(metricType.value)
);
});
const isList = computed(() => {
const graph = dashboardStore.selectedGrid.graph || {};
return ListChartTypes.includes(graph.type);
});
const isTopn = computed(() =>
[ProtocolTypes.SortMetrics, ProtocolTypes.ReadSampledRecords, ProtocolTypes.ReadRecords].includes(
metricTypes.value[props.index],
@ -162,6 +174,7 @@ limitations under the License. -->
watch(
() => props.currentMetricConfig,
() => {
isExpression.value = dashboardStore.selectedGrid.metricMode === MetricModes.Expression;
currentMetric.value = {
...props.currentMetricConfig,
topN: Number(props.currentMetricConfig.topN) || 10,

28
src/views/dashboard/controls/Widget.vue
View File

@ -82,7 +82,7 @@ limitations under the License. -->
import graphs from "../graphs";
import { useI18n } from "vue-i18n";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor";
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { EntityType, ListChartTypes } from "../data";
import type { EventParams } from "@/types/dashboard";
import getDashboard from "@/hooks/useDashboardsSession";
@ -121,13 +121,18 @@ limitations under the License. -->
async function queryMetrics() {
const isExpression = props.data.metricMode === MetricModes.Expression;
const params = isExpression
? await useExpressionsQueryProcessor({
metrics: props.data.expressions,
metricTypes: props.data.typesOfMQE,
metricConfig: props.data.metricConfig,
})
: await useQueryProcessor({ ...props.data });
if (isExpression) {
loading.value = true;
const e = {
metrics: props.data.expressions || [],
metricConfig: props.data.metricConfig || [],
};
const params = (await useExpressionsQueryProcessor(e)) || {};
loading.value = false;
state.source = params.source || {};
return;
}
const params = await useQueryProcessor({ ...props.data });
if (!params) {
state.source = {};
@ -144,12 +149,7 @@ limitations under the License. -->
metricTypes: props.data.metricTypes || [],
metricConfig: props.data.metricConfig || [],
};
const e = {
metrics: props.data.expressions || [],
metricTypes: props.data.typesOfMQE || [],
metricConfig: props.data.metricConfig || [],
};
state.source = isExpression ? await useExpressionsSourceProcessor(json, e) : await useSourceProcessor(json, d);
state.source = await useSourceProcessor(json, d);
}
function removeWidget() {

17
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,
@ -96,6 +96,7 @@ limitations under the License. -->
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
});
const emit = defineEmits(["expressionTips"]);
const { t } = useI18n();
const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore();
@ -103,6 +104,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);
@ -167,26 +169,29 @@ limitations under the License. -->
}
async function queryEndpointExpressions(currentPods: Endpoint[]) {
const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
if (expressions.length && expressions[0]) {
const params = await useExpressionsQueryPodsMetrics(
currentPods,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
{ metricConfig: metricConfig.value || [], expressions, subExpressions },
EntityType[2].value,
);
endpoints.value = params.data;
colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
colSubMetrics.value = params.colSubMetrics;
emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
return;
}
endpoints.value = currentPods;
colMetrics.value = [];
colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
emit("expressionTips", [], []);
}
function clickEndpoint(scope: any) {
const { dashboard } = getDashboard({
@ -230,9 +235,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>

16
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,
@ -122,6 +122,7 @@ limitations under the License. -->
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
needQuery: { type: Boolean, default: false },
});
const emit = defineEmits(["expressionTips"]);
const { t } = useI18n();
const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore();
@ -130,6 +131,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
@ -192,6 +194,7 @@ limitations under the License. -->
colMetrics.value = names;
metricTypes.value = metricTypesArr;
metricConfig.value = metricConfigArr;
return;
}
instances.value = currentInstances;
@ -202,26 +205,29 @@ limitations under the License. -->
async function queryInstanceExpressions(currentInstances: Instance[]) {
const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
if (expressions.length && expressions[0]) {
const params = await useExpressionsQueryPodsMetrics(
currentInstances,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
{ metricConfig: metricConfig.value || [], expressions, subExpressions },
EntityType[3].value,
);
instances.value = params.data;
colMetrics.value = params.names;
colSubMetrics.value = params.colSubMetrics;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
return;
}
instances.value = currentInstances;
colSubMetrics.value = [];
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
emit("expressionTips", [], []);
}
function clickInstance(scope: any) {
@ -281,7 +287,7 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
.attributes {
max-height: 400px;

15
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,
@ -114,6 +114,7 @@ limitations under the License. -->
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
isEdit: { type: Boolean, default: false },
});
const emit = defineEmits(["expressionTips"]);
const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore();
const appStore = useAppStoreWithOut();
@ -121,6 +122,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 })[]>([]);
@ -250,25 +252,28 @@ limitations under the License. -->
}
async function queryServiceExpressions(currentServices: Service[]) {
const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
if (expressions.length && expressions[0]) {
const params = await useExpressionsQueryPodsMetrics(
currentServices,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
{ metricConfig: metricConfig.value || [], expressions, subExpressions },
EntityType[0].value,
);
services.value = params.data;
colMetrics.value = params.names;
colSubMetrics.value = params.subNames;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
emit("expressionTips", { tips: params.expressionsTips, subTips: params.subExpressionsTips });
return;
}
services.value = currentServices;
colMetrics.value = [];
colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
emit("expressionTips", [], []);
}
function objectSpanMethod(param: any): any {
if (!props.config.showGroup) {
@ -329,5 +334,5 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
</style>

21
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,
[decodeURIComponent(getLabel(colSubMetrics[index], index, true)) || 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,9 +109,15 @@ limitations under the License. -->
}
return encodeURIComponent("");
}
function getLabel(metric: string, index: string) {
function getLabel(metric: string, index: number, isDetail?: boolean) {
const i = Number(index);
const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
let label = "";
if (isDetail) {
label =
(props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].detailLabel) || "";
} else {
label = (props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label) || "";
}
if (label) {
if (
(
@ -128,7 +135,7 @@ limitations under the License. -->
}
return encodeURIComponent(label);
}
return encodeURIComponent(metric);
return encodeURIComponent(metric || "");
}
</script>
<style lang="scss" scoped>