fix: set the duration and scroll position for on-demand logs (#104)

src/graphql/fragments/demand-log.ts

@@ -30,8 +30,6 @@ export const queryStreamingLogs = {
   logs: ondemandPodLogs(condition: $condition) {
     errorReason
     logs {
-      timestamp
-      contentType
       content
     }
   }`,

src/store/modules/demand-log.ts

@@ -31,6 +31,7 @@ interface DemandLogState {
   logs: Log[];
   loadLogs: boolean;
   message: string;
+  total: number;
 }
 
 export const demandLogStore = defineStore({
@@ -47,6 +48,7 @@ export const demandLogStore = defineStore({
     logs: [],
     loadLogs: false,
     message: "",
+    total: 0,
   }),
   actions: {
     setLogCondition(data: Conditions) {
@@ -109,6 +111,7 @@ export const demandLogStore = defineStore({
         this.setLogs("", res.data.data.logs.errorReason);
         return res.data;
       }
+      this.total = res.data.data.logs.logs.length;
       const logs = res.data.data.logs.logs
         .map((d: Log) => d.content)
         .join("\n");

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

@@ -31,20 +31,25 @@ const demandLogStore = useDemandLogStore();
 const monacoInstance = ref();
 const logContent = ref<Nullable<HTMLDivElement>>(null);
 
-onMounted(async () => {
+onMounted(() => {
+  init();
+});
+async function init() {
   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 },
+    readonly: true,
   });
+  toRaw(monacoInstance.value).updateOptions({ readOnly: true });
 }
 function editorLayout() {
   if (!logContent.value) {
@@ -66,7 +71,19 @@ onUnmounted(() => {
 watch(
   () => demandLogStore.logs,
   () => {
+    if (!toRaw(monacoInstance.value)) {
+      return;
+    }
     toRaw(monacoInstance.value).setValue(demandLogStore.logs);
+    if (!demandLogStore.logs) {
+      return;
+    }
+    setTimeout(() => {
+      toRaw(monacoInstance.value).revealPosition({
+        column: 1,
+        lineNumber: demandLogStore.total,
+      });
+    }, 1000);
   }
 );
 </script>

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

@@ -110,11 +110,6 @@ limitations under the License. -->
         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">
@@ -135,7 +130,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch, computed, onMounted, onUnmounted } from "vue";
+import { ref, reactive, watch, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDemandLogStore } from "@/store/modules/demand-log";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -165,21 +160,6 @@ const state = reactive<any>({
 });
 /*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();
@@ -195,8 +175,16 @@ async function fetchSelectors() {
   }
 }
 async function getContainers() {
+  if (
+    !(
+      state.instance.id ||
+      (selectorStore.currentPod && selectorStore.currentPod.id)
+    )
+  ) {
+    return;
+  }
   const resp = await demandLogStore.getContainers(
-    state.instance.id || selectorStore.currentPod.id || ""
+    state.instance.id || selectorStore.currentPod.id
   );
   if (resp.errors) {
     ElMessage.error(resp.errors);
@@ -229,14 +217,16 @@ function runInterval() {
   }, state.duration.value * 1000);
 }
 function searchLogs() {
-  let instance = state.instance.id;
+  let instance = "";
   if (dashboardStore.entity === EntityType[3].value) {
     instance = selectorStore.currentPod.id;
   }
+  const serviceInstanceId =
+    instance || (state.instance && state.instance.id) || "";
   demandLogStore.setLogCondition({
-    serviceInstanceId: instance || state.instance.id || "",
+    serviceInstanceId,
     container: state.container.value,
-    duration: rangeTime.value,
+    duration: rangeTime(),
     keywordsOfContent: keywordsOfContent.value.length
       ? keywordsOfContent.value
       : undefined,
@@ -244,8 +234,30 @@ function searchLogs() {
       ? excludingKeywordsOfContent.value
       : undefined,
   });
+  if (!serviceInstanceId) {
+    return;
+  }
   queryLogs();
 }
+
+function rangeTime() {
+  {
+    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,
+    };
+  }
+}
+
 async function queryLogs() {
   const res = await demandLogStore.getDemandLogs();
   if (res && res.errors) {