update style

src/store/modules/demand-log.ts

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

src/types/demand-log.ts

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

src/views/dashboard/controls/DemandLog.vue

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

src/views/dashboard/related/demand-log/Content.vue

@@ -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
 limitations under the License. -->
 <template>
-  <div class="log-content" ref="logContent"></div>
+  <div
+    class="log-content"
+    ref="logContent"
+    style="width: 100%; height: calc(100% - 140px)"
+  ></div>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, onUnmounted } from "vue";
 import { useDemandLogStore } from "@/store/modules/demand-log";
+import { Log } from "@/types/demand-log";
 
 /*global Nullable */
 const demandLogStore = useDemandLogStore();
@@ -30,9 +35,10 @@ onMounted(() => {
   });
 });
 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: demandLogStore.logs,
+    value: "console.log(123)", // value
     language: "javascript",
   });
 }
@@ -42,9 +48,7 @@ onUnmounted(() => {
 </script>
 <style lang="scss" scoped>
 .log-content {
-  min-height: 300px;
-  width: 100%;
   min-width: 600px;
-  height: calc(100% - 140px);
+  min-height: 400px;
 }
 </style>