mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-15 04:09:14 +00:00
feat: implement the Status API on Settings page (#470)
This commit is contained in:
Fine0830
@@ -13,172 +13,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="settings">
|
||||
<div class="flex-h item">
|
||||
<span class="label">{{ t("language") }}</span>
|
||||
<Selector
|
||||
v-model="lang"
|
||||
:options="Languages"
|
||||
placeholder="Select a language"
|
||||
@change="setLang"
|
||||
size="small"
|
||||
style="font-size: 14px; width: 180px"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-h item">
|
||||
<span class="label">{{ t("serverZone") }}</span>
|
||||
<div>
|
||||
<span>UTC</span>
|
||||
<span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
|
||||
<input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
|
||||
<span class="ml-5 mr-5">:</span>
|
||||
<span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
|
||||
<input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-h item">
|
||||
<span class="label">{{ t("auto") }}</span>
|
||||
<el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
|
||||
<div class="auto-time ml-5">
|
||||
<span class="auto-select">
|
||||
<input type="number" v-model="autoTime" @change="changeAutoTime" min="1" />
|
||||
</span>
|
||||
{{ t("second") }}
|
||||
<i class="ml-10">{{ t("timeReload") }}</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Content />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { Languages } from "@/constants/data";
|
||||
import Selector from "@/components/Selector.vue";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const lang = ref<string>(locale.value || "en");
|
||||
const autoTime = ref<number>(6);
|
||||
const auto = ref<boolean>(appStore.autoRefresh || false);
|
||||
const utcHour = ref<number>(appStore.utcHour);
|
||||
const utcMin = ref<number>(appStore.utcMin);
|
||||
|
||||
const handleReload = () => {
|
||||
const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
const dates: Date[] = [
|
||||
getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
|
||||
getLocalTime(appStore.utc, new Date()),
|
||||
];
|
||||
appStore.setDuration(timeFormat(dates));
|
||||
};
|
||||
const handleAuto = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
appStore.setAutoRefresh(auto.value);
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
} else {
|
||||
if (appStore.reloadTimer) {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
}
|
||||
};
|
||||
const changeAutoTime = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
if (appStore.reloadTimer) {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
}
|
||||
};
|
||||
const setLang = (): void => {
|
||||
locale.value = lang.value;
|
||||
window.localStorage.setItem("language", lang.value);
|
||||
};
|
||||
const setUTCHour = () => {
|
||||
if (utcHour.value < -12) {
|
||||
utcHour.value = -12;
|
||||
}
|
||||
if (utcHour.value > 14) {
|
||||
utcHour.value = 14;
|
||||
}
|
||||
if (isNaN(utcHour.value)) {
|
||||
utcHour.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
const setUTCMin = () => {
|
||||
if (utcMin.value < 0) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
if (utcMin.value > 59) {
|
||||
utcMin.value = 59;
|
||||
}
|
||||
if (isNaN(utcMin.value)) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
import Content from "./settings/Index.vue";
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.utc-input {
|
||||
color: inherit;
|
||||
background: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.utc-min {
|
||||
display: inline-block;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.auto-select {
|
||||
border-radius: 3px;
|
||||
background-color: $theme-background;
|
||||
padding: 1px;
|
||||
|
||||
input {
|
||||
width: 38px;
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
color: var(--sw-setting-color);
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 0;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $disabled-color;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 180px;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: $font-color;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -87,7 +87,7 @@ limitations under the License. -->
|
||||
alarmStore.alarms.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
|
||||
);
|
||||
const maxRange = computed(() =>
|
||||
getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldValue : appStore.recordsTTL.value),
|
||||
getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldNormal : appStore.recordsTTL.normal),
|
||||
);
|
||||
|
||||
refreshAlarms({ pageNum: 1 });
|
||||
|
||||
@@ -176,7 +176,15 @@ limitations under the License. -->
|
||||
category: { value: "ALL", label: "All" },
|
||||
});
|
||||
const maxRange = computed(() =>
|
||||
getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldSuperDataset : appStore.recordsTTL.superDataset),
|
||||
getMaxRange(
|
||||
appStore.coldStageMode
|
||||
? isBrowser.value
|
||||
? appStore.recordsTTL.coldBrowserErrorLog
|
||||
: appStore.recordsTTL.coldLog
|
||||
: isBrowser.value
|
||||
? appStore.recordsTTL.browserErrorLog
|
||||
: appStore.recordsTTL.log,
|
||||
),
|
||||
);
|
||||
if (props.needQuery) {
|
||||
init();
|
||||
|
||||
@@ -132,7 +132,7 @@ limitations under the License. -->
|
||||
});
|
||||
const durationRow = ref<Duration>(InitializationDurationRow);
|
||||
const maxRange = computed(() =>
|
||||
getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldSuperDataset : appStore.recordsTTL.superDataset),
|
||||
getMaxRange(appStore.coldStageMode ? appStore.recordsTTL.coldTrace : appStore.recordsTTL.trace),
|
||||
);
|
||||
if (filters.queryOrder) {
|
||||
traceStore.setTraceCondition({
|
||||
|
||||
47
src/views/settings/Index.vue
Normal file
47
src/views/settings/Index.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="settings-tabs">
|
||||
<el-tab-pane v-for="tab in SettingsTabs" :label="tab.label" :name="tab.value" :key="tab.value">
|
||||
<component :is="TabPanes[tab.value]" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { SettingsTabs } from "./data";
|
||||
import ClusterNodes from "./components/ClusterNodes.vue";
|
||||
import General from "./components/General.vue";
|
||||
import TTL from "./components/TTL.vue";
|
||||
import DebuggingConfigDump from "./components/DebuggingConfigDump.vue";
|
||||
/*global Indexable*/
|
||||
const TabPanes: Indexable = {
|
||||
general: General,
|
||||
ttl: TTL,
|
||||
clusterNodes: ClusterNodes,
|
||||
dumpEffectiveConfigurations: DebuggingConfigDump,
|
||||
};
|
||||
const activeName = ref(SettingsTabs[0].value);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.settings-tabs {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.settings-tabs > .el-tabs__content {
|
||||
color: var(--sw-setting-color);
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
71
src/views/settings/components/ClusterNodes.vue
Normal file
71
src/views/settings/components/ClusterNodes.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="cluster-nodes">
|
||||
<el-table
|
||||
:data="settingsStore.clusterNodes"
|
||||
class="mb-5"
|
||||
:row-style="{ backgroundColor: 'var(--layout-background)' }"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in ClusterNodeRow"
|
||||
:prop="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:width="item.width"
|
||||
/>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:total="settingsStore.clusterNodes.length"
|
||||
v-model="currentPage"
|
||||
@current-change="changePage"
|
||||
@prev-click="changePage"
|
||||
@next-click="changePage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useSettingsStore } from "@/store/modules/settings";
|
||||
import { ClusterNodeRow } from "../data";
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const pageSize = 16;
|
||||
const currentPage = ref<number>(1);
|
||||
|
||||
onMounted(() => {
|
||||
settingsStore.getClusterNodes();
|
||||
});
|
||||
|
||||
const changePage = (pageIndex: number) => {
|
||||
currentPage.value = pageIndex;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.cluster-nodes {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: $font-color;
|
||||
}
|
||||
</style>
|
||||
70
src/views/settings/components/DebuggingConfigDump.vue
Normal file
70
src/views/settings/components/DebuggingConfigDump.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="debugging-config-dump">
|
||||
<div class="config-dump-content">
|
||||
<div
|
||||
class="mb-10 flex-h"
|
||||
v-for="(item, index) of Object.keys(settingsStore.debuggingConfig)"
|
||||
:key="`${item}${index}`"
|
||||
>
|
||||
<div class="config-key">{{ item }}: </div>
|
||||
<div>{{ settingsStore.debuggingConfig[item] }}</div>
|
||||
</div>
|
||||
<div v-if="!Object.keys(settingsStore.debuggingConfig).length" class="tips">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import { useSettingsStore } from "@/store/modules/settings";
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
onMounted(() => {
|
||||
settingsStore.getDebuggingConfigDump();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.config-dump-content {
|
||||
border: 1px solid var(--el-color-info-light-8);
|
||||
overflow: auto;
|
||||
padding: 5px;
|
||||
border-radius: 5px 3px;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.config-key {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.debugging-config-dump {
|
||||
color: var(--sw-setting-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: $font-color;
|
||||
}
|
||||
</style>
|
||||
181
src/views/settings/components/General.vue
Normal file
181
src/views/settings/components/General.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="general-settings">
|
||||
<div class="flex-h item">
|
||||
<div class="label">{{ t("language") }}</div>
|
||||
<Selector
|
||||
v-model="lang"
|
||||
:options="Languages"
|
||||
placeholder="Select a language"
|
||||
@change="setLang"
|
||||
size="small"
|
||||
style="font-size: 14px; width: 180px"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-h item">
|
||||
<div class="label">{{ t("serverZone") }}</div>
|
||||
<div>
|
||||
<span>UTC</span>
|
||||
<span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
|
||||
<input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
|
||||
<span class="ml-5 mr-5">:</span>
|
||||
<span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
|
||||
<input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-h item">
|
||||
<div class="label">{{ t("auto") }}</div>
|
||||
<el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
|
||||
<div class="auto-time ml-5">
|
||||
<span class="auto-select">
|
||||
<input type="number" v-model="autoTime" @change="changeAutoTime" min="1" />
|
||||
</span>
|
||||
{{ t("second") }}
|
||||
<i class="ml-10">{{ t("timeReload") }}</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { Languages } from "@/constants/data";
|
||||
import Selector from "@/components/Selector.vue";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const lang = ref<string>(locale.value || "en");
|
||||
const autoTime = ref<number>(6);
|
||||
const auto = ref<boolean>(appStore.autoRefresh || false);
|
||||
const utcHour = ref<number>(appStore.utcHour);
|
||||
const utcMin = ref<number>(appStore.utcMin);
|
||||
|
||||
const handleReload = () => {
|
||||
const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
const dates: Date[] = [
|
||||
getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
|
||||
getLocalTime(appStore.utc, new Date()),
|
||||
];
|
||||
appStore.setDuration(timeFormat(dates));
|
||||
};
|
||||
const handleAuto = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
appStore.setAutoRefresh(auto.value);
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
} else {
|
||||
if (appStore.reloadTimer) {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
}
|
||||
};
|
||||
const changeAutoTime = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
if (appStore.reloadTimer) {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
}
|
||||
};
|
||||
const setLang = (): void => {
|
||||
locale.value = lang.value;
|
||||
window.localStorage.setItem("language", lang.value);
|
||||
};
|
||||
const setUTCHour = () => {
|
||||
if (utcHour.value < -12) {
|
||||
utcHour.value = -12;
|
||||
}
|
||||
if (utcHour.value > 14) {
|
||||
utcHour.value = 14;
|
||||
}
|
||||
if (isNaN(utcHour.value)) {
|
||||
utcHour.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
const setUTCMin = () => {
|
||||
if (utcMin.value < 0) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
if (utcMin.value > 59) {
|
||||
utcMin.value = 59;
|
||||
}
|
||||
if (isNaN(utcMin.value)) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.utc-input {
|
||||
color: inherit;
|
||||
background: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.utc-min {
|
||||
display: inline-block;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.auto-select {
|
||||
border-radius: 3px;
|
||||
background-color: $theme-background;
|
||||
padding: 1px;
|
||||
|
||||
input {
|
||||
width: 38px;
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.general-settings {
|
||||
font-size: 13px;
|
||||
|
||||
.item {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 0;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $disabled-color;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
color: $font-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
src/views/settings/components/TTL.vue
Normal file
64
src/views/settings/components/TTL.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="ttl">
|
||||
<div class="label">{{ t("metricsTTL") }}</div>
|
||||
<el-table
|
||||
:data="[settingsStore.configTTL.metrics]"
|
||||
class="mb-5"
|
||||
:row-style="{ backgroundColor: 'var(--layout-background)' }"
|
||||
>
|
||||
<el-table-column v-for="item in MetricsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
|
||||
<template #default="scope">{{ scope.row[item.value] < 0 ? "N/A" : scope.row[item.value] }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="label">{{ t("recordsTTL") }}</div>
|
||||
<el-table
|
||||
:data="[settingsStore.configTTL.records]"
|
||||
class="mb-5"
|
||||
:row-style="{ backgroundColor: 'var(--layout-background)' }"
|
||||
>
|
||||
<el-table-column v-for="item in RecordsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
|
||||
<template #default="scope">{{ scope.row[item.value] < 0 ? "N/A" : scope.row[item.value] }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useSettingsStore } from "@/store/modules/settings";
|
||||
import { MetricsTTLRow, RecordsTTLRow } from "../data";
|
||||
|
||||
const { t } = useI18n();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
onMounted(() => {
|
||||
settingsStore.getConfigTTL();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ttl {
|
||||
color: var(--sw-setting-color);
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
margin: 15px 0;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
src/views/settings/data.ts
Normal file
120
src/views/settings/data.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export const ClusterNodeRow = [
|
||||
{
|
||||
label: "Host",
|
||||
value: "host",
|
||||
},
|
||||
{
|
||||
label: "Port",
|
||||
value: "port",
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
label: "Self",
|
||||
value: "self",
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
export const SettingsTabs = [
|
||||
{
|
||||
label: "General",
|
||||
value: "general",
|
||||
},
|
||||
{
|
||||
label: "TTL",
|
||||
value: "ttl",
|
||||
},
|
||||
{
|
||||
label: "Cluster Nodes",
|
||||
value: "clusterNodes",
|
||||
},
|
||||
{
|
||||
label: "Dump Effective Configurations",
|
||||
value: "dumpEffectiveConfigurations",
|
||||
},
|
||||
];
|
||||
export const MetricsTTLRow = [
|
||||
{
|
||||
label: "Day",
|
||||
value: "day",
|
||||
},
|
||||
{
|
||||
label: "Hour",
|
||||
value: "hour",
|
||||
},
|
||||
{
|
||||
label: "Minute",
|
||||
value: "minute",
|
||||
},
|
||||
{
|
||||
label: "Cold Day",
|
||||
value: "coldDay",
|
||||
},
|
||||
{
|
||||
label: "Cold Hour",
|
||||
value: "coldHour",
|
||||
},
|
||||
{
|
||||
label: "Cold Minute",
|
||||
value: "coldMinute",
|
||||
},
|
||||
];
|
||||
|
||||
export const RecordsTTLRow = [
|
||||
{
|
||||
label: "Normal",
|
||||
value: "normal",
|
||||
},
|
||||
{
|
||||
label: "Trace",
|
||||
value: "trace",
|
||||
},
|
||||
{
|
||||
label: "Log",
|
||||
value: "log",
|
||||
},
|
||||
{
|
||||
label: "Zipkin Trace",
|
||||
value: "zipkinTrace",
|
||||
},
|
||||
{
|
||||
label: "Browser Error Log",
|
||||
value: "browserErrorLog",
|
||||
},
|
||||
{
|
||||
label: "Cold Normal",
|
||||
value: "coldNormal",
|
||||
},
|
||||
{
|
||||
label: "Cold Trace",
|
||||
value: "coldTrace",
|
||||
},
|
||||
{
|
||||
label: "Cold Zipkin Trace",
|
||||
value: "coldZipkinTrace",
|
||||
},
|
||||
{
|
||||
label: "Cold Log",
|
||||
value: "coldLog",
|
||||
},
|
||||
{
|
||||
label: "Cold Browser Error Log",
|
||||
value: "coldBrowserErrorLog",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user