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

query logs

Browse Source
This commit is contained in:
Qiuxia Fan 2022-06-02 15:45:52 +08:00
parent 0a7e191f4e
commit 2672d0746d
7 changed files with 105 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
package-lock.json generated
View File

@ -15,7 +15,7 @@
"echarts": "^5.2.2",
"element-plus": "^2.0.2",
"lodash": "^4.17.21",
"monaco-editor": "^0.33.0",
"monaco-editor": "^0.27.0",
"pinia": "^2.0.5",
"vue": "^3.0.0",
"vue-grid-layout": "^3.0.0-beta1",
@ -51,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",
@ -18236,9 +18237,36 @@
}
},
"node_modules/monaco-editor": {
"version": "0.33.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
"integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
"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",
@ -43278,9 +43306,31 @@
"dev": true
},
"monaco-editor": {
"version": "0.33.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
"integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
"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",

3
package.json
View File

@ -17,7 +17,7 @@
"echarts": "^5.2.2",
"element-plus": "^2.0.2",
"lodash": "^4.17.21",
"monaco-editor": "^0.33.0",
"monaco-editor": "^0.27.0",
"pinia": "^2.0.5",
"vue": "^3.0.0",
"vue-grid-layout": "^3.0.0-beta1",
@ -53,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",

6
src/graphql/fragments/demand-log.ts
View File

@ -18,13 +18,17 @@
export const queryContainers = {
variable: "$condition: OndemandContainergQueryCondition!",
query: `
containers: listContainers(condition: $condition)`,
containers: listContainers(condition: $condition) {
errorReason
containers
}`,
};
export const queryStreamingLogs = {
variable: "$condition: OndemandLogQueryCondition",
query: `
logs: ondemandPodLogs(condition: $condition) {
errorReason
logs {
timestamp
contentType

11
src/store/modules/demand-log.ts
View File

@ -35,7 +35,7 @@ interface DemandLogState {
export const demandLogStore = defineStore({
id: "demandLog",
state: (): DemandLogState => ({
containers: [{ label: "istio-proxy", value: "istio-proxy" }],
containers: [{ label: "", value: "" }],
instances: [{ value: "", label: "" }],
conditions: {
container: "",
@ -81,7 +81,12 @@ export const demandLogStore = defineStore({
if (res.data.errors) {
return res.data;
}
this.containers = [{ label: "istio-proxy", value: "istio-proxy" }];
if (res.data.data.containers.errorReason) {
return res.data;
}
this.containers = res.data.data.containers.containers.map((d: string) => {
return { label: d, value: d };
});
return res.data;
},
async getDemandLogs() {
@ -94,7 +99,7 @@ export const demandLogStore = defineStore({
return res.data;
}
this.logs = res.data.data.queryLogs.logs;
this.logs = res.data.data.logs.logs.map((d: Log) => d.content).join("\n");
return res.data;
},
},

37
src/views/dashboard/related/demand-log/Content.vue
View File

@ -16,13 +16,12 @@ limitations under the License. -->
<div
class="log-content"
ref="logContent"
style="width: 100%; height: calc(100% - 140px)"
style="width: calc(100% - 60px); height: calc(100% - 170px)"
></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue";
import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
import { useDemandLogStore } from "@/store/modules/demand-log";
import { Log } from "@/types/demand-log";
/*global Nullable */
const demandLogStore = useDemandLogStore();
@ -30,24 +29,46 @@ const monacoInstance = ref();
const logContent = ref<Nullable<HTMLDivElement>>(null);
onMounted(async () => {
const monaco = await import("monaco-editor/esm/vs/editor/editor.api");
const monaco = await import("monaco-editor");
monacoInstanceGen(monaco);
window.addEventListener("resize", () => {
editorLayout();
});
});
function monacoInstanceGen(monaco: any) {
const value = demandLogStore.logs.map((d: Log) => d.content).join("\n");
monaco.languages.register({ id: "custom" });
monacoInstance.value = monaco.editor.create(logContent.value, {
value: "console.log(123)", // value
language: "javascript",
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(() => {
toRaw(monacoInstance.value).dispose();
monacoInstance.value = null;
window.removeEventListener("resize", editorLayout);
});
watch(
() => demandLogStore.logs,
() => {
toRaw(monacoInstance.value).setValue(demandLogStore.logs);
}
);
</script>
<style lang="scss" scoped>
.log-content {
min-width: 600px;
min-height: 400px;
// overflow: auto;
}
</style>

2
src/views/dashboard/related/demand-log/Header.vue
View File

@ -124,7 +124,7 @@ limitations under the License. -->
class="search-btn mt-10"
size="small"
type="primary"
@click="runInterval"
@click="searchLogs"
>
<Icon size="sm" iconName="retry" :loading="!!intervalFn" class="reload" />
{{ intervalFn ? t("pause") : t("start") }}

4
vue.config.js
View File

@ -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");
@ -103,7 +104,8 @@ module.exports = {
Components({
resolvers: [ElementPlusResolver({ importStyle: "css" })],
dts: "./src/types/components.d.ts",
})
}),
new MonacoWebpackPlugin()
);
},
};