github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-17 16:15:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

update LayoutConfig

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-30 13:55:38 +08:00
parent cda73845bb
commit 88afe29ebb
10 changed files with 116 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/hooks/useProcessor.ts
View File

@ -28,6 +28,9 @@ export function useQueryProcessor(config: any) {
if (!(config.metrics && config.metrics[0])) {
return;
}
if (!(config.metricTypes && config.metricTypes[0])) {
return;
}
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
@ -221,6 +224,12 @@ export function useQueryPodsMetrics(
config: { metrics: string[]; metricTypes: string[] },
scope: string
) {
if (!(config.metrics && config.metrics[0])) {
return;
}
if (!(config.metricTypes && config.metricTypes[0])) {
return;
}
const appStore = useAppStoreWithOut();
const selectorStore = useSelectorStore();
const conditions: { [key: string]: unknown } = {

8
src/store/data.ts
View File

@ -21,14 +21,6 @@ export const NewControl = {
h: 12,
i: "0",
type: "Widget",
widget: {
title: "",
},
graph: {},
standard: {},
metrics: [""],
metricTypes: [""],
metricConfig: [],
};
export const TextConfig = {
fontColor: "white",

25
src/types/dashboard.ts
View File

@ -28,13 +28,12 @@ export interface LayoutConfig {
w: number;
h: number;
i: string;
widget: WidgetConfig;
graph: GraphConfig;
standard: StandardConfig;
metrics: string[];
widget?: WidgetConfig;
graph?: GraphConfig;
metrics?: string[];
type: string;
metricTypes: string[];
children?: any;
metricTypes?: string[];
children?: { name: string; children: LayoutConfig[] }[];
activedTabIndex?: number;
metricConfig?: MetricConfigOpt[];
}
@ -53,20 +52,6 @@ export interface WidgetConfig {
tips?: string;
}
export interface StandardConfig {
sortOrder?: string;
unit?: string;
labelsIndex?: string;
metricLabels?: string;
plus?: string;
minus?: string;
multiply?: string;
divide?: string;
milliseconds?: string;
seconds?: string;
maxItemNum?: number;
}
export type GraphConfig =
| BarConfig
| LineConfig

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

@ -16,20 +16,20 @@ limitations under the License. -->
<div class="widget-config flex-v">
<div class="graph" v-loading="loading">
<div class="header">
<span>{{ dashboardStore.selectedGrid.widget.title || "" }}</span>
<div class="tips" v-show="dashboardStore.selectedGrid.widget.tips">
<el-tooltip :content="dashboardStore.selectedGrid.widget.tips || ''">
<span>{{ widget.title || "" }}</span>
<div class="tips" v-show="widget.tips">
<el-tooltip :content="widget.tips || ''">
<Icon iconName="info_outline" size="sm" />
</el-tooltip>
</div>
</div>
<div class="render-chart">
<component
:is="dashboardStore.selectedGrid.graph.type"
:is="graph.type"
:intervalTime="appStoreWithOut.intervalTime"
:data="states.source"
:config="{
...dashboardStore.selectedGrid.graph,
...graph,
i: dashboardStore.selectedGrid.i,
metrics: dashboardStore.selectedGrid.metrics,
metricTypes: dashboardStore.selectedGrid.metricTypes,
@ -38,7 +38,7 @@ limitations under the License. -->
:isEdit="isEdit"
@changeOpt="setStatus"
/>
<div v-show="!dashboardStore.selectedGrid.graph.type" class="no-data">
<div v-show="!graph.type" class="no-data">
{{ t("noData") }}
</div>
</div>
@ -56,7 +56,7 @@ limitations under the License. -->
/>
</el-collapse-item>
<el-collapse-item :title="t('graphStyles')" name="2">
<component :is="`${dashboardStore.selectedGrid.graph.type}Config`" />
<component :is="`${graph.type}Config`" />
</el-collapse-item>
<el-collapse-item :title="t('widgetOptions')" name="3">
<WidgetOptions />
@ -74,7 +74,7 @@ limitations under the License. -->
</div>
</template>
<script lang="ts">
import { reactive, defineComponent, ref } from "vue";
import { reactive, defineComponent, ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app";
@ -111,6 +111,8 @@ export default defineComponent({
visType: [],
});
const originConfig = dashboardStore.selectedGrid;
const widget = computed(() => dashboardStore.selectedGrid.widget || {});
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
function getSource(source: unknown) {
states.source = source;
@ -148,6 +150,8 @@ export default defineComponent({
setLoading,
setStatus,
isEdit,
widget,
graph,
};
},
});

7
src/views/dashboard/configuration/widget/WidgetOptions.vue
View File

@ -42,12 +42,13 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const title = ref<string>(selectedGrid.widget.title || "");
const tips = ref<string>(selectedGrid.widget.tips || "");
const widget = dashboardStore.selectedGrid.widget || {};
const title = ref<string>(widget.title || "");
const tips = ref<string>(widget.tips || "");
function updateWidgetConfig(param: { [key: string]: unknown }) {
const widget = {
...selectedGrid.widget,
...dashboardStore.selectedGrid.widget,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, widget });

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

@ -43,9 +43,7 @@ limitations under the License. -->
:value="states.metricTypes[index]"
:options="states.metricTypeList[index]"
size="small"
:disabled="
dashboardStore.selectedGrid.graph.type && !states.isList && index !== 0
"
:disabled="graph.type && !states.isList && index !== 0"
@change="changeMetricType(index, $event)"
class="selectors"
/>
@ -85,11 +83,11 @@ limitations under the License. -->
<div>{{ t("visualization") }}</div>
<div class="chart-types">
<span
v-for="(type, index) in states.visTypes"
v-for="(type, index) in setVisTypes"
:key="index"
@click="changeChartType(type)"
:class="{
active: type.value === dashboardStore.selectedGrid.graph.type,
active: type.value === graph.type,
}"
>
{{ type.label }}
@ -97,7 +95,7 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { reactive, ref, computed } from "vue";
import { Option } from "@/types/app";
import { useDashboardStore } from "@/store/modules/dashboard";
import {
@ -124,24 +122,26 @@ import Standard from "./Standard.vue";
const { t } = useI18n();
const emit = defineEmits(["update", "loading", "changeOpt"]);
const dashboardStore = useDashboardStore();
const { metrics, metricTypes, graph } = dashboardStore.selectedGrid;
const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const metricTypes = computed(
() => dashboardStore.selectedGrid.metricTypes || []
);
const states = reactive<{
metrics: string[];
metricTypes: string[];
metricTypeList: Option[][];
visTypes: Option[];
isList: boolean;
metricList: (Option & { type: string })[];
dashboardName: string;
dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
}>({
metrics: metrics && metrics.length ? metrics : [""],
metricTypes: metricTypes && metricTypes.length ? metricTypes : [""],
metrics: metrics.value.length ? metrics.value : [""],
metricTypes: metricTypes.value.length ? metricTypes.value : [""],
metricTypeList: [],
visTypes: [],
isList: false,
metricList: [],
dashboardName: graph.dashboardName,
dashboardName: graph.value.dashboardName,
dashboardList: [{ label: "", value: "" }],
});
const currentMetricConfig = ref<MetricConfigOpt>({
@ -152,15 +152,33 @@ const currentMetricConfig = ref<MetricConfigOpt>({
sortOrder: "DES",
});
states.isList = ListChartTypes.includes(graph.type);
states.isList = ListChartTypes.includes(graph.value.type);
const defaultLen = ref<number>(states.isList ? 5 : 20);
states.visTypes = setVisTypes();
setDashboards();
setMetricType();
const setVisTypes = computed(() => {
let graphs = [];
if (dashboardStore.entity === EntityType[0].value) {
graphs = ChartTypes.filter(
(d: Option) =>
![ChartTypes[7].value, ChartTypes[8].value].includes(d.value)
);
} else if (dashboardStore.entity === EntityType[1].value) {
graphs = ChartTypes.filter(
(d: Option) => !PodsChartTypes.includes(d.value)
);
} else {
graphs = ChartTypes.filter(
(d: Option) => !ListChartTypes.includes(d.value)
);
}
return graphs;
});
async function setMetricType(chart?: any) {
const graph = chart || dashboardStore.selectedGrid.graph;
const g = chart || dashboardStore.selectedGrid.graph || {};
const json = await dashboardStore.fetchMetricList();
if (json.errors) {
ElMessage.error(json.errors);
@ -172,7 +190,7 @@ async function setMetricType(chart?: any) {
if (d.type === MetricsType.REGULAR_VALUE) {
return d;
}
} else if (graph.type === "Table") {
} else if (g.type === "Table") {
if (
d.type === MetricsType.LABELED_VALUE ||
d.type === MetricsType.REGULAR_VALUE
@ -203,7 +221,7 @@ async function setMetricType(chart?: any) {
...dashboardStore.selectedGrid,
metrics: states.metrics,
metricTypes: states.metricTypes,
graph,
graph: g,
});
states.metricTypeList = [];
for (const metric of metrics) {
@ -220,7 +238,7 @@ async function setMetricType(chart?: any) {
}
function setDashboards(type?: string) {
const graph = type || dashboardStore.selectedGrid.graph;
const chart = type || dashboardStore.selectedGrid.graph || {};
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
const arr = list.reduce(
(
@ -229,9 +247,9 @@ function setDashboards(type?: string) {
) => {
if (d.layer === dashboardStore.layerId) {
if (
(d.entity === EntityType[0].value && graph.type === "ServiceList") ||
(d.entity === EntityType[2].value && graph.type === "EndpointList") ||
(d.entity === EntityType[3].value && graph.type === "InstanceList")
(d.entity === EntityType[0].value && chart.type === "ServiceList") ||
(d.entity === EntityType[2].value && chart.type === "EndpointList") ||
(d.entity === EntityType[3].value && chart.type === "InstanceList")
) {
prev.push({
...d,
@ -248,26 +266,9 @@ function setDashboards(type?: string) {
states.dashboardList = arr.length ? arr : [{ label: "", value: "" }];
}
function setVisTypes() {
let graphs = [];
if (dashboardStore.entity === EntityType[0].value) {
graphs = ChartTypes.filter((d: Option) => d.value !== ChartTypes[7].value);
} else if (dashboardStore.entity === EntityType[1].value) {
graphs = ChartTypes.filter(
(d: Option) => !PodsChartTypes.includes(d.value)
);
} else {
graphs = ChartTypes.filter(
(d: Option) => !ListChartTypes.includes(d.value)
);
}
return graphs;
}
function changeChartType(item: Option) {
const graph = DefaultGraphConfig[item.value];
states.isList = ListChartTypes.includes(graph.type);
const chart = DefaultGraphConfig[item.value] || {};
states.isList = ListChartTypes.includes(chart.type);
if (states.isList) {
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
@ -278,8 +279,8 @@ function changeChartType(item: Option) {
states.metricTypes = [""];
defaultLen.value = 5;
}
setMetricType(graph);
setDashboards(graph.type);
setMetricType(chart);
setDashboards(chart.type);
states.dashboardName = "";
defaultLen.value = 10;
}
@ -415,7 +416,7 @@ function setMetricTypeList(type: string) {
if (type !== MetricsType.REGULAR_VALUE) {
return MetricTypes[type];
}
if (states.isList || dashboardStore.selectedGrid.graph.type === "Table") {
if (states.isList || graph.value.type === "Table") {
return [
{ label: "read all values in the duration", value: "readMetricsValues" },
{

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

@ -17,17 +17,17 @@ limitations under the License. -->
<div class="header flex-h">
<div>
<span>
{{ data.widget?.title || "" }}
{{ widget.title || "" }}
</span>
</div>
<div>
<el-tooltip :content="data.widget?.tips">
<el-tooltip :content="widget.tips || ''">
<span>
<Icon
iconName="info_outline"
size="sm"
class="operation"
v-show="data.widget?.tips"
v-show="widget.tips"
/>
</span>
</el-tooltip>
@ -51,15 +51,15 @@ limitations under the License. -->
</el-popover>
</div>
</div>
<div class="body" v-if="data.graph?.type" v-loading="loading">
<div class="body" v-if="graph.type" v-loading="loading">
<component
:is="data.graph.type"
:is="graph.type"
:intervalTime="appStore.intervalTime"
:data="state.source"
:config="{
...data.graph,
metrics: data.metrics,
metricTypes: data.metricTypes,
metrics: data.metrics || [''],
metricTypes: data.metricTypes || [''],
i: data.i,
metricConfig: data.metricConfig,
}"
@ -70,7 +70,7 @@ limitations under the License. -->
</div>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, ref, watch } from "vue";
import { toRefs, reactive, defineComponent, ref, watch, computed } from "vue";
import type { PropType } from "vue";
import { LayoutConfig } from "@/types/dashboard";
import { useDashboardStore } from "@/store/modules/dashboard";
@ -88,7 +88,7 @@ import { EntityType, ListChartTypes } from "../data";
const props = {
data: {
type: Object as PropType<LayoutConfig>,
default: () => ({ widget: {} }),
default: () => ({ widget: {}, graph: {} }),
},
activeIndex: { type: String, default: "" },
needQuery: { type: Boolean, default: false },
@ -107,14 +107,19 @@ export default defineComponent({
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
const isList = ListChartTypes.includes(props.data.graph.type || "");
const graph = computed(() => props.data.graph || {});
const widget = computed(() => props.data.widget || {});
const isList = ListChartTypes.includes(
(props.data.graph && props.data.graph.type) || ""
);
if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList) {
queryMetrics();
}
async function queryMetrics() {
const { metricTypes, metrics } = props.data;
const metricTypes = props.data.metricTypes || [];
const metrics = props.data.metrics || [];
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
const params = await useQueryProcessor({ ...props.data, catalog });
@ -129,8 +134,8 @@ export default defineComponent({
return;
}
const d = {
metrics: props.data.metrics,
metricTypes: props.data.metricTypes,
metrics: props.data.metrics || [],
metricTypes: props.data.metricTypes || [],
metricConfig: props.data.metricConfig || [],
};
state.source = useSourceProcessor(json, d);
@ -149,7 +154,7 @@ export default defineComponent({
}
}
watch(
() => [props.data.metricTypes, props.data.metrics, props.data.standard],
() => [props.data.metricTypes, props.data.metrics],
() => {
if (!dashboardStore.selectedGrid) {
return;
@ -157,7 +162,9 @@ export default defineComponent({
if (props.data.i !== dashboardStore.selectedGrid.i) {
return;
}
const isList = ListChartTypes.includes(props.data.graph.type || "");
const isList = ListChartTypes.includes(
(props.data.graph && props.data.graph.type) || ""
);
if (
ListChartTypes.includes(dashboardStore.selectedGrid.graph.type) ||
isList
@ -170,7 +177,9 @@ export default defineComponent({
watch(
() => [selectorStore.currentService, selectorStore.currentDestService],
() => {
const isList = ListChartTypes.includes(props.data.graph.type || "");
const isList = ListChartTypes.includes(
(props.data.graph && props.data.graph.type) || ""
);
if (isList) {
return;
}
@ -209,6 +218,8 @@ export default defineComponent({
loading,
dashboardStore,
t,
graph,
widget,
};
},
});

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

@ -96,7 +96,13 @@ const props = defineProps({
metricTypes: string[];
} & { metricConfig: MetricConfigOpt[] }
>,
default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
default: () => ({
metrics: [],
metricTypes: [],
dashboardName: "",
fontSize: 12,
i: "",
}),
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
isEdit: { type: Boolean, default: false },
@ -128,9 +134,9 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
if (!currentPods.length) {
return;
}
const metrics = props.config.metrics.filter((d: string) => d);
if (metrics.length && metrics[0]) {
const metrics = (props.config.metrics || []).filter((d: string) => d);
const metricTypes = props.config.metricTypes || [];
if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
const params = await useQueryPodsMetrics(
currentPods,
props.config,

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

@ -166,9 +166,9 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
if (!currentInstances.length) {
return;
}
const { metrics } = props.config;
const { metrics, metricTypes } = props.config;
if (metrics.length && metrics[0]) {
if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
const params = await useQueryPodsMetrics(
currentInstances,
props.config,

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

@ -210,9 +210,9 @@ async function queryServiceMetrics(currentServices: Service[]) {
if (!currentServices.length) {
return;
}
const { metrics } = props.config;
const { metrics, metricTypes } = props.config;
if (metrics.length && metrics[0]) {
if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
const params = await useQueryPodsMetrics(
currentServices,
props.config,