mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-13 22:05:25 +00:00
feat: visualize a on-demand log widget (#99)
This commit is contained in:
Fine0830
GitHub
parent
0a746a125b
commit
30069ce825
61
package-lock.json
generated
61
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"echarts": "^5.2.2",
|
||||
"element-plus": "^2.0.2",
|
||||
"lodash": "^4.17.21",
|
||||
"monaco-editor": "^0.27.0",
|
||||
"pinia": "^2.0.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-grid-layout": "^3.0.0-beta1",
|
||||
@ -50,6 +51,7 @@
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "^12.1.3",
|
||||
"monaco-editor-webpack-plugin": "^4.1.2",
|
||||
"node-sass": "^6.0.1",
|
||||
"postcss-html": "^1.3.0",
|
||||
"postcss-scss": "^4.0.2",
|
||||
@ -18234,6 +18236,38 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/monaco-editor": {
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
|
||||
"integrity": "sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ=="
|
||||
},
|
||||
"node_modules/monaco-editor-webpack-plugin": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.1.2.tgz",
|
||||
"integrity": "sha512-snmHecygICKT0UlHhva+Cs2WaLPpxy3111xbvInhjjTr5m0xQTFHlmJ2QQDcB14Vzmm7f07uc1TtbvOpmL50BA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"monaco-editor": "0.25.x || 0.26.x || 0.27.x",
|
||||
"webpack": "^4.5.0 || 5.x"
|
||||
}
|
||||
},
|
||||
"node_modules/monaco-editor-webpack-plugin/node_modules/loader-utils": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||
@ -43271,6 +43305,33 @@
|
||||
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
|
||||
"dev": true
|
||||
},
|
||||
"monaco-editor": {
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.27.0.tgz",
|
||||
"integrity": "sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ=="
|
||||
},
|
||||
"monaco-editor-webpack-plugin": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.1.2.tgz",
|
||||
"integrity": "sha512-snmHecygICKT0UlHhva+Cs2WaLPpxy3111xbvInhjjTr5m0xQTFHlmJ2QQDcB14Vzmm7f07uc1TtbvOpmL50BA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"echarts": "^5.2.2",
|
||||
"element-plus": "^2.0.2",
|
||||
"lodash": "^4.17.21",
|
||||
"monaco-editor": "^0.27.0",
|
||||
"pinia": "^2.0.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-grid-layout": "^3.0.0-beta1",
|
||||
@ -52,6 +53,7 @@
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "^12.1.3",
|
||||
"monaco-editor-webpack-plugin": "^4.1.2",
|
||||
"node-sass": "^6.0.1",
|
||||
"postcss-html": "^1.3.0",
|
||||
"postcss-scss": "^4.0.2",
|
||||
|
||||
16
src/assets/icons/demand.svg
Normal file
16
src/assets/icons/demand.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<!-- 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. -->
|
||||
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
38
src/graphql/fragments/demand-log.ts
Normal file
38
src/graphql/fragments/demand-log.ts
Normal file
@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 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 queryContainers = {
|
||||
variable: "$condition: OndemandContainergQueryCondition!",
|
||||
query: `
|
||||
containers: listContainers(condition: $condition) {
|
||||
errorReason
|
||||
containers
|
||||
}`,
|
||||
};
|
||||
|
||||
export const queryStreamingLogs = {
|
||||
variable: "$condition: OndemandLogQueryCondition",
|
||||
query: `
|
||||
logs: ondemandPodLogs(condition: $condition) {
|
||||
errorReason
|
||||
logs {
|
||||
timestamp
|
||||
contentType
|
||||
content
|
||||
}
|
||||
}`,
|
||||
};
|
||||
@ -26,6 +26,7 @@ import * as profile from "./query/profile";
|
||||
import * as alarm from "./query/alarm";
|
||||
import * as event from "./query/event";
|
||||
import * as ebpf from "./query/ebpf";
|
||||
import * as demandLog from "./query/demand-log";
|
||||
|
||||
const query: { [key: string]: string } = {
|
||||
...app,
|
||||
@ -38,6 +39,7 @@ const query: { [key: string]: string } = {
|
||||
...alarm,
|
||||
...event,
|
||||
...ebpf,
|
||||
...demandLog,
|
||||
};
|
||||
class Graphql {
|
||||
private queryData = "";
|
||||
|
||||
22
src/graphql/query/demand-log.ts
Normal file
22
src/graphql/query/demand-log.ts
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import { queryContainers, queryStreamingLogs } from "../fragments/demand-log";
|
||||
|
||||
export const fetchContainers = `query listContainers(${queryContainers.variable}) {${queryContainers.query}}`;
|
||||
|
||||
export const fetchDemandPodLogs = `query ondemandPodLogs(${queryStreamingLogs.variable}) {${queryStreamingLogs.query}}`;
|
||||
@ -79,7 +79,11 @@ export function useECharts(
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
const { width, height } = el.getBoundingClientRect();
|
||||
|
||||
if (!width || !height) {
|
||||
return;
|
||||
}
|
||||
chartInstance = echarts.init(el, t);
|
||||
const { removeEvent } = useEventListener({
|
||||
el: window,
|
||||
|
||||
@ -136,7 +136,13 @@ const msg = {
|
||||
targetType: "Target Type",
|
||||
ebpfTip: "Don't have a process for profiling",
|
||||
processSelect: "Click to select processes",
|
||||
container: "Container",
|
||||
limit: "Limit",
|
||||
page: "Page",
|
||||
interval: "Refresh Interval",
|
||||
pause: "Pause",
|
||||
begin: "Start",
|
||||
seconds: "Seconds",
|
||||
hourTip: "Select Hour",
|
||||
minuteTip: "Select Minute",
|
||||
secondTip: "Select Second",
|
||||
|
||||
@ -74,8 +74,10 @@ const msg = {
|
||||
editGraph: "Editar Opciones",
|
||||
dashboardName: "Selecciona Nombre del Panel",
|
||||
linkDashboard: "Nombre del panel relacionado con llamadas de la topología",
|
||||
linkServerMetrics: "Métricas de servidor relacionadas con llamadas de la topología",
|
||||
linkClientMetrics: "Métricas de cliente relacionadas con llamadas de la topología",
|
||||
linkServerMetrics:
|
||||
"Métricas de servidor relacionadas con llamadas de la topología",
|
||||
linkClientMetrics:
|
||||
"Métricas de cliente relacionadas con llamadas de la topología",
|
||||
nodeDashboard: "Nombre del panel relacionado con nodos de la topología",
|
||||
nodeMetrics: "Mêtricas relacionas con nodos de la topología",
|
||||
instanceDashboard: "Nombre del panel relacionado con instancias de servicio",
|
||||
@ -137,6 +139,10 @@ const msg = {
|
||||
ebpfTip: "Le falta el proceso para perfilar",
|
||||
processSelect: "Click para seleccionar proceso",
|
||||
page: "Página",
|
||||
interval: "Intervalo de actualización",
|
||||
pause: "Pausa",
|
||||
begin: "Inicio",
|
||||
seconds: "Segundos",
|
||||
hourTip: "Seleccione Hora",
|
||||
minuteTip: "Seleccione Minuto",
|
||||
secondTip: "Seleccione Segundo",
|
||||
@ -303,7 +309,8 @@ const msg = {
|
||||
destEndpoint: "Endpoint Destinación",
|
||||
eventSource: "Fuente Envento",
|
||||
modalTitle: "Inspección",
|
||||
selectRedirectPage: "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
|
||||
selectRedirectPage:
|
||||
"Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
|
||||
logAnalysis: "Lenguaje de Análisis de Registro de Datos",
|
||||
logDataBody: "Contenido del Registro de Datos",
|
||||
addType: "Por favor introduzca un tipo",
|
||||
@ -324,8 +331,10 @@ const msg = {
|
||||
addTraceID: "Por favor introduzca el ID de la traza",
|
||||
addTags: "Por favor introduzaca una etiqueta",
|
||||
addKeywordsOfContent: "Por favor introduzca una clave de contenido",
|
||||
addExcludingKeywordsOfContent: "Por favor introduzca una clave excluyente de contenido",
|
||||
noticeTag: "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
|
||||
addExcludingKeywordsOfContent:
|
||||
"Por favor introduzca una clave excluyente de contenido",
|
||||
noticeTag:
|
||||
"Por favor presione Intro después de introducir una etiqueta(clave=valor).",
|
||||
conditionNotice:
|
||||
"Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
|
||||
language: "Lenguaje",
|
||||
|
||||
@ -134,7 +134,13 @@ const msg = {
|
||||
targetType: "目标类型",
|
||||
processSelect: "点击选择进程",
|
||||
ebpfTip: "没有进程可以分析",
|
||||
container: "容器",
|
||||
limit: "范围",
|
||||
page: "页面",
|
||||
interval: "刷新间隔时间",
|
||||
pause: "暂停",
|
||||
begin: "开始",
|
||||
seconds: "秒",
|
||||
hourTip: "选择小时",
|
||||
minuteTip: "选择分钟",
|
||||
secondTip: "选择秒数",
|
||||
|
||||
@ -114,7 +114,8 @@ export const dashboardStore = defineStore({
|
||||
type === "Trace" ||
|
||||
type === "Profile" ||
|
||||
type === "Log" ||
|
||||
type === "Ebpf"
|
||||
type === "Ebpf" ||
|
||||
type === "DemandLog"
|
||||
) {
|
||||
newItem.h = 36;
|
||||
}
|
||||
@ -170,7 +171,13 @@ export const dashboardStore = defineStore({
|
||||
showDepth: true,
|
||||
};
|
||||
}
|
||||
if (type === "Trace" || type === "Profile" || type === "Log") {
|
||||
if (
|
||||
type === "Trace" ||
|
||||
type === "Profile" ||
|
||||
type === "Log" ||
|
||||
type === "DemandLog" ||
|
||||
type === "Ebpf"
|
||||
) {
|
||||
newItem.h = 32;
|
||||
}
|
||||
if (type === "Text") {
|
||||
|
||||
124
src/store/modules/demand-log.ts
Normal file
124
src/store/modules/demand-log.ts
Normal file
@ -0,0 +1,124 @@
|
||||
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
|
||||
* 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.
|
||||
*/
|
||||
import { defineStore } from "pinia";
|
||||
import { Instance } from "@/types/selector";
|
||||
import { store } from "@/store";
|
||||
import graphql from "@/graphql";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { Conditions, Log } from "@/types/demand-log";
|
||||
|
||||
interface DemandLogState {
|
||||
containers: Instance[];
|
||||
instances: Instance[];
|
||||
conditions: Conditions;
|
||||
selectorStore: any;
|
||||
logs: Log[];
|
||||
loadLogs: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const demandLogStore = defineStore({
|
||||
id: "demandLog",
|
||||
state: (): DemandLogState => ({
|
||||
containers: [{ label: "", value: "" }],
|
||||
instances: [{ value: "", label: "" }],
|
||||
conditions: {
|
||||
container: "",
|
||||
serviceInstanceId: "",
|
||||
duration: useAppStoreWithOut().durationTime,
|
||||
},
|
||||
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
|
||||
: id;
|
||||
const res: AxiosResponse = await graphql.query("queryInstances").params({
|
||||
serviceId,
|
||||
duration: useAppStoreWithOut().durationTime,
|
||||
});
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.instances = res.data.data.pods || [];
|
||||
return res.data;
|
||||
},
|
||||
async getContainers(serviceInstanceId: string) {
|
||||
if (!serviceInstanceId) {
|
||||
return new Promise((resolve) =>
|
||||
resolve({ errors: "No service instance" })
|
||||
);
|
||||
}
|
||||
const condition = {
|
||||
serviceInstanceId,
|
||||
};
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("fetchContainers")
|
||||
.params({ condition });
|
||||
|
||||
if (res.data.errors) {
|
||||
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) => {
|
||||
return { label: d, value: d };
|
||||
});
|
||||
return res.data;
|
||||
},
|
||||
async getDemandLogs() {
|
||||
this.loadLogs = true;
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("fetchDemandPodLogs")
|
||||
.params({ condition: this.conditions });
|
||||
this.loadLogs = false;
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export function useDemandLogStore(): any {
|
||||
return demandLogStore(store);
|
||||
}
|
||||
4
src/types/app.d.ts
vendored
4
src/types/app.d.ts
vendored
@ -28,3 +28,7 @@ export interface DurationTime {
|
||||
end: string;
|
||||
step: string;
|
||||
}
|
||||
export type Paging = {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
|
||||
31
src/types/demand-log.ts
Normal file
31
src/types/demand-log.ts
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import { DurationTime } from "./app";
|
||||
|
||||
export interface Conditions {
|
||||
container: string;
|
||||
serviceInstanceId: string;
|
||||
duration: DurationTime;
|
||||
keywordsOfContent?: string[];
|
||||
excludingKeywordsOfContent?: string;
|
||||
}
|
||||
|
||||
export interface Log {
|
||||
content: string;
|
||||
timestamp: number;
|
||||
contentType: string;
|
||||
}
|
||||
17
src/types/monaco-editor.ts
Normal file
17
src/types/monaco-editor.ts
Normal file
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
declare module "monaco-editor";
|
||||
93
src/views/dashboard/controls/DemandLog.vue
Normal file
93
src/views/dashboard/controls/DemandLog.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<!-- 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="log-wrapper flex-v">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
:width="100"
|
||||
v-if="dashboardStore.editMode"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="delete cp">
|
||||
<Icon iconName="ellipsis_v" size="middle" class="operation" />
|
||||
</span>
|
||||
</template>
|
||||
<div class="tools" @click="removeWidget">
|
||||
<span>{{ t("delete") }}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="header">
|
||||
<Header />
|
||||
</div>
|
||||
<Content />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Header from "../related/demand-log/Header.vue";
|
||||
import Content from "../related/demand-log/Content.vue";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
activeIndex: { type: String, default: "" },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
function removeWidget() {
|
||||
dashboardStore.removeControls(props.data);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.log-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
min-width: 1024px;
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 5px 0;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -110,6 +110,7 @@ import Log from "./Log.vue";
|
||||
import Text from "./Text.vue";
|
||||
import Ebpf from "./Ebpf.vue";
|
||||
import { dragIgnoreFrom } from "../data";
|
||||
import DemandLog from "./DemandLog.vue";
|
||||
|
||||
const props = {
|
||||
data: {
|
||||
@ -120,7 +121,7 @@ const props = {
|
||||
};
|
||||
export default defineComponent({
|
||||
name: "Tab",
|
||||
components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf },
|
||||
components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog },
|
||||
props,
|
||||
setup(props) {
|
||||
const { t } = useI18n();
|
||||
@ -250,21 +251,23 @@ export default defineComponent({
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
max-width: 130px;
|
||||
max-width: 110px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
outline: none;
|
||||
color: #333;
|
||||
font-style: normal;
|
||||
margin-right: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-icons {
|
||||
|
||||
@ -22,5 +22,16 @@ import Profile from "./Profile.vue";
|
||||
import Log from "./Log.vue";
|
||||
import Text from "./Text.vue";
|
||||
import Ebpf from "./Ebpf.vue";
|
||||
import DemandLog from "./DemandLog.vue";
|
||||
|
||||
export default { Tab, Widget, Trace, Topology, Profile, Log, Text, Ebpf };
|
||||
export default {
|
||||
Tab,
|
||||
Widget,
|
||||
Trace,
|
||||
Topology,
|
||||
Profile,
|
||||
Log,
|
||||
Text,
|
||||
Ebpf,
|
||||
DemandLog,
|
||||
};
|
||||
|
||||
@ -186,6 +186,7 @@ export const ServiceTools = [
|
||||
{ name: "timeline", content: "Trace Profiling", id: "addProfile" },
|
||||
{ name: "insert_chart", content: "eBPF Profiling", id: "addEbpf" },
|
||||
{ name: "assignment", content: "Log", id: "addLog" },
|
||||
{ name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
|
||||
];
|
||||
export const InstanceTools = [
|
||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
||||
@ -193,6 +194,7 @@ export const InstanceTools = [
|
||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
||||
{ name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
|
||||
];
|
||||
export const EndpointTools = [
|
||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
||||
|
||||
@ -455,6 +455,9 @@ function setTabControls(id: string) {
|
||||
case "addText":
|
||||
dashboardStore.addTabControls("Text");
|
||||
break;
|
||||
case "addDemandLog":
|
||||
dashboardStore.addTabControls("DemandLog");
|
||||
break;
|
||||
default:
|
||||
ElMessage.info("Don't support this control");
|
||||
break;
|
||||
@ -487,6 +490,9 @@ function setControls(id: string) {
|
||||
case "addText":
|
||||
dashboardStore.addControl("Text");
|
||||
break;
|
||||
case "addDemandLog":
|
||||
dashboardStore.addControl("DemandLog");
|
||||
break;
|
||||
default:
|
||||
dashboardStore.addControl("Widget");
|
||||
}
|
||||
|
||||
78
src/views/dashboard/related/demand-log/Content.vue
Normal file
78
src/views/dashboard/related/demand-log/Content.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<!-- 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
|
||||
v-loading="demandLogStore.loadLogs"
|
||||
class="log-content"
|
||||
ref="logContent"
|
||||
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";
|
||||
import { useDemandLogStore } from "@/store/modules/demand-log";
|
||||
|
||||
/*global Nullable */
|
||||
const demandLogStore = useDemandLogStore();
|
||||
const monacoInstance = ref();
|
||||
const logContent = ref<Nullable<HTMLDivElement>>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
const monaco = await import("monaco-editor");
|
||||
monacoInstanceGen(monaco);
|
||||
window.addEventListener("resize", () => {
|
||||
editorLayout();
|
||||
});
|
||||
});
|
||||
function monacoInstanceGen(monaco: any) {
|
||||
monacoInstance.value = monaco.editor.create(logContent.value, {
|
||||
value: "",
|
||||
language: "text",
|
||||
wordWrap: true,
|
||||
minimap: { enabled: false },
|
||||
});
|
||||
}
|
||||
function editorLayout() {
|
||||
if (!logContent.value) {
|
||||
return;
|
||||
}
|
||||
const { width, height } = logContent.value.getBoundingClientRect();
|
||||
toRaw(monacoInstance.value).layout({
|
||||
height: height,
|
||||
width: width,
|
||||
});
|
||||
}
|
||||
onUnmounted(() => {
|
||||
if (!toRaw(monacoInstance.value)) {
|
||||
return;
|
||||
}
|
||||
toRaw(monacoInstance.value).dispose();
|
||||
monacoInstance.value = null;
|
||||
});
|
||||
watch(
|
||||
() => demandLogStore.logs,
|
||||
() => {
|
||||
toRaw(monacoInstance.value).setValue(demandLogStore.logs);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.log-content {
|
||||
min-width: 600px;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
412
src/views/dashboard/related/demand-log/Header.vue
Normal file
412
src/views/dashboard/related/demand-log/Header.vue
Normal file
@ -0,0 +1,412 @@
|
||||
<!-- 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="flex-h row">
|
||||
<div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
|
||||
<span class="grey mr-5"> {{ t("instance") }}: </span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.instance.value"
|
||||
:options="demandLogStore.instances"
|
||||
placeholder="Select a instance"
|
||||
@change="changeField('instance', $event)"
|
||||
class="selectors"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5 mb-5" v-if="state.container">
|
||||
<span class="grey mr-5">{{ t("container") }}:</span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.container.value"
|
||||
:options="demandLogStore.containers"
|
||||
placeholder="Select a container"
|
||||
@change="changeField('container', $event)"
|
||||
class="selectors"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="mr-5">
|
||||
<span class="grey mr-5">{{ t("limit") }}:</span>
|
||||
<el-input-number
|
||||
v-model="limit"
|
||||
:min="1"
|
||||
:max="1000"
|
||||
size="small"
|
||||
controls-position="right"
|
||||
@change="changeField('limit', $event)"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="mr-5">
|
||||
<span class="grey mr-5">{{ t("duration") }}:</span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.duration.value"
|
||||
:options="TimeRanges"
|
||||
placeholder="Select a time range"
|
||||
@change="changeField('duration', $event)"
|
||||
class="duration-range"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<span class="grey mr-5">{{ t("interval") }}:</span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.interval.value"
|
||||
:options="IntervalOpts"
|
||||
@change="changeField('interval', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-h row">
|
||||
<div class="mr-5">
|
||||
<span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
|
||||
<span class="log-tags">
|
||||
<span
|
||||
class="selected"
|
||||
v-for="(item, index) in keywordsOfContent"
|
||||
:key="`keywordsOfContent${index}`"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
<span class="remove-icon" @click="removeContent(index)">×</span>
|
||||
</span>
|
||||
</span>
|
||||
<el-input
|
||||
size="small"
|
||||
class="inputs-max"
|
||||
:placeholder="t('addKeywordsOfContent')"
|
||||
v-model="contentStr"
|
||||
@change="addLabels('keywordsOfContent')"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
|
||||
<span class="log-tags">
|
||||
<span
|
||||
class="selected"
|
||||
v-for="(item, index) in excludingKeywordsOfContent"
|
||||
:key="`excludingKeywordsOfContent${index}`"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
<span class="remove-icon" @click="removeExcludeContent(index)">
|
||||
×
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<el-input
|
||||
class="inputs-max"
|
||||
size="small"
|
||||
:placeholder="t('addExcludingKeywordsOfContent')"
|
||||
v-model="excludingContentStr"
|
||||
@change="addLabels('excludingKeywordsOfContent')"
|
||||
/>
|
||||
<el-tooltip :content="t('keywordsOfContentLogTips')">
|
||||
<span class="log-tips">
|
||||
<Icon size="middle" iconName="help" class="ml-5 help" />
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-h row btn-row">
|
||||
<el-button
|
||||
class="search-btn mt-10"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="runInterval"
|
||||
>
|
||||
<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, onUnmounted } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDemandLogStore } from "@/store/modules/demand-log";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { EntityType } from "../../data";
|
||||
import { TimeRanges, IntervalOpts } from "./data";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
import dateFormatStep from "@/utils/dateFormat";
|
||||
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const selectorStore = useSelectorStore();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const demandLogStore = useDemandLogStore();
|
||||
const keywordsOfContent = ref<string[]>([]);
|
||||
const excludingKeywordsOfContent = ref<string[]>([]);
|
||||
const contentStr = ref<string>("");
|
||||
const excludingContentStr = ref<string>("");
|
||||
// const limit = ref<number>(20);
|
||||
const state = reactive<any>({
|
||||
instance: { value: "", label: "" },
|
||||
container: { value: "", label: "" },
|
||||
duration: { label: "From 30 minutes ago", value: 1800 },
|
||||
interval: { label: "30 seconds", value: 30 },
|
||||
});
|
||||
/*global Nullable */
|
||||
const intervalFn = ref<Nullable<any>>(null);
|
||||
const rangeTime = computed(() => {
|
||||
const times = {
|
||||
start: getLocalTime(
|
||||
appStore.utc,
|
||||
new Date(new Date().getTime() - state.duration.value * 1000)
|
||||
),
|
||||
end: getLocalTime(appStore.utc, new Date()),
|
||||
step: "SECOND",
|
||||
};
|
||||
return {
|
||||
start: dateFormatStep(times.start, times.step, false),
|
||||
end: dateFormatStep(times.end, times.step, false),
|
||||
step: times.step,
|
||||
};
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchSelectors();
|
||||
});
|
||||
|
||||
async function fetchSelectors() {
|
||||
if (dashboardStore.entity !== EntityType[3].value) {
|
||||
await getInstances();
|
||||
}
|
||||
getContainers();
|
||||
if (intervalFn.value) {
|
||||
clearTimer();
|
||||
}
|
||||
}
|
||||
async function getContainers() {
|
||||
const resp = await demandLogStore.getContainers(
|
||||
state.instance.id || selectorStore.currentPod.id || ""
|
||||
);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
if (demandLogStore.containers.length) {
|
||||
state.container = demandLogStore.containers[0];
|
||||
}
|
||||
}
|
||||
async function getInstances() {
|
||||
const resp = await demandLogStore.getInstances();
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.instance = demandLogStore.instances[0];
|
||||
}
|
||||
function runInterval() {
|
||||
if (intervalFn.value) {
|
||||
clearTimer();
|
||||
return;
|
||||
}
|
||||
searchLogs();
|
||||
if (state.interval.value === 0) {
|
||||
return;
|
||||
}
|
||||
intervalFn.value = setInterval(searchLogs, state.interval.value * 1000);
|
||||
setTimeout(() => {
|
||||
clearTimer();
|
||||
}, state.duration.value * 1000);
|
||||
}
|
||||
function searchLogs() {
|
||||
let instance = state.instance.id;
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
instance = selectorStore.currentPod.id;
|
||||
}
|
||||
demandLogStore.setLogCondition({
|
||||
serviceInstanceId: instance || state.instance.id || "",
|
||||
container: state.container.value,
|
||||
duration: rangeTime.value,
|
||||
keywordsOfContent: keywordsOfContent.value.length
|
||||
? keywordsOfContent.value
|
||||
: undefined,
|
||||
excludingKeywordsOfContent: excludingKeywordsOfContent.value.length
|
||||
? excludingKeywordsOfContent.value
|
||||
: undefined,
|
||||
});
|
||||
queryLogs();
|
||||
}
|
||||
async function queryLogs() {
|
||||
const res = await demandLogStore.getDemandLogs();
|
||||
if (res && res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
function changeField(type: string, opt: any) {
|
||||
clearTimer();
|
||||
// if (["limit"].includes(type)) {
|
||||
// state[type] = opt;
|
||||
// return;
|
||||
// }
|
||||
state[type] = opt[0];
|
||||
if (type === "instance") {
|
||||
getContainers();
|
||||
}
|
||||
}
|
||||
function removeContent(index: number) {
|
||||
const keywordsOfContentList = keywordsOfContent.value || [];
|
||||
keywordsOfContentList.splice(index, 1);
|
||||
demandLogStore.setLogCondition({
|
||||
keywordsOfContent: keywordsOfContentList,
|
||||
});
|
||||
contentStr.value = "";
|
||||
clearTimer();
|
||||
}
|
||||
function addLabels(type: string) {
|
||||
if (type === "keywordsOfContent" && !contentStr.value) {
|
||||
return;
|
||||
}
|
||||
if (type === "excludingKeywordsOfContent" && !excludingContentStr.value) {
|
||||
return;
|
||||
}
|
||||
if (type === "keywordsOfContent") {
|
||||
keywordsOfContent.value.push(contentStr.value);
|
||||
demandLogStore.setLogCondition({
|
||||
[type]: keywordsOfContent.value,
|
||||
});
|
||||
contentStr.value = "";
|
||||
} else if (type === "excludingKeywordsOfContent") {
|
||||
excludingKeywordsOfContent.value.push(excludingContentStr.value);
|
||||
demandLogStore.setLogCondition({
|
||||
[type]: excludingKeywordsOfContent.value,
|
||||
});
|
||||
excludingContentStr.value = "";
|
||||
}
|
||||
clearTimer();
|
||||
}
|
||||
function removeExcludeContent(index: number) {
|
||||
excludingKeywordsOfContent.value.splice(index, 1);
|
||||
demandLogStore.setLogCondition({
|
||||
excludingKeywordsOfContent: excludingKeywordsOfContent.value,
|
||||
});
|
||||
excludingContentStr.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) {
|
||||
fetchSelectors();
|
||||
demandLogStore.setLogs("");
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => [selectorStore.currentPod],
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
fetchSelectors();
|
||||
demandLogStore.setLogs("");
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.inputs {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inputs-max {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.traceId {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.log-tag {
|
||||
width: 30%;
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
border: 1px solid #ccc;
|
||||
height: 30px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.log-tags {
|
||||
padding: 1px 5px 0 0;
|
||||
border-radius: 3px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.selected {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
color: #3d444f;
|
||||
border: 1px dashed #aaa;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectors {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.duration-range {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.help {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
37
src/views/dashboard/related/demand-log/data.ts
Normal file
37
src/views/dashboard/related/demand-log/data.ts
Normal file
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* 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 TimeRanges = [
|
||||
{ label: "From 5 seconds ago -- Now", value: 5 },
|
||||
{ label: "From 10 seconds ago -- Now", value: 10 },
|
||||
{ label: "From 15 seconds ago -- Now", value: 15 },
|
||||
{ label: "From 30 seconds ago -- Now", value: 30 },
|
||||
{ label: "From 45 seconds ago -- Now", value: 45 },
|
||||
{ label: "From 1 minute ago -- Now", value: 60 },
|
||||
{ label: "From 5 minutes ago -- Now", value: 300 },
|
||||
{ label: "From 15 minutes ago -- Now", value: 900 },
|
||||
{ label: "From 30 minutes ago -- Now", value: 1800 },
|
||||
];
|
||||
export const IntervalOpts = [
|
||||
{ label: "None", value: 0 },
|
||||
{ label: "5 seconds", value: 5 },
|
||||
{ label: "10 seconds", value: 10 },
|
||||
{ label: "15 seconds", value: 15 },
|
||||
{ label: "30 seconds", value: 30 },
|
||||
{ label: "45 seconds", value: 45 },
|
||||
{ label: "1 minute", value: 60 },
|
||||
];
|
||||
@ -253,7 +253,7 @@ watch(
|
||||
}
|
||||
|
||||
.inputs {
|
||||
width: 350px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.input-with-search {
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
|
||||
const AutoImport = require("unplugin-auto-import/webpack");
|
||||
const Components = require("unplugin-vue-components/webpack");
|
||||
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
|
||||
@ -64,6 +65,11 @@ module.exports = {
|
||||
test: /[\\/]node_modules[\\/]echarts|zrender[\\/]/,
|
||||
priority: 30,
|
||||
},
|
||||
monacoEditor: {
|
||||
name: "monaco-editor",
|
||||
test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
|
||||
priority: 40,
|
||||
},
|
||||
elementPlus: {
|
||||
name: "element-plus",
|
||||
test: /[\\/]node_modules[\\/]element-plus|@element-plus[\\/]/,
|
||||
@ -98,7 +104,8 @@ module.exports = {
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver({ importStyle: "css" })],
|
||||
dts: "./src/types/components.d.ts",
|
||||
})
|
||||
}),
|
||||
new MonacoWebpackPlugin()
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user