Filter debug logs

app/components/analysis/AnalysesTable.vue

@@ -822,15 +822,13 @@ const onCloseNavToast = () => {
             <template #body="{ data }">
               <ProgressBar
                 :mode="
-                  (data.execution_status === PodStatus.Executing ||
-                    data.execution_status === PodStatus.Running) &&
+                  data.execution_status === PodStatus.Executing &&
                   !data.execution_progress
                     ? 'indeterminate'
                     : 'determinate'
                 "
                 :style="
-                  (data.execution_status === PodStatus.Executing ||
-                    data.execution_status === PodStatus.Running) &&
+                  data.execution_status === PodStatus.Executing &&
                   !data.execution_progress
                     ? {}
                     : determineProgressBarColor(data.execution_progress)

app/components/analysis/AnalysisControlButtons.vue

@@ -17,6 +17,7 @@ interface ButtonStates {
   rerunActive: boolean;
   stopActive: boolean;
   deleteActive: boolean;
+  logsActive: boolean;
 }
 
 const props = defineProps({
@@ -121,33 +122,36 @@ const playButtonActiveStates = [null, "", undefined];
 const rerunButtonActiveStates: Array<string | null | undefined> = [
   PodStatus.Failed,
   PodStatus.Executed,
-  PodStatus.Finished, // Deprecated
   PodStatus.Stopped,
-  PodStatus.Stopping,
 ];
 const stopButtonActiveStates: Array<string | null | undefined> = [
   PodStatus.Executing,
-  PodStatus.Running, // Deprecated
   PodStatus.Starting,
   PodStatus.Started,
   PodStatus.Stopping,
 ];
 const deleteButtonActiveStates: Array<string | null | undefined> = [
-  PodStatus.Failed,
   PodStatus.Stopped,
   PodStatus.Stopping,
   PodStatus.Executing,
-  PodStatus.Running, // Deprecated
   PodStatus.Starting,
   PodStatus.Started,
 ];
+const logsButtonActiveStates: Array<string | null | undefined> = [
+  PodStatus.Failed,
+  PodStatus.Stopped,
+  PodStatus.Stopping,
+  PodStatus.Executing,
+  PodStatus.Executed,
+];
 
 function getButtonStatuses(podStatus: string | null | undefined) {
   return {
     playActive: playButtonActiveStates.includes(podStatus),
     rerunActive: rerunButtonActiveStates.includes(podStatus),
     stopActive: stopButtonActiveStates.includes(podStatus),
     deleteActive: deleteButtonActiveStates.includes(podStatus),
+    logsActive: logsButtonActiveStates.includes(podStatus),
   };
 }
 
@@ -445,6 +449,7 @@ async function onDeleteAnalysis(silent: boolean = false) {
       @click="onDeleteAnalysis()"
     />
     <NuxtLink
+      v-show="buttonStatuses.logsActive"
       :to="{
         name: 'analyses-id',
         params: { id: props.analysisId },
@@ -454,7 +459,6 @@ async function onDeleteAnalysis(silent: boolean = false) {
     >
       <Button
         v-tooltip.top="'View the logs'"
-        :disabled="buttonStatuses.playActive"
         aria-label="Logs"
         class="analysis-btn logs-analysis-btn"
         icon="pi pi-bars"

app/components/analysis/ContainerCounter.vue

@@ -24,14 +24,6 @@ const emit = defineEmits(["applyExecutionStatusFilter"]);
 
 function onApplyExecutionStatusFilter(executionStatus: PodStatus) {
   emit("applyExecutionStatusFilter", executionStatus);
-
-  // Also emit the PO alternatives
-  if (executionStatus === PodStatus.Executing) {
-    emit("applyExecutionStatusFilter", PodStatus.Running);
-  }
-  if (executionStatus === PodStatus.Executed) {
-    emit("applyExecutionStatusFilter", PodStatus.Finished);
-  }
 }
 </script>
 

app/components/analysis/logs/AnalysisLogCardContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Card, VirtualScroller } from "primevue";
-import { nextTick, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useToast } from "primevue/usetoast";
 import Toast from "primevue/toast";
 import type { FlatLogLine } from "~/types/logs";
@@ -9,6 +9,7 @@ const props = defineProps<{
   nginxLines: FlatLogLine[];
   analysisLines: FlatLogLine[];
   showTimestamps?: boolean;
+  showDebug?: boolean;
   nginxHasOlder?: boolean;
   analysisHasOlder?: boolean;
   nginxLoading?: boolean;
@@ -19,6 +20,25 @@ const props = defineProps<{
 
 const toast = useToast();
 
+// Hide DEBUG entries unless toggled on
+function filterDebug(lines: FlatLogLine[]): FlatLogLine[] {
+  if (props.showDebug) return lines;
+  const result: FlatLogLine[] = [];
+  let skipping = false;
+  for (const line of lines) {
+    if (line.isStacktrace) {
+      if (!skipping) result.push(line);
+      continue;
+    }
+    skipping = line.level?.toUpperCase() === "DEBUG";
+    if (!skipping) result.push(line);
+  }
+  return result;
+}
+
+const displayedNginxLines = computed(() => filterDebug(props.nginxLines));
+const displayedAnalysisLines = computed(() => filterDebug(props.analysisLines));
+
 function isNearBottom(el: HTMLElement): boolean {
   return el.scrollTop >= el.scrollHeight - el.clientHeight - 50;
 }
@@ -80,15 +100,15 @@ function createScrollState(
 
 const { scrollerRef: nginxScrollerRef, onScroll: onNginxScroll } =
   createScrollState(
-    () => props.nginxLines,
+    () => displayedNginxLines.value,
     () => props.nginxHasOlder,
     () => props.nginxLoading,
     () => props.onLoadOlderNginx,
   );
 
 const { scrollerRef: analysisScrollerRef, onScroll: onAnalysisScroll } =
   createScrollState(
-    () => props.analysisLines,
+    () => displayedAnalysisLines.value,
     () => props.analysisHasOlder,
     () => props.analysisLoading,
     () => props.onLoadOlderAnalysis,
@@ -139,7 +159,7 @@ function downloadLogs(isAnalysis: boolean) {
   const prefix = isAnalysis ? "analysis" : "nginx";
   const filename = `${prefix}-logs-${Date.now()}`;
   const logs = formatFlatLines(
-    isAnalysis ? props.analysisLines : props.nginxLines,
+    isAnalysis ? displayedAnalysisLines.value : displayedNginxLines.value,
   );
   if (logs) {
     const blob = new Blob([logs], { type: "text/plain" });
@@ -156,7 +176,7 @@ function downloadLogs(isAnalysis: boolean) {
 
 async function copyToClipboard(isAnalysis: boolean) {
   const logs = formatFlatLines(
-    isAnalysis ? props.analysisLines : props.nginxLines,
+    isAnalysis ? displayedAnalysisLines.value : displayedNginxLines.value,
   );
   if (logs) {
     try {
@@ -172,8 +192,6 @@ async function copyToClipboard(isAnalysis: boolean) {
     }
   }
 }
-
-
 </script>
 
 <template>
@@ -208,9 +226,9 @@ async function copyToClipboard(isAnalysis: boolean) {
       <template #content>
         <div class="card nginx-log-content">
           <VirtualScroller
-            v-if="nginxLines.length"
+            v-if="displayedNginxLines.length"
             ref="nginxScrollerRef"
-            :items="nginxLines"
+            :items="displayedNginxLines"
             :itemSize="20"
             style="height: 30em"
             class="log-scroll-panel"
@@ -232,7 +250,9 @@ async function copyToClipboard(isAnalysis: boolean) {
               </div>
             </template>
           </VirtualScroller>
-          <span v-else>No logs found...</span>
+          <div v-else class="log-entry-empty log-entry">
+            <span>No logs found...</span>
+          </div>
         </div>
       </template>
     </Card>
@@ -264,9 +284,9 @@ async function copyToClipboard(isAnalysis: boolean) {
       </template>
       <template #content>
         <VirtualScroller
-          v-if="analysisLines.length"
+          v-if="displayedAnalysisLines.length"
           ref="analysisScrollerRef"
-          :items="analysisLines"
+          :items="displayedAnalysisLines"
           :itemSize="20"
           style="height: 30em"
           class="log-scroll-panel"
@@ -288,7 +308,9 @@ async function copyToClipboard(isAnalysis: boolean) {
             </div>
           </template>
         </VirtualScroller>
-        <span v-else>No logs found...</span>
+        <div v-else class="log-entry-empty log-entry">
+          <span>No logs found...</span>
+        </div>
       </template>
     </Card>
   </div>
@@ -312,7 +334,8 @@ async function copyToClipboard(isAnalysis: boolean) {
 }
 
 .log-scroll-panel {
-  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco,
+  font-family:
+    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco,
     "Courier New", monospace;
   font-size: 0.8125rem;
   height: 30em;
@@ -369,6 +392,10 @@ async function copyToClipboard(isAnalysis: boolean) {
   overflow: hidden;
 }
 
+.log-entry-empty {
+  margin: 2rem 0.25rem;
+}
+
 .log-message {
   display: block;
   white-space: nowrap;

app/components/analysis/logs/ContainerLogs.vue

@@ -30,6 +30,7 @@ const analysis = ref<AnalysisNode | null>(null);
 const logChunks = useLogChunks(analysisId);
 const lastFetchedAt = ref<string | null>(null);
 const showTimestamps = ref(false);
+const showDebug = ref(false);
 
 await logChunks.initialize();
 if (logChunks.httpError.value === 403) {
@@ -149,6 +150,14 @@ function onRefreshToggle() {
             offIcon="pi pi-clock"
             class="log-timestamp-toggle"
           />
+          <ToggleButton
+            v-model="showDebug"
+            onLabel="Debug On"
+            offLabel="Debug Off"
+            onIcon="pi pi-eye"
+            offIcon="pi pi-eye-slash"
+            class="log-debug-toggle"
+          />
           <RefreshSwitch
             :disabled="analysis?.execution_status !== ProcessStatus.Executing"
             :startEnabled="
@@ -169,13 +178,15 @@ function onRefreshToggle() {
             :nginxLines="prevLogs[0]!.nginxLines"
             :analysisLines="prevLogs[0]!.analysisLines"
             :showTimestamps="showTimestamps"
+            :showDebug="showDebug"
           />
         </div>
         <AnalysisLogCardContent
           v-else
           :nginxLines="logChunks.nginxLines.value"
           :analysisLines="logChunks.analysisLines.value"
           :showTimestamps="showTimestamps"
+          :showDebug="showDebug"
           :nginxHasOlder="logChunks.hasOlder.value"
           :analysisHasOlder="logChunks.hasOlder.value"
           :nginxLoading="logChunks.isLoading.value"
@@ -198,6 +209,7 @@ function onRefreshToggle() {
                 :nginxLines="run.nginxLines"
                 :analysisLines="run.analysisLines"
                 :showTimestamps="showTimestamps"
+                :showDebug="showDebug"
               />
             </Fieldset>
           </div>
@@ -237,7 +249,8 @@ function onRefreshToggle() {
   gap: 0.75em;
 }
 
-.log-timestamp-toggle {
+.log-timestamp-toggle,
+.log-debug-toggle {
   font-size: 0.8em;
 }
 </style>

app/components/analysis/logs/RefreshSwitch.vue

@@ -20,7 +20,7 @@ const tooltip = props.disabled
     :disabled="props.disabled"
     onLabel="Refresh Logs On"
     offLabel="Refresh Logs Off"
-    onIcon="pi pi-refresh"
+    onIcon="pi pi-spin pi-refresh"
     offIcon="pi pi-refresh"
     class="log-timestamp-toggle"
     v-tooltip.top="tooltip"

app/services/Api.ts

@@ -51,8 +51,6 @@ export enum PodStatus {
   Started = "started",
   Stopping = "stopping",
   Stopped = "stopped",
-  Running = "running",
-  Finished = "finished",
   Executing = "executing",
   Executed = "executed",
   Stuck = "stuck",

app/utils/count-analyses.ts

@@ -29,7 +29,6 @@ export function countAnalysisContainers(
           break;
 
         case PodStatus.Executing:
-        case PodStatus.Running:
           counts.executing++;
           break;
 
@@ -43,7 +42,6 @@ export function countAnalysisContainers(
           break;
 
         case PodStatus.Executed:
-        case PodStatus.Finished:
           counts.executed++;
           break;
 

app/utils/status-tag-severity.ts

@@ -40,7 +40,6 @@ export const getExecutionStatusSeverity = (status: PodStatus) => {
       return "info";
 
     case PodStatus.Executing:
-    case PodStatus.Running:
       return "contrast";
 
     case PodStatus.Stopping:
@@ -51,7 +50,6 @@ export const getExecutionStatusSeverity = (status: PodStatus) => {
       return "danger";
 
     case PodStatus.Executed:
-    case PodStatus.Finished:
       return "success";
   }
 };