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

update table

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-23 18:05:45 +08:00
parent 6b8491c542
commit 107a3d85dd
4 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/store/modules/dashboard.ts
View File

@ -227,6 +227,7 @@ export const dashboardStore = defineStore({
this.showConfig = show; this.showConfig = show;
}, },
selectWidget(item: Nullable<LayoutConfig>) { selectWidget(item: Nullable<LayoutConfig>) {
console.log(item);
this.selectedGrid = item; this.selectedGrid = item;
}, },
setLayer(id: string) { setLayer(id: string) {

6
src/views/dashboard/configuration/widget/MetricOptions.vue
View File

@ -144,10 +144,14 @@ async function setMetricType() {
} }
states.metricList = (json.data.metrics || []).filter( states.metricList = (json.data.metrics || []).filter(
(d: { catalog: string; type: string }) => { (d: { catalog: string; type: string }) => {
if (states.isList || graph.type === "Table") { if (states.isList) {
if (d.type === MetricsType.REGULAR_VALUE) { if (d.type === MetricsType.REGULAR_VALUE) {
return d; return d;
} }
} else if (graph.type === "Table") {
if (d.type === MetricsType.LABELED_VALUE) {
return d;
}
} else { } else {
return d; return d;
} }

6
src/views/dashboard/configuration/widget/StandardOptions.vue
View File

@ -33,7 +33,7 @@ limitations under the License. -->
@change="changeStandardOpt({ sortOrder })" @change="changeStandardOpt({ sortOrder })"
/> />
</div> </div>
<div class="item" v-show="percentile"> <div class="item">
<span class="label">{{ t("labels") }}</span> <span class="label">{{ t("labels") }}</span>
<el-input <el-input
class="input" class="input"
@ -43,7 +43,7 @@ limitations under the License. -->
@change="changeStandardOpt" @change="changeStandardOpt"
/> />
</div> </div>
<div class="item" v-show="percentile"> <div class="item">
<span class="label">{{ t("labelsIndex") }}</span> <span class="label">{{ t("labelsIndex") }}</span>
<el-input <el-input
class="input" class="input"
@ -134,7 +134,7 @@ const emit = defineEmits(["update", "loading"]);
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore; const { selectedGrid } = dashboardStore;
const percentile = ref<boolean>( const percentile = ref<boolean>(
selectedGrid.metricTypes.includes("readLabeledMetricsValues") dashboardStore.selectedGrid.metricTypes.includes("readLabeledMetricsValues")
); );
const sortOrder = ref<string>(selectedGrid.standard.sortOrder || "DES"); const sortOrder = ref<string>(selectedGrid.standard.sortOrder || "DES");

18
src/views/dashboard/graphs/Table.vue
View File

@ -21,13 +21,13 @@ limitations under the License. -->
:style="`width: ${nameWidth + initWidth}px`" :style="`width: ${nameWidth + initWidth}px`"
> >
<div class="name" :style="`width: ${nameWidth}px`"> <div class="name" :style="`width: ${nameWidth}px`">
{{ config.graph.tableHeaderCol1 || t("name") }} {{ config.tableHeaderCol1 || t("name") }}
<i class="r cp" ref="draggerName"> <i class="r cp" ref="draggerName">
<Icon iconName="settings_ethernet" size="middle" /> <Icon iconName="settings_ethernet" size="middle" />
</i> </i>
</div> </div>
<div class="value-col" v-if="showTableValues"> <div class="value-col" v-if="showTableValues">
{{ config.graph.tableHeaderCol2 || t("value") }} {{ config.tableHeaderCol2 || t("value") }}
</div> </div>
</div> </div>
<div <div
@ -60,11 +60,9 @@ const props = defineProps({
}, },
config: { config: {
type: Object as PropType<{ type: Object as PropType<{
graph: { showTableValues: boolean;
showTableValues: boolean; tableHeaderCol2: string;
tableHeaderCol2: string; tableHeaderCol1: string;
tableHeaderCol1: string;
};
metricTypes: string[]; metricTypes: string[];
}>, }>,
default: () => ({ showTableValues: true }), default: () => ({ showTableValues: true }),
@ -77,15 +75,15 @@ const chartTable = ref<Nullable<HTMLElement>>(null);
const initWidth = ref<number>(0); const initWidth = ref<number>(0);
const nameWidth = ref<number>(0); const nameWidth = ref<number>(0);
const draggerName = ref<Nullable<HTMLElement>>(null); const draggerName = ref<Nullable<HTMLElement>>(null);
const showTableValues = ref<boolean>(props.config.graph.showTableValues); const showTableValues = ref<boolean>(props.config.showTableValues || false);
onMounted(() => { onMounted(() => {
if (!chartTable.value) { if (!chartTable.value) {
return; return;
} }
const width = props.config.graph.showTableValues const width = props.config.showTableValues
? chartTable.value.offsetWidth / 2 ? chartTable.value.offsetWidth / 2
: chartTable.value.offsetWidth; : chartTable.value.offsetWidth;
initWidth.value = props.config.graph.showTableValues initWidth.value = props.config.showTableValues
? chartTable.value.offsetWidth / 2 ? chartTable.value.offsetWidth / 2
: 0; : 0;
nameWidth.value = width - 5; nameWidth.value = width - 5;