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

update style

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-25 16:05:03 +08:00
parent 96b7662e23
commit f031944f71
4 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,14 +22,14 @@ import graphql from "@/graphql";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { Conditions, DemandLog } from "@/types/demand-log"; import { Conditions, Log } from "@/types/demand-log";
interface DemandLogState { interface DemandLogState {
containers: Instance[]; containers: Instance[];
instances: Instance[]; instances: Instance[];
conditions: Conditions; conditions: Conditions;
selectorStore: any; selectorStore: any;
logs: DemandLog[]; logs: Log[];
loadLogs: boolean; loadLogs: boolean;
namespaces: Option[]; namespaces: Option[];
} }

2
src/types/demand-log.ts
View File

@ -27,7 +27,7 @@ export interface Conditions {
excludingKeywordsOfContent?: string; excludingKeywordsOfContent?: string;
} }
export interface DemandLog { export interface Log {
content: string; content: string;
timestamp: number; timestamp: number;
contentType: string; contentType: string;

8
src/views/dashboard/controls/DemandLog.vue
View File

@ -32,9 +32,7 @@ limitations under the License. -->
<div class="header"> <div class="header">
<Header /> <Header />
</div> </div>
<div class="log"> <Content />
<Content />
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -92,8 +90,4 @@ function removeWidget() {
background-color: #eee; background-color: #eee;
} }
} }
.log {
width: 100%;
}
</style> </style>

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

@ -13,11 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="log-content" ref="logContent"></div> <div
class="log-content"
ref="logContent"
style="width: 100%; height: calc(100% - 140px)"
></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue"; import { onMounted, ref, onUnmounted } from "vue";
import { useDemandLogStore } from "@/store/modules/demand-log"; import { useDemandLogStore } from "@/store/modules/demand-log";
import { Log } from "@/types/demand-log";
/*global Nullable */ /*global Nullable */
const demandLogStore = useDemandLogStore(); const demandLogStore = useDemandLogStore();
@ -30,9 +35,10 @@ onMounted(() => {
}); });
}); });
function monacoInstanceGen(monaco: any) { function monacoInstanceGen(monaco: any) {
const value = demandLogStore.logs.map((d: Log) => d.content).join("\n");
monaco.languages.register({ id: "custom" }); monaco.languages.register({ id: "custom" });
monacoInstance.value = monaco.editor.create(logContent.value, { monacoInstance.value = monaco.editor.create(logContent.value, {
value: demandLogStore.logs, value: "console.log(123)", // value
language: "javascript", language: "javascript",
}); });
} }
@ -42,9 +48,7 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.log-content { .log-content {
min-height: 300px;
width: 100%;
min-width: 600px; min-width: 600px;
height: calc(100% - 140px); min-height: 400px;
} }
</style> </style>