fix: disable the query button without containers on the on-demand log widget. (#105)

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

@@ -13,14 +13,14 @@ 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>
+  <span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
   <div
+    v-else
     v-loading="demandLogStore.loadLogs"
     class="log-content"
     ref="logContent"
     style="width: calc(100% - 10px); height: calc(100% - 140px)"
-  >
+  ></div>
-    <span v-if="demandLogStore.message">{{ demandLogStore.message }}</span>
-  </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
@@ -36,7 +36,9 @@ onMounted(() => {
 });
 async function init() {
   const monaco = await import("monaco-editor");
-  monacoInstanceGen(monaco);
+  setTimeout(() => {
+    monacoInstanceGen(monaco);
+  }, 500);
   window.addEventListener("resize", () => {
     editorLayout();
   });
@@ -50,6 +52,7 @@ function monacoInstanceGen(monaco: any) {
     readonly: true,
   });
   toRaw(monacoInstance.value).updateOptions({ readOnly: true });
+  editorLayout();
 }
 function editorLayout() {
   if (!logContent.value) {
@@ -67,6 +70,7 @@ onUnmounted(() => {
   }
   toRaw(monacoInstance.value).dispose();
   monacoInstance.value = null;
+  demandLogStore.setLogs("");
 });
 watch(
   () => demandLogStore.logs,

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

@@ -118,6 +118,7 @@ limitations under the License. -->
       size="small"
       type="primary"
       @click="runInterval"
+      :disabled="disabled"
     >
       <Icon
         size="middle"
@@ -158,6 +159,7 @@ const state = reactive<any>({
   duration: { label: "From 30 minutes ago", value: 1800 },
   interval: { label: "30 seconds", value: 30 },
 });
+const disabled = ref<boolean>(true);
 /*global Nullable */
 const intervalFn = ref<Nullable<any>>(null);
 
@@ -187,11 +189,18 @@ async function getContainers() {
     state.instance.id || selectorStore.currentPod.id
   );
   if (resp.errors) {
+    disabled.value = true;
     ElMessage.error(resp.errors);
     return;
   }
+  if (resp.data.containers.errorReason) {
+    disabled.value = true;
+    ElMessage.warning(resp.data.containers.errorReason);
+    return;
+  }
   if (demandLogStore.containers.length) {
     state.container = demandLogStore.containers[0];
+    disabled.value = false;
   }
 }
 async function getInstances() {