You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2022/04/01 05:27:55 UTC
[skywalking-booster-ui] branch main updated: fix: update style and set labels (#50)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 63d21be fix: update style and set labels (#50)
63d21be is described below
commit 63d21becdebc5cb92a178dddc57934a57d0862b0
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Fri Apr 1 13:27:49 2022 +0800
fix: update style and set labels (#50)
---
src/layout/components/NavBar.vue | 3 ++-
src/views/dashboard/configuration/Widget.vue | 16 +--------------
.../configuration/widget/metric/Index.vue | 4 +---
.../configuration/widget/metric/Standard.vue | 15 ++++++++++----
src/views/dashboard/graphs/EndpointList.vue | 23 +++++++++++++++-------
src/views/dashboard/graphs/InstanceList.vue | 22 ++++++++++++++++-----
src/views/dashboard/graphs/ServiceList.vue | 21 +++++++++++++++-----
src/views/dashboard/panel/Tool.vue | 2 +-
8 files changed, 65 insertions(+), 41 deletions(-)
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 8a00623..126619c 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -34,7 +34,8 @@ limitations under the License. -->
<el-popover
trigger="hover"
width="250"
- placement="left-end"
+ placement="bottom"
+ effect="light"
:content="appStore.version"
>
<template #reference>
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index ad7c734..9e80429 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -37,8 +37,6 @@ limitations under the License. -->
metricTypes: dashboardStore.selectedGrid.metricTypes,
metricConfig: dashboardStore.selectedGrid.metricConfig,
}"
- :isEdit="isEdit"
- @changeOpt="setStatus"
/>
<div v-show="!graph.type" class="no-data">
{{ t("noData") }}
@@ -51,11 +49,7 @@ limitations under the License. -->
:style="{ '--el-collapse-header-font-size': '15px' }"
>
<el-collapse-item :title="t('selectVisualization')" name="1">
- <MetricOptions
- @update="getSource"
- @changeOpt="setStatus"
- @loading="setLoading"
- />
+ <MetricOptions @update="getSource" @loading="setLoading" />
</el-collapse-item>
<el-collapse-item :title="t('graphStyles')" name="2">
<component :is="`${graph.type}Config`" />
@@ -100,7 +94,6 @@ export default defineComponent({
const dashboardStore = useDashboardStore();
const appStoreWithOut = useAppStoreWithOut();
const loading = ref<boolean>(false);
- const isEdit = ref<boolean>(false);
const states = reactive<{
activeNames: string;
source: unknown;
@@ -128,14 +121,9 @@ export default defineComponent({
function applyConfig() {
dashboardStore.setConfigPanel(false);
- setStatus();
dashboardStore.setConfigs(dashboardStore.selectedGrid);
}
- function setStatus() {
- isEdit.value = true;
- }
-
function cancelConfig() {
dashboardStore.selectWidget(originConfig);
dashboardStore.setConfigPanel(false);
@@ -152,8 +140,6 @@ export default defineComponent({
cancelConfig,
getSource,
setLoading,
- setStatus,
- isEdit,
widget,
graph,
title,
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index 6c156ef..14cb836 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -120,7 +120,7 @@ import Standard from "./Standard.vue";
/*global defineEmits */
const { t } = useI18n();
-const emit = defineEmits(["update", "loading", "changeOpt"]);
+const emit = defineEmits(["update", "loading"]);
const dashboardStore = useDashboardStore();
const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
@@ -308,7 +308,6 @@ function changeMetrics(
...{ metricTypes: states.metricTypes, metrics: states.metrics },
});
if (states.isList) {
- emit("changeOpt");
return;
}
queryMetrics();
@@ -339,7 +338,6 @@ function changeMetricType(index: number, opt: Option[] | any) {
...{ metricTypes: states.metricTypes },
});
if (states.isList) {
- emit("changeOpt");
return;
}
queryMetrics();
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 47a3fbf..1620412 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -26,7 +26,7 @@ limitations under the License. -->
"
/>
</div>
- <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
+ <div class="item mb-10" v-if="hasLabel">
<span class="label">{{ t("labels") }}</span>
<el-input
class="input"
@@ -40,7 +40,7 @@ limitations under the License. -->
"
/>
</div>
- <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
+ <div class="item mb-10" v-if="metricType === 'readLabeledMetricsValues'">
<span class="label">{{ t("labelsIndex") }}</span>
<el-input
class="input"
@@ -95,6 +95,7 @@ import { useI18n } from "vue-i18n";
import { SortOrder, CalculationOpts } from "../../../data";
import { useDashboardStore } from "@/store/modules/dashboard";
import { MetricConfigOpt } from "@/types/dashboard";
+import { ListChartTypes } from "../../../data";
/*global defineEmits, defineProps */
const props = defineProps({
@@ -113,6 +114,13 @@ const currentMetric = ref<MetricConfigOpt>({
});
const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
const metricType = ref<string>(metricTypes[props.index]);
+const hasLabel = computed(() => {
+ const graph = dashboardStore.selectedGrid.graph || {};
+ return (
+ ListChartTypes.includes(graph.type) ||
+ metricType.value === "readLabeledMetricsValues"
+ );
+});
const isTopn = computed(() =>
["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index])
);
@@ -121,7 +129,7 @@ function updateConfig(index: number, param: { [key: string]: string }) {
if (!key) {
return;
}
- changeConfigs(index, { key: decodeURIComponent(param[key]) });
+ changeConfigs(index, { [key]: decodeURIComponent(param[key]) });
}
function changeConfigs(
index: number,
@@ -130,7 +138,6 @@ function changeConfigs(
const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
metricConfig[index] = { ...metricConfig[index], ...param };
- currentMetric.value = metricConfig[index];
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
metricConfig,
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 41bba2c..5292469 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -44,7 +44,9 @@ limitations under the License. -->
</el-table-column>
<el-table-column
v-for="(metric, index) in colMetrics"
- :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
+ :label="`${decodeURIComponent(
+ getLabel(metric, index)
+ )} ${decodeURIComponent(getUnit(index))}`"
:key="metric + index"
>
<template #default="scope">
@@ -110,7 +112,6 @@ const props = defineProps({
}),
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
- isEdit: { type: Boolean, default: false },
});
// const emit = defineEmits(["changeOpt"]);
const selectorStore = useSelectorStore();
@@ -183,20 +184,28 @@ async function searchList() {
}
function getUnit(index: number) {
const u =
- (props.config.metricConfig &&
- props.config.metricConfig[index] &&
- props.config.metricConfig[index].unit) ||
- "";
+ props.config.metricConfig &&
+ props.config.metricConfig[index] &&
+ props.config.metricConfig[index].unit;
if (u) {
return `(${encodeURIComponent(u)})`;
}
return encodeURIComponent("");
}
+function getLabel(metric: string, index: number) {
+ const label =
+ props.config.metricConfig &&
+ props.config.metricConfig[index] &&
+ props.config.metricConfig[index].label;
+ if (label) {
+ return encodeURIComponent(label);
+ }
+ return encodeURIComponent(metric);
+}
watch(
() => [props.config.metricTypes, props.config.metrics],
async () => {
queryEndpointMetrics(endpoints.value);
- // emit("changeOpt", false);
}
);
watch(
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index b0291fb..ee52ffb 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -44,7 +44,9 @@ limitations under the License. -->
</el-table-column>
<el-table-column
v-for="(metric, index) in colMetrics"
- :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
+ :label="`${decodeURIComponent(
+ getLabel(metric, index)
+ )} ${decodeURIComponent(getUnit(index))}`"
:key="metric + index"
>
<template #default="scope">
@@ -234,16 +236,26 @@ function searchList() {
function getUnit(index: number) {
const u =
- (props.config.metricConfig &&
- props.config.metricConfig[index] &&
- props.config.metricConfig[index].unit) ||
- "";
+ props.config.metricConfig &&
+ props.config.metricConfig[index] &&
+ props.config.metricConfig[index].unit;
if (u) {
return `(${encodeURIComponent(u)})`;
}
return encodeURIComponent("");
}
+function getLabel(metric: string, index: number) {
+ const label =
+ props.config.metricConfig &&
+ props.config.metricConfig[index] &&
+ props.config.metricConfig[index].label;
+ if (label) {
+ return encodeURIComponent(label);
+ }
+ return encodeURIComponent(metric);
+}
+
watch(
() => [props.config.metricTypes, props.config.metrics],
() => {
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 8147ef0..00f6fd6 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -56,7 +56,9 @@ limitations under the License. -->
</el-table-column>
<el-table-column
v-for="(metric, index) in colMetrics"
- :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
+ :label="`${decodeURIComponent(
+ getLabel(metric, index)
+ )} ${decodeURIComponent(getUnit(index))}`"
:key="metric + index"
>
<template #default="scope">
@@ -276,15 +278,24 @@ function searchList() {
}
function getUnit(index: number) {
const u =
- (props.config.metricConfig &&
- props.config.metricConfig[index] &&
- props.config.metricConfig[index].unit) ||
- "";
+ props.config.metricConfig &&
+ props.config.metricConfig[index] &&
+ props.config.metricConfig[index].unit;
if (u) {
return `(${encodeURIComponent(u)})`;
}
return encodeURIComponent("");
}
+function getLabel(metric: string, index: number) {
+ const label =
+ props.config.metricConfig &&
+ props.config.metricConfig[index] &&
+ props.config.metricConfig[index].label;
+ if (label) {
+ return encodeURIComponent(label);
+ }
+ return encodeURIComponent(metric);
+}
watch(
() => [props.config.metricTypes, props.config.metrics],
() => {
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 7bc42a9..56b9207 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -98,7 +98,7 @@ limitations under the License. -->
</el-dropdown-menu>
</template>
</el-dropdown>
- <el-tooltip content="Apply" placement="bottom">
+ <el-tooltip content="Apply" placement="bottom" effect="light">
<i @click="applyDashboard">
<Icon class="icon-btn" size="sm" iconName="save" />
</i>