mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-14 09:00:50 +00:00
update on-demand logs
This commit is contained in:
Qiuxia Fan
parent
2672d0746d
commit
c9b1d43448
@ -12,4 +12,5 @@ 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. -->
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#515151" d="M994.504704 650.283008c-2.920448-2.402304-6.203392-3.612672-9.752576-3.612672-8.183808 0-15.327232 6.424576-15.39072 6.469632l-222.119936 204.71808-90.068992-71.8848c-5.277696-4.743168-10.61888-7.145472-15.86176-7.145472-4.067328 0-8.056832 1.396736-11.872256 4.179968-12.955648 9.549824-2.85696 25.647104-2.512896 26.228736l99.508224 134.234112c5.85728 6.832128 11.88864 10.30144 17.983488 10.30144 10.162176 0 17.416192-9.771008 17.590272-9.988096l230.445056-269.959168c9.043968-12.642304 5.554176-20.727808 2.052096-23.54176zM834.873344 300.804096c0-14.307328-11.636736-25.946112-25.946112-25.946112H345.165824c-14.307328 0-25.946112 11.636736-25.946112 25.946112s11.636736 25.946112 25.946112 25.946112h463.761408c14.309376 0 25.946112-11.638784 25.946112-25.946112zM345.165824 666.806272c-14.307328 0-25.946112 11.636736-25.946112 25.946112s11.636736 25.946112 25.946112 25.946112h274.434048c14.292992 0 25.929728-11.636736 25.929728-25.946112s-11.636736-25.946112-25.929728-25.946112H345.165824z" /><path fill="#515151" d="M630.665216 957.85984l-1.097728-0.565248 0.03072-2.322432H113.221632c-14.3872 0-19.003392-4.601856-19.003392-18.987008V92.325888c0-14.3872 4.616192-18.987008 19.003392-18.987008h788.219904c14.370816 0 18.987008 4.601856 18.987008 18.987008v439.812096h0.077824l0.077824 1.931264c0.581632 13.899776 11.966464 24.784896 25.946112 24.784896 13.821952 0 25.22112-10.883072 25.946112-24.799232l0.141312-1.130496v-485.376c0-14.323712-11.636736-25.960448-25.929728-25.960448H68.11648c-14.292992 0-25.929728 11.636736-25.929728 25.960448v933.367808c0 14.307328 11.636736 25.946112 25.929728 25.946112h560.77312l0.014336-2.025472 1.14688-0.548864c9.078784-4.366336 14.71488-13.318144 14.71488-23.369728 0.002048-9.740288-5.402624-18.581504-14.10048-23.058432z" /><path fill="#515151" d="M782.833664 496.621568c0-14.307328-11.636736-25.946112-25.960448-25.946112H345.157632c-14.292992 0-25.931776 11.638784-25.931776 25.946112 0 14.307328 11.636736 25.946112 25.931776 25.946112h411.715584c14.323712 0 25.960448-11.638784 25.960448-25.946112zM203.145216 471.508992a38.371328 38.371328 0 0 0-11.167744 26.966016c0 10.051584 4.067328 19.884032 11.167744 26.966016a38.42048 38.42048 0 0 0 26.980352 11.18208c10.0352 0 19.8656-4.081664 26.966016-11.18208 7.100416-7.100416 11.167744-16.930816 11.167744-26.966016s-4.067328-19.8656-11.167744-26.966016c-7.100416-7.100416-16.930816-11.18208-26.966016-11.18208a38.44096 38.44096 0 0 0-26.980352 11.18208zM224.708608 262.664192c-10.051584 0-19.884032 4.067328-26.966016 11.167744-7.100416 7.100416-11.18208 16.930816-11.18208 26.966016s4.081664 19.884032 11.18208 26.980352c7.084032 7.100416 16.914432 11.167744 26.966016 11.167744 10.0352 0 19.8656-4.067328 26.980352-11.167744 7.100416-7.100416 11.167744-16.945152 11.167744-26.980352s-4.067328-19.8656-11.167744-26.966016a38.449152 38.449152 0 0 0-26.980352-11.167744zM230.121472 731.971584c10.051584 0 19.8656-4.067328 26.966016-11.167744 7.114752-7.114752 11.18208-16.945152 11.18208-26.966016 0-10.051584-4.067328-19.8656-11.18208-26.980352a38.371328 38.371328 0 0 0-26.966016-11.167744c-10.051584 0-19.884032 4.067328-26.966016 11.167744a38.361088 38.361088 0 0 0-11.18208 26.980352c0 10.0352 4.067328 19.8656 11.18208 26.966016 7.081984 7.100416 16.912384 11.167744 26.966016 11.167744z" /></svg>
|
||||
|
||||
<svg t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33.472 32.96 34.56l402.24 0c61.12 44.544 136.192 71.168 217.664 71.168 204.544 0 370.368-165.824 370.368-370.368 0-150.592-89.984-279.936-219.008-337.792zM412.096 298.24l30.528 0c-10.624 7.36-20.8 15.36-30.528 23.744l0-23.744zM63.04 298.24l153.024 0 0 153.024-153.024 0 0-153.024zM216.064 805.056l-153.024 0 0-153.024 153.024 0 0 153.024zM219.136 631.232l-153.024 0 0-153.024 153.024 0 0 153.024zM237.568 805.056l0-153.024 49.408 0c7.488 55.936 27.264 107.904 56.832 153.024l-106.24 0zM284.672 631.232l-44.032 0 0-153.024 64.384 0c-13.824 38.848-21.824 80.576-21.824 124.224 0 9.728 0.768 19.264 1.472 28.8zM390.592 341.76c-31.168 31.424-56.512 68.544-74.88 109.44l-78.144 0 0-152.96 153.024 0 0 43.52zM899.136 638.4l-63.36 12.864c-4.288 16.064-10.688 31.296-18.816 45.376l35.712 53.888-50.944 50.944-53.888-35.712c-14.08 8.128-29.312 14.528-45.376 18.816l-12.864 63.36-72 0-12.864-63.36c-16.064-4.288-31.296-10.688-45.376-18.816l-53.888 35.712-50.944-50.944 35.712-53.888c-8.128-14.08-14.528-29.312-18.816-45.376l-63.36-12.864 0-72 63.36-12.864c4.352-16.064 10.688-31.296 18.816-45.312l-35.712-53.952 50.944-50.944 53.888 35.776c14.08-8.128 29.312-14.464 45.376-18.816l12.864-63.36 72 0 12.864 63.36c16.064 4.288 31.296 10.688 45.376 18.816l53.888-35.712 50.944 50.944-35.712 53.824c8.128 14.08 14.528 29.312 18.816 45.376l63.36 12.864 0 72z" p-id="1722" fill="#707070"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 2.6 KiB |
@ -1,3 +1,4 @@
|
||||
import { ElMessage } from "element-plus";
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
@ -30,6 +31,7 @@ interface DemandLogState {
|
||||
selectorStore: any;
|
||||
logs: Log[];
|
||||
loadLogs: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const demandLogStore = defineStore({
|
||||
@ -45,11 +47,16 @@ export const demandLogStore = defineStore({
|
||||
selectorStore: useSelectorStore(),
|
||||
logs: [],
|
||||
loadLogs: false,
|
||||
message: "",
|
||||
}),
|
||||
actions: {
|
||||
setLogCondition(data: Conditions) {
|
||||
this.conditions = { ...this.conditions, ...data };
|
||||
},
|
||||
setLogs(logs: Log[], message?: string) {
|
||||
this.logs = logs;
|
||||
this.message = message || "";
|
||||
},
|
||||
async getInstances(id: string) {
|
||||
const serviceId = this.selectorStore.currentService
|
||||
? this.selectorStore.currentService.id
|
||||
@ -82,6 +89,7 @@ export const demandLogStore = defineStore({
|
||||
return res.data;
|
||||
}
|
||||
if (res.data.data.containers.errorReason) {
|
||||
this.containers = [{ label: "", value: "" }];
|
||||
return res.data;
|
||||
}
|
||||
this.containers = res.data.data.containers.containers.map((d: string) => {
|
||||
@ -98,8 +106,14 @@ export const demandLogStore = defineStore({
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
|
||||
this.logs = res.data.data.logs.logs.map((d: Log) => d.content).join("\n");
|
||||
if (res.data.data.logs.errorReason) {
|
||||
this.setLogs("", res.data.data.logs.errorReason);
|
||||
return res.data;
|
||||
}
|
||||
const logs = res.data.data.logs.logs
|
||||
.map((d: Log) => d.content)
|
||||
.join("\n");
|
||||
this.setLogs(logs);
|
||||
return res.data;
|
||||
},
|
||||
},
|
||||
|
||||
@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div
|
||||
v-loading="demandLogStore.loadLogs"
|
||||
class="log-content"
|
||||
ref="logContent"
|
||||
style="width: calc(100% - 60px); height: calc(100% - 170px)"
|
||||
></div>
|
||||
style="width: calc(100% - 10px); height: calc(100% - 140px)"
|
||||
>
|
||||
<span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
|
||||
@ -69,6 +72,5 @@ watch(
|
||||
.log-content {
|
||||
min-width: 600px;
|
||||
min-height: 400px;
|
||||
// overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,7 +36,7 @@ limitations under the License. -->
|
||||
class="selectors"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<!-- <div class="mr-5">
|
||||
<span class="grey mr-5">{{ t("limit") }}:</span>
|
||||
<el-input-number
|
||||
v-model="limit"
|
||||
@ -46,7 +46,7 @@ limitations under the License. -->
|
||||
controls-position="right"
|
||||
@change="changeField('limit', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="mr-5">
|
||||
<span class="grey mr-5">{{ t("duration") }}:</span>
|
||||
<Selector
|
||||
@ -61,7 +61,7 @@ limitations under the License. -->
|
||||
<span class="grey mr-5">{{ t("interval") }}:</span>
|
||||
<el-input-number
|
||||
v-model="intervalTime"
|
||||
:min="1"
|
||||
:min="5"
|
||||
:max="120"
|
||||
size="small"
|
||||
controls-position="right"
|
||||
@ -114,7 +114,7 @@ limitations under the License. -->
|
||||
/>
|
||||
<el-tooltip :content="t('keywordsOfContentLogTips')">
|
||||
<span class="log-tips">
|
||||
<Icon icon="help" class="mr-5" />
|
||||
<Icon size="middle" iconName="help" class="ml-5 help" />
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
@ -124,15 +124,15 @@ limitations under the License. -->
|
||||
class="search-btn mt-10"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="searchLogs"
|
||||
@click="runInterval"
|
||||
>
|
||||
<Icon size="sm" iconName="retry" :loading="!!intervalFn" class="reload" />
|
||||
<Icon size="middle" iconName="retry" :loading="intervalFn" class="mr-5" />
|
||||
{{ intervalFn ? t("pause") : t("start") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, computed, onMounted } from "vue";
|
||||
import { ref, reactive, watch, computed, onMounted, onUnmounted } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDemandLogStore } from "@/store/modules/demand-log";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
@ -153,8 +153,8 @@ const keywordsOfContent = ref<string[]>([]);
|
||||
const excludingKeywordsOfContent = ref<string[]>([]);
|
||||
const contentStr = ref<string>("");
|
||||
const excludingContentStr = ref<string>("");
|
||||
const limit = ref<number>(1);
|
||||
const intervalTime = ref<number>(1);
|
||||
// const limit = ref<number>(20);
|
||||
const intervalTime = ref<number>(30);
|
||||
const state = reactive<any>({
|
||||
instance: { value: "", label: "" },
|
||||
container: { value: "", label: "" },
|
||||
@ -188,7 +188,7 @@ async function fetchSelectors() {
|
||||
}
|
||||
getContainers();
|
||||
if (intervalFn.value) {
|
||||
clearInterval(intervalFn.value);
|
||||
clearTimer();
|
||||
}
|
||||
}
|
||||
async function getContainers() {
|
||||
@ -213,14 +213,14 @@ async function getInstances() {
|
||||
}
|
||||
function runInterval() {
|
||||
if (intervalFn.value) {
|
||||
clearInterval(intervalFn.value);
|
||||
clearTimer();
|
||||
return;
|
||||
}
|
||||
searchLogs();
|
||||
intervalFn.value = setInterval(searchLogs, intervalTime.value * 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(intervalFn.value);
|
||||
}, state.duration * 1000);
|
||||
clearTimer();
|
||||
}, state.duration.value * 1000);
|
||||
}
|
||||
function searchLogs() {
|
||||
let instance = state.instance.id;
|
||||
@ -247,7 +247,7 @@ async function queryLogs() {
|
||||
}
|
||||
}
|
||||
function changeField(type: string, opt: any) {
|
||||
clearInterval(intervalFn.value);
|
||||
clearTimer();
|
||||
if (["limit", "interval"].includes(type)) {
|
||||
state[type] = opt;
|
||||
return;
|
||||
@ -264,7 +264,7 @@ function removeContent(index: number) {
|
||||
keywordsOfContent: keywordsOfContentList,
|
||||
});
|
||||
contentStr.value = "";
|
||||
clearInterval(intervalFn.value);
|
||||
clearTimer();
|
||||
}
|
||||
function addLabels(type: string) {
|
||||
if (type === "keywordsOfContent" && !contentStr.value) {
|
||||
@ -286,7 +286,7 @@ function addLabels(type: string) {
|
||||
});
|
||||
excludingContentStr.value = "";
|
||||
}
|
||||
clearInterval(intervalFn.value);
|
||||
clearTimer();
|
||||
}
|
||||
function removeExcludeContent(index: number) {
|
||||
excludingKeywordsOfContent.value.splice(index, 1);
|
||||
@ -294,12 +294,23 @@ function removeExcludeContent(index: number) {
|
||||
excludingKeywordsOfContent: excludingKeywordsOfContent.value,
|
||||
});
|
||||
excludingContentStr.value = "";
|
||||
clearInterval(intervalFn.value);
|
||||
clearTimer();
|
||||
}
|
||||
function clearTimer() {
|
||||
if (!intervalFn.value) {
|
||||
return;
|
||||
}
|
||||
clearInterval(intervalFn.value);
|
||||
intervalFn.value = null;
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearTimer();
|
||||
});
|
||||
watch(
|
||||
() => selectorStore.currentService,
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
demandLogStore.setLogs("");
|
||||
fetchSelectors();
|
||||
}
|
||||
}
|
||||
@ -308,6 +319,7 @@ watch(
|
||||
() => [selectorStore.currentPod],
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
demandLogStore.setLogs("");
|
||||
fetchSelectors();
|
||||
}
|
||||
}
|
||||
@ -334,7 +346,7 @@ watch(
|
||||
|
||||
.search-btn {
|
||||
cursor: pointer;
|
||||
width: 220px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
@ -383,7 +395,8 @@ watch(
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.reload {
|
||||
margin-right: 3px;
|
||||
.help {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user