From 320eb8f660e24ab56571bd324c86983991811df8 Mon Sep 17 00:00:00 2001
From: janosch <jkpr@google.com>
Date: Fri, 15 Sep 2023 10:07:08 +0000
Subject: [PATCH 1/4] * Porting multi analyzer results to the new UI * Updated
 analyzer  result object formatting * Fixed a small bug where the progress was
 not tirggered * Removed some solved comments.

---
 .../components/LeftPanel/AnalyzerResult.vue   |  2 -
 .../LeftPanel/AnalyzerResultTimeline.vue      | 89 +++++++++++++++---
 .../components/LeftPanel/AnalyzerResults.vue  | 93 +++++++++++++++----
 3 files changed, 154 insertions(+), 30 deletions(-)

diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResult.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResult.vue
index baa53249f3..28d372a1f4 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResult.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResult.vue
@@ -16,8 +16,6 @@ limitations under the License.
 
 <template>
   <div>
-    <!-- TODO: issue #2565 -->
-    <!-- https://github.com/google/timesketch/issues/2565 -->
     <v-row
       no-gutters
       class="pa-3 pl-1"
diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
index 4d9c2e78bb..ff620eb700 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
@@ -161,7 +161,7 @@ limitations under the License.
                 <strong>Last run:</strong>
               </td>
               <td style="border: none">
-                <span> {{ timeline.created_at }} UTC </span>
+                <span> {{ timeline.results[0].created_at.split(".")[0] }} UTC </span>
               </td>
             </tr>
             <tr>
@@ -264,7 +264,7 @@ limitations under the License.
               </td>
               <td style="border: none">
                 <span>
-                  {{ timeline.verdict }}
+                  {{ timeline.results[0].verdict }}
                 </span>
               </td>
             </tr>
@@ -273,7 +273,7 @@ limitations under the License.
                 <strong>Last run:</strong>
               </td>
               <td style="border: none">
-                <span> {{ timeline.created_at }} UTC </span>
+                <span> {{ timeline.results[0].created_at.split(".")[0] }} UTC </span>
               </td>
             </tr>
             <tr>
@@ -289,12 +289,79 @@ limitations under the License.
           </tbody>
         </v-simple-table>
       </div>
-      <div v-else v-show="expanded" class="ml-3 pb-1 mr-2">
-        <v-icon>mdi-alert-octagon-outline</v-icon>
-        <span class="ml-1">
-          Showing multi analyzer results is not supported in the new UI yet. Please visit the old UI to see these
-          results.
-        </span>
+      <div v-else v-show="expanded"
+        :class="
+          $vuetify.theme.dark
+            ? expanded
+              ? 'dark-hover dark-bg'
+              : 'dark-hover'
+            : expanded
+            ? 'light-hover light-bg'
+            : 'light-hover'
+        ">
+        <!-- TODO: iterate on multianalyzer timeline results -->
+        <v-simple-table dense class="ml-2">
+          <tbody
+            :class="
+              $vuetify.theme.dark
+                ? expanded
+                  ? 'dark-hover dark-bg'
+                  : 'dark-hover'
+                : expanded
+                ? 'light-hover light-bg'
+                : 'light-hover'
+            "
+          >
+            <tr>
+              <td style="border: none">
+                <strong>Type:</strong>
+              </td>
+              <td style="border: none">
+                <span> Multi analyzer</span>
+              </td>
+            </tr>
+            <tr>
+              <td style="border: none">
+                <strong>Last run:</strong>
+              </td>
+              <td style="border: none">
+                <span> {{ timeline.results[0].created_at.split(".")[0] }} UTC </span>
+              </td>
+            </tr>
+            <tr>
+              <td width="80" style="border: none">
+                <strong>Status:</strong>
+              </td>
+              <td style="border: none">
+                <span>
+                  {{ timeline.analysis_status }}
+                </span>
+              </td>
+            </tr>
+            <tr v-if="timeline.results.length !== 0">
+              <td colspan="2" style="border: none">
+                <strong>Results:</strong>
+              </td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+        <v-data-iterator
+          :items="timeline.results"
+          :items-per-page="10"
+          :hide-default-footer="(timeline.results.length < 10 ? true : false)"
+        >
+          <template v-slot:default="props">
+            <div
+              v-for="(analyzer, index) in props.items"
+              :key="index"
+            >
+              <v-divider></v-divider>
+              <v-row no-gutters class="pa-1 pl-5">
+                <span>{{ analyzer.verdict }}</span>
+              </v-row>
+            </div>
+          </template>
+        </v-data-iterator>
       </div>
     </v-expand-transition>
   </div>
@@ -332,7 +399,7 @@ export default {
     verboseAnalyzerOutput: function () {
       if (this.checkAnalyzerOutput) {
         // this can return null
-        const parsed = JSON.parse(this.timeline.verdict)
+        const parsed = JSON.parse(this.timeline.results[0].verdict)
         // normalize null to undefined
         return parsed == null ? undefined : parsed;
       }
@@ -418,7 +485,7 @@ export default {
     },
     checkAnalyzerOutput: function () {
       try {
-        JSON.parse(this.timeline.verdict)
+        JSON.parse(this.timeline.results[0].verdict)
         return true
       } catch (e) {
         return false
diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
index 9325962f13..4b3ceac24e 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
@@ -203,14 +203,16 @@ export default {
       }
       this.$store.dispatch('updateAnalyzerResults', allAnalyses)
       this.updateActiveAnalyses(this.$store, allAnalyses)
+      this.analyzerResultsReady = true
     },
     groupByAnalyzer(analyses) {
       let perAnalyzer = {}
+      let multiResults = {}
       for (const analysis of analyses) {
         if (!perAnalyzer[analysis.analyzer_name]) {
           // the analyzer is not yet in the results: create new entry
           // There is an edge case where the analyzer is not in the analyzer list.
-          // If this happens, fall back to the analyzer short name. Tracked in issue#2738
+          // If this happens, fall back to the analyzer short name.
           if (this.analyzerList[analysis.analyzer_name]) {
             perAnalyzer[analysis.analyzer_name] = {
               timelines: {},
@@ -236,14 +238,33 @@ export default {
 
         if (!perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name]) {
           // this timeline is not yet in the results for this analyzer: add it
-          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name] = {
-            id: analysis.timeline.id,
-            name: analysis.timeline.name,
-            color: analysis.timeline.color,
-            verdict: analysis.result,
-            created_at: analysis.created_at,
-            last_analysissession_id: analysis.analysissession_id,
-            analysis_status: analysis.status[0].status,
+          if (perAnalyzer[analysis.analyzer_name].analyzerInfo.is_multi) {
+            // this analyzer is a multi analyzer, so add all results for this analysis session
+            multiResults = this.getAnalyzerMultiResults(analyses, analysis.analyzer_name, analysis.analysissession_id, analysis.timeline.id)
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name] = {
+              id: analysis.timeline.id,
+              name: analysis.timeline.name,
+              color: analysis.timeline.color,
+              last_analysissession_id: analysis.analysissession_id,
+              analysis_status: multiResults.analysis_status,
+              results: multiResults.results,
+            }
+          } else {
+            // this is not a multi analyzer, so add the results for this timeline
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name] = {
+              id: analysis.timeline.id,
+              name: analysis.timeline.name,
+              color: analysis.timeline.color,
+              last_analysissession_id: analysis.analysissession_id,
+              analysis_status: analysis.status[0].status,
+              results: [
+                {
+                  verdict: analysis.result,
+                  created_at: analysis.created_at,
+                  analysis_status: analysis.status[0].status,
+                },
+              ]
+            }
           }
         }
 
@@ -251,17 +272,56 @@ export default {
           perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id <
           analysis.analysissession_id
         ) {
-          // this timeline is already in the results for this analyzer but check if the session is newer and update it
-          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].created_at = analysis.created_at
-          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].verdict = analysis.result
-          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id =
-            analysis.analysissession_id
-          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].analysis_status =
-            analysis.status[0].status
+          // there is a newer session for this analyzer on this timeline. Update the results.
+          if (perAnalyzer[analysis.analyzer_name].analyzerInfo.is_multi) {
+            multiResults = this.getAnalyzerMultiResults(analyses, analysis.analyzer_name, analysis.analysissession_id, analysis.timeline.id)
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id =
+              analysis.analysissession_id
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status = multiResults.analysis_status
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results = multiResults.results
+          } else {
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].created_at = analysis.created_at
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].verdict = analysis.result
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id =
+              analysis.analysissession_id
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].analysis_status = analysis.status[0].status
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status =
+              analysis.status[0].status
+          }
         }
       }
       return perAnalyzer
     },
+    getAnalyzerMultiResults(analyses, analyzerName, sessionId, timelineId) {
+      let results = []
+      let status = new Set()
+      for (const analysis of analyses) {
+        if (analysis.analyzer_name === analyzerName && analysis.analysissession_id === sessionId && analysis.timeline.id === timelineId) {
+          results.push({
+            verdict: analysis.result,
+            created_at: analysis.created_at,
+            analysis_status: analysis.status[0].status,
+          })
+          status.add(analysis.status[0].status)
+        }
+      }
+      if (status.size === 1 && (status.has('DONE') || status.has('ERROR'))) {
+        return {
+          results: results,
+          analysis_status: [...status][0],
+        }
+      } else if (status.size === 2 && status.has('DONE') && status.has('ERROR')) {
+        return {
+          results: results,
+          analysis_status: 'ERROR',
+        }
+      } else {
+        return {
+          results: results,
+          analysis_status: 'PENDING',
+        }
+      }
+    },
     filterAnalyzers(items, search) {
       const searchStr = (search || '').toLowerCase()
       return (
@@ -336,7 +396,6 @@ export default {
   },
   mounted() {
     this.initializeAnalyzerResults()
-    this.analyzerResultsReady = true
     this.activeAnalyzerTimerStart = Date.now()
   },
   beforeDestroy() {

From b76de9a4decebaefce803a79c305386c7787db0b Mon Sep 17 00:00:00 2001
From: janosch <jkpr@google.com>
Date: Fri, 15 Sep 2023 13:54:26 +0000
Subject: [PATCH 2/4] apply recommended review changes

---
 .../LeftPanel/AnalyzerResultTimeline.vue      | 156 ++++++------------
 .../components/LeftPanel/AnalyzerResults.vue  |  46 +++---
 2 files changed, 69 insertions(+), 133 deletions(-)

diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
index ff620eb700..a1275cc5dd 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
@@ -14,31 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div
-    :class="
-      $vuetify.theme.dark
-        ? expanded
-          ? 'dark-hover dark-bg'
-          : 'dark-hover'
-        : expanded
-        ? 'light-hover light-bg'
-        : 'light-hover'
-    "
-  >
+  <div :class="getHoverTheme">
     <v-divider></v-divider>
     <div
       v-if="timeline.analysis_status === 'PENDING' || timeline.analysis_status === 'STARTED'"
       class="pa-2 pl-3"
       style="display: flex; align-items: center"
-      :class="
-        $vuetify.theme.dark
-          ? expanded
-            ? 'dark-hover dark-bg'
-            : 'dark-hover'
-          : expanded
-          ? 'light-hover light-bg'
-          : 'light-hover'
-      "
+      :class="getHoverTheme"
     >
       <v-icon class="mr-2" :color="'#' + timeline.color">mdi-circle</v-icon>
       <span class="mr-2" style="color: grey">{{ timeline.name }}</span>
@@ -49,15 +31,7 @@ limitations under the License.
       class="pa-2 pl-3"
       style="cursor: pointer; display: flex; align-items: center"
       @click="expanded = !expanded"
-      :class="
-        $vuetify.theme.dark
-          ? expanded
-            ? 'dark-hover dark-bg'
-            : 'dark-hover'
-          : expanded
-          ? 'light-hover light-bg'
-          : 'light-hover'
-      "
+      :class="getHoverTheme"
     >
       <v-icon class="mr-2" :color="'#' + timeline.color">mdi-circle</v-icon>
       <span>{{ timeline.name }}</span>
@@ -97,43 +71,25 @@ limitations under the License.
       <div
         v-if="!isMultiAnalyzer"
         v-show="expanded"
-        :class="
-          $vuetify.theme.dark
-            ? expanded
-              ? 'dark-hover dark-bg'
-              : 'dark-hover'
-            : expanded
-            ? 'light-hover light-bg'
-            : 'light-hover'
-        "
+        :class="getHoverTheme"
       >
-        <v-simple-table v-if="checkAnalyzerOutput" dense class="ml-2">
-          <tbody
-            :class="
-              $vuetify.theme.dark
-                ? expanded
-                  ? 'dark-hover dark-bg'
-                  : 'dark-hover'
-                : expanded
-                ? 'light-hover light-bg'
-                : 'light-hover'
-            "
-          >
+        <v-simple-table v-if="checkAnalyzerOutput" dense class="ml-2 borderless">
+          <tbody :class="getHoverTheme">
             <tr class="pr-3">
-              <td width="105" style="border: none">
+              <td width="105">
                 <strong>Summary:</strong>
               </td>
-              <td style="border: none">
+              <td>
                 <span>
                   {{ resultSummary || 'loading...' }}
                 </span>
               </td>
             </tr>
             <tr>
-              <td style="border: none">
+              <td>
                 <strong>Priority:</strong>
               </td>
-              <td style="border: none">
+              <td>
                 <span>
                   {{ resultPriority || 'loading...' }}
                 </span>
@@ -157,18 +113,18 @@ limitations under the License.
               </td>
             </tr>
             <tr>
-              <td style="border: none">
+              <td>
                 <strong>Last run:</strong>
               </td>
-              <td style="border: none">
-                <span> {{ timeline.results[0].created_at.split(".")[0] }} UTC </span>
+              <td>
+                <span> {{ timelineCreated }} UTC </span>
               </td>
             </tr>
             <tr>
               <td width="80" style="border: none">
                 <strong>Status:</strong>
               </td>
-              <td style="border: none">
+              <td>
                 <span>
                   {{ resultStatus || 'loading...' }}
                 </span>
@@ -180,7 +136,7 @@ limitations under the License.
               </td>
             </tr>
             <tr v-for="(item, key) in getAnalyzerOutputMetaData" :key="key">
-              <td style="border: none">
+              <td>
                 <strong>{{ key }}:</strong>
               </td>
               <td style="border: none" v-if="key === 'Searches'">
@@ -245,42 +201,32 @@ limitations under the License.
             </tr>
           </tbody>
         </v-simple-table>
-        <v-simple-table v-else dense class="ml-2">
-          <tbody
-            :class="
-              $vuetify.theme.dark
-                ? expanded
-                  ? 'dark-hover dark-bg'
-                  : 'dark-hover'
-                : expanded
-                ? 'light-hover light-bg'
-                : 'light-hover'
-            "
-          >
+        <v-simple-table v-else dense class="ml-2 borderless">
+          <tbody :class="getHoverTheme">
             <tr class="pr-3">
               <td width="80" style="border: none">
                 <strong v-if="timeline.analysis_status === 'ERROR'">Error:</strong>
                 <strong v-else>Summary:</strong>
               </td>
-              <td style="border: none">
+              <td>
                 <span>
-                  {{ timeline.results[0].verdict }}
+                  {{ timelineFirstResult.verdict }}
                 </span>
               </td>
             </tr>
             <tr>
-              <td style="border: none">
+              <td>
                 <strong>Last run:</strong>
               </td>
-              <td style="border: none">
-                <span> {{ timeline.results[0].created_at.split(".")[0] }} UTC </span>
+              <td>
+                <span> {{ timelineCreated }} UTC </span>
               </td>
             </tr>
             <tr>
               <td width="80" style="border: none">
                 <strong>Status:</strong>
               </td>
-              <td style="border: none">
+              <td>
                 <span>
                   {{ timeline.analysis_status }}
                 </span>
@@ -289,50 +235,31 @@ limitations under the License.
           </tbody>
         </v-simple-table>
       </div>
-      <div v-else v-show="expanded"
-        :class="
-          $vuetify.theme.dark
-            ? expanded
-              ? 'dark-hover dark-bg'
-              : 'dark-hover'
-            : expanded
-            ? 'light-hover light-bg'
-            : 'light-hover'
-        ">
+      <div v-else v-show="expanded" :class="getHoverTheme">
         <!-- TODO: iterate on multianalyzer timeline results -->
-        <v-simple-table dense class="ml-2">
-          <tbody
-            :class="
-              $vuetify.theme.dark
-                ? expanded
-                  ? 'dark-hover dark-bg'
-                  : 'dark-hover'
-                : expanded
-                ? 'light-hover light-bg'
-                : 'light-hover'
-            "
-          >
+        <v-simple-table dense class="ml-2 borderless">
+          <tbody :class="getHoverTheme">
             <tr>
-              <td style="border: none">
+              <td>
                 <strong>Type:</strong>
               </td>
-              <td style="border: none">
+              <td>
                 <span> Multi analyzer</span>
               </td>
             </tr>
             <tr>
-              <td style="border: none">
+              <td>
                 <strong>Last run:</strong>
               </td>
-              <td style="border: none">
-                <span> {{ timeline.results[0].created_at.split(".")[0] }} UTC </span>
+              <td>
+                <span> {{ timelineCreated }} UTC </span>
               </td>
             </tr>
             <tr>
               <td width="80" style="border: none">
                 <strong>Status:</strong>
               </td>
-              <td style="border: none">
+              <td>
                 <span>
                   {{ timeline.analysis_status }}
                 </span>
@@ -399,7 +326,7 @@ export default {
     verboseAnalyzerOutput: function () {
       if (this.checkAnalyzerOutput) {
         // this can return null
-        const parsed = JSON.parse(this.timeline.results[0].verdict)
+        const parsed = JSON.parse(this.timelineFirstResult.verdict)
         // normalize null to undefined
         return parsed == null ? undefined : parsed;
       }
@@ -485,12 +412,24 @@ export default {
     },
     checkAnalyzerOutput: function () {
       try {
-        JSON.parse(this.timeline.results[0].verdict)
+        JSON.parse(this.timelineFirstResult.verdict)
         return true
       } catch (e) {
         return false
       }
     },
+    timelineFirstResult: function () {
+      return (this.timeline && this.timeline.results.length > 0 && this.timeline.results[0]) ? this.timeline.results[0] : '... no results found'
+    },
+    timelineCreated: function () {
+      const firstEntry = this.timelineFirstResult
+      if (!firstEntry) return '... invalid date'
+      const createdAt = (firstEntry.created_at && firstEntry.created_at.split('.').length) > 0 ? firstEntry.created_at.split('.')[0] : false
+      return createdAt ? createdAt : '... invalid date'
+    },
+    getHoverTheme: function () {
+      return this.$vuetify.theme.dark ? (this.expanded ? 'dark-hover dark-bg' : 'dark-hover') : (this.expanded ? 'light-hover light-bg' : 'light-hover')
+    },
   },
   methods: {
     setView: function (savedSearch) {
@@ -553,4 +492,7 @@ export default {
 .light-bg {
   background-color: #f6f6f6;
 }
+.borderless td {
+  border: none !important;
+}
 </style>
diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
index 4b3ceac24e..8137ef57ff 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
@@ -238,24 +238,25 @@ export default {
 
         if (!perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name]) {
           // this timeline is not yet in the results for this analyzer: add it
+          const analyzerTimelineInfo = {
+            id: analysis.timeline.id,
+            name: analysis.timeline.name,
+            color: analysis.timeline.color,
+            last_analysissession_id: analysis.analysissession_id,
+          }
+
           if (perAnalyzer[analysis.analyzer_name].analyzerInfo.is_multi) {
             // this analyzer is a multi analyzer, so add all results for this analysis session
             multiResults = this.getAnalyzerMultiResults(analyses, analysis.analyzer_name, analysis.analysissession_id, analysis.timeline.id)
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name] = {
-              id: analysis.timeline.id,
-              name: analysis.timeline.name,
-              color: analysis.timeline.color,
-              last_analysissession_id: analysis.analysissession_id,
+              ...analyzerTimelineInfo,
               analysis_status: multiResults.analysis_status,
               results: multiResults.results,
             }
           } else {
             // this is not a multi analyzer, so add the results for this timeline
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name] = {
-              id: analysis.timeline.id,
-              name: analysis.timeline.name,
-              color: analysis.timeline.color,
-              last_analysissession_id: analysis.analysissession_id,
+              ...analyzerTimelineInfo,
               analysis_status: analysis.status[0].status,
               results: [
                 {
@@ -272,21 +273,17 @@ export default {
           perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id <
           analysis.analysissession_id
         ) {
+          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id = analysis.analysissession_id
           // there is a newer session for this analyzer on this timeline. Update the results.
           if (perAnalyzer[analysis.analyzer_name].analyzerInfo.is_multi) {
             multiResults = this.getAnalyzerMultiResults(analyses, analysis.analyzer_name, analysis.analysissession_id, analysis.timeline.id)
-            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id =
-              analysis.analysissession_id
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status = multiResults.analysis_status
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results = multiResults.results
           } else {
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].created_at = analysis.created_at
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].verdict = analysis.result
-            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id =
-              analysis.analysissession_id
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].analysis_status = analysis.status[0].status
-            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status =
-              analysis.status[0].status
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status = analysis.status[0].status
           }
         }
       }
@@ -305,21 +302,18 @@ export default {
           status.add(analysis.status[0].status)
         }
       }
+      return {
+        results,
+        analysis_status: this.getMultiStatus(status),
+      }
+    },
+    getMultiStatus(status) {
       if (status.size === 1 && (status.has('DONE') || status.has('ERROR'))) {
-        return {
-          results: results,
-          analysis_status: [...status][0],
-        }
+        return [...status][0]
       } else if (status.size === 2 && status.has('DONE') && status.has('ERROR')) {
-        return {
-          results: results,
-          analysis_status: 'ERROR',
-        }
+        return 'ERROR'
       } else {
-        return {
-          results: results,
-          analysis_status: 'PENDING',
-        }
+        return 'PENDING'
       }
     },
     filterAnalyzers(items, search) {

From a4c220d438b7048492573f522fe2e79a19041e2f Mon Sep 17 00:00:00 2001
From: janosch <jkpr@google.com>
Date: Fri, 15 Sep 2023 13:59:30 +0000
Subject: [PATCH 3/4] linter & formatter

---
 .../LeftPanel/AnalyzerResultTimeline.vue      | 46 ++++++-----
 .../components/LeftPanel/AnalyzerResults.vue  | 77 +++++++++++--------
 2 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
index a1275cc5dd..9fbd59befa 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
@@ -68,11 +68,7 @@ limitations under the License.
     </div>
 
     <v-expand-transition>
-      <div
-        v-if="!isMultiAnalyzer"
-        v-show="expanded"
-        :class="getHoverTheme"
-      >
+      <div v-if="!isMultiAnalyzer" v-show="expanded" :class="getHoverTheme">
         <v-simple-table v-if="checkAnalyzerOutput" dense class="ml-2 borderless">
           <tbody :class="getHoverTheme">
             <tr class="pr-3">
@@ -275,13 +271,10 @@ limitations under the License.
         <v-data-iterator
           :items="timeline.results"
           :items-per-page="10"
-          :hide-default-footer="(timeline.results.length < 10 ? true : false)"
+          :hide-default-footer="timeline.results.length < 10 ? true : false"
         >
           <template v-slot:default="props">
-            <div
-              v-for="(analyzer, index) in props.items"
-              :key="index"
-            >
+            <div v-for="(analyzer, index) in props.items" :key="index">
               <v-divider></v-divider>
               <v-row no-gutters class="pa-1 pl-5">
                 <span>{{ analyzer.verdict }}</span>
@@ -328,20 +321,20 @@ export default {
         // this can return null
         const parsed = JSON.parse(this.timelineFirstResult.verdict)
         // normalize null to undefined
-        return parsed == null ? undefined : parsed;
+        return parsed == null ? undefined : parsed
       }
       return undefined
     },
-    resultSummary: function() {
+    resultSummary: function () {
       return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.result_summary
     },
-    resultPriority: function() {
+    resultPriority: function () {
       return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.result_priority
     },
-    references: function() {
+    references: function () {
       return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.references
     },
-    resultStatus: function() {
+    resultStatus: function () {
       return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.result_status
     },
     getAnalyzerOutputMetaData: function () {
@@ -419,16 +412,27 @@ export default {
       }
     },
     timelineFirstResult: function () {
-      return (this.timeline && this.timeline.results.length > 0 && this.timeline.results[0]) ? this.timeline.results[0] : '... no results found'
+      return this.timeline && this.timeline.results.length > 0 && this.timeline.results[0]
+        ? this.timeline.results[0]
+        : '... no results found'
     },
     timelineCreated: function () {
       const firstEntry = this.timelineFirstResult
       if (!firstEntry) return '... invalid date'
-      const createdAt = (firstEntry.created_at && firstEntry.created_at.split('.').length) > 0 ? firstEntry.created_at.split('.')[0] : false
-      return createdAt ? createdAt : '... invalid date'
+      const createdAt =
+        (firstEntry.created_at && firstEntry.created_at.split('.').length) > 0
+          ? firstEntry.created_at.split('.')[0]
+          : '... invalid date'
+      return createdAt
     },
     getHoverTheme: function () {
-      return this.$vuetify.theme.dark ? (this.expanded ? 'dark-hover dark-bg' : 'dark-hover') : (this.expanded ? 'light-hover light-bg' : 'light-hover')
+      return this.$vuetify.theme.dark
+        ? this.expanded
+          ? 'dark-hover dark-bg'
+          : 'dark-hover'
+        : this.expanded
+        ? 'light-hover light-bg'
+        : 'light-hover'
     },
   },
   methods: {
@@ -441,7 +445,7 @@ export default {
     setSavedGraph(graphId) {
       EventBus.$emit('setSavedGraph', graphId)
     },
-    applySearch(searchQuery='', timelineId="_all") {
+    applySearch(searchQuery = '', timelineId = '_all') {
       let eventData = {}
       eventData.doSearch = true
       eventData.queryString = searchQuery
@@ -455,7 +459,7 @@ export default {
       }
       EventBus.$emit('setQueryAndFilter', eventData)
     },
-    applyFilterChip(term, termField='', termType='label', timelineId="_all") {
+    applyFilterChip(term, termField = '', termType = 'label', timelineId = '_all') {
       let eventData = {}
       eventData.doSearch = true
       eventData.queryString = '*'
diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
index 8137ef57ff..3417b6793b 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResults.vue
@@ -43,13 +43,7 @@ limitations under the License.
         >
         <v-tooltip v-if="activeAnalyzerTimeoutTriggered" top>
           <template v-slot:activator="{ on }">
-            <v-btn
-              v-on="on"
-              small
-              icon
-              @click.stop=""
-              @click="startPolling()"
-            >
+            <v-btn v-on="on" small icon @click.stop="" @click="startPolling()">
               <v-icon small>mdi-reload-alert</v-icon>
             </v-btn>
           </template>
@@ -57,7 +51,9 @@ limitations under the License.
         </v-tooltip>
       </span>
       <span class="float-right" style="margin-right: 10px">
-        <small class="ml-3" v-if="!expanded && sortedAnalyzerResults && sortedAnalyzerResults.length && analyzerResultsReady"
+        <small
+          class="ml-3"
+          v-if="!expanded && sortedAnalyzerResults && sortedAnalyzerResults.length && analyzerResultsReady"
           ><strong>{{ resultCounter }}</strong></small
         >
       </span>
@@ -157,10 +153,7 @@ export default {
       return this.$store.state.analyzerResults
     },
     sortedAnalyzerResults() {
-      const perAnalyzer = this.groupByAnalyzer([
-        ...this.analyzerResults,
-        ...this.activeAnalyses,
-      ])
+      const perAnalyzer = this.groupByAnalyzer([...this.analyzerResults, ...this.activeAnalyses])
       // for now sort the results in alphabetical order. In the future this will be sorted by verdict severity.
       let sortedAnalyzerList = [...Object.entries(perAnalyzer).map(([analyzerName, data]) => ({ analyzerName, data }))]
       sortedAnalyzerList.sort((a, b) =>
@@ -183,10 +176,10 @@ export default {
       return counter
     },
     activeAnalyzers() {
-      return new Set(this.activeAnalyses.map(a => a.analyzer_name))
+      return new Set(this.activeAnalyses.map((a) => a.analyzer_name))
     },
     activeAnalyzerSessionIds() {
-      return Array.from(new Set(this.activeAnalyses.map(a => a.analysissession_id)))
+      return Array.from(new Set(this.activeAnalyses.map((a) => a.analysissession_id)))
     },
     activeAnalyzerDisplayCount() {
       return this.activeAnalyzerSessionIds.length > 0 ? this.activeAnalyzerSessionIds.length : ''
@@ -247,7 +240,12 @@ export default {
 
           if (perAnalyzer[analysis.analyzer_name].analyzerInfo.is_multi) {
             // this analyzer is a multi analyzer, so add all results for this analysis session
-            multiResults = this.getAnalyzerMultiResults(analyses, analysis.analyzer_name, analysis.analysissession_id, analysis.timeline.id)
+            multiResults = this.getAnalyzerMultiResults(
+              analyses,
+              analysis.analyzer_name,
+              analysis.analysissession_id,
+              analysis.timeline.id
+            )
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name] = {
               ...analyzerTimelineInfo,
               analysis_status: multiResults.analysis_status,
@@ -264,7 +262,7 @@ export default {
                   created_at: analysis.created_at,
                   analysis_status: analysis.status[0].status,
                 },
-              ]
+              ],
             }
           }
         }
@@ -273,17 +271,27 @@ export default {
           perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id <
           analysis.analysissession_id
         ) {
-          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id = analysis.analysissession_id
+          perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].last_analysissession_id =
+            analysis.analysissession_id
           // there is a newer session for this analyzer on this timeline. Update the results.
           if (perAnalyzer[analysis.analyzer_name].analyzerInfo.is_multi) {
-            multiResults = this.getAnalyzerMultiResults(analyses, analysis.analyzer_name, analysis.analysissession_id, analysis.timeline.id)
-            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status = multiResults.analysis_status
+            multiResults = this.getAnalyzerMultiResults(
+              analyses,
+              analysis.analyzer_name,
+              analysis.analysissession_id,
+              analysis.timeline.id
+            )
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status =
+              multiResults.analysis_status
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results = multiResults.results
           } else {
-            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].created_at = analysis.created_at
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].created_at =
+              analysis.created_at
             perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].verdict = analysis.result
-            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].analysis_status = analysis.status[0].status
-            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status = analysis.status[0].status
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].analysis_status =
+              analysis.status[0].status
+            perAnalyzer[analysis.analyzer_name].timelines[analysis.timeline.name].results[0].analysis_status =
+              analysis.status[0].status
           }
         }
       }
@@ -293,7 +301,11 @@ export default {
       let results = []
       let status = new Set()
       for (const analysis of analyses) {
-        if (analysis.analyzer_name === analyzerName && analysis.analysissession_id === sessionId && analysis.timeline.id === timelineId) {
+        if (
+          analysis.analyzer_name === analyzerName &&
+          analysis.analysissession_id === sessionId &&
+          analysis.timeline.id === timelineId
+        ) {
           results.push({
             verdict: analysis.result,
             created_at: analysis.created_at,
@@ -342,7 +354,10 @@ export default {
             }
             // check if the timeout of the interval has been reached.
             // This prevents the analyzer frontend from checking stuck anayzers indefinetly.
-            if (this.activeAnalyzerTimerStart !== null && (Date.now() - this.activeAnalyzerTimerStart > this.activeAnalyzerTimeout)) {
+            if (
+              this.activeAnalyzerTimerStart !== null &&
+              Date.now() - this.activeAnalyzerTimerStart > this.activeAnalyzerTimeout
+            ) {
               this.stopPolling()
               this.activeAnalyzerTimeoutTriggered = true
               return
@@ -378,15 +393,17 @@ export default {
             }
           }
         }
-        return activeAnalyses;
+        return activeAnalyses
       } catch (error) {
-        console.error(error);
+        console.error(error)
       }
     },
     updateActiveAnalyses(store, analyses) {
-      const activeAnalyses = analyses.filter(a => a.status[0].status === 'PENDING' || a.status[0].status === 'STARTED');
-      store.dispatch("updateActiveAnalyses", activeAnalyses)
-    }
+      const activeAnalyses = analyses.filter(
+        (a) => a.status[0].status === 'PENDING' || a.status[0].status === 'STARTED'
+      )
+      store.dispatch('updateActiveAnalyses', activeAnalyses)
+    },
   },
   mounted() {
     this.initializeAnalyzerResults()
@@ -398,7 +415,7 @@ export default {
   },
   watch: {
     activeAnalyzerSessionIds: function () {
-      this.startPolling();
+      this.startPolling()
     },
   },
 }

From 704c691f2696b42f3a86223eec1a82989e0712ec Mon Sep 17 00:00:00 2001
From: janosch <jkpr@google.com>
Date: Fri, 15 Sep 2023 15:50:01 +0000
Subject: [PATCH 4/4] apply 2nd review recommendations

---
 .../components/LeftPanel/AnalyzerResultTimeline.vue   | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
index 9fbd59befa..305b08e9c9 100644
--- a/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
+++ b/timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
@@ -206,7 +206,7 @@ limitations under the License.
               </td>
               <td>
                 <span>
-                  {{ timelineFirstResult.verdict }}
+                  {{ timelineResult.verdict }}
                 </span>
               </td>
             </tr>
@@ -319,7 +319,7 @@ export default {
     verboseAnalyzerOutput: function () {
       if (this.checkAnalyzerOutput) {
         // this can return null
-        const parsed = JSON.parse(this.timelineFirstResult.verdict)
+        const parsed = JSON.parse(this.timelineResult.verdict)
         // normalize null to undefined
         return parsed == null ? undefined : parsed
       }
@@ -405,7 +405,7 @@ export default {
     },
     checkAnalyzerOutput: function () {
       try {
-        JSON.parse(this.timelineFirstResult.verdict)
+        JSON.parse(this.timelineResult.verdict)
         return true
       } catch (e) {
         return false
@@ -414,7 +414,7 @@ export default {
     timelineFirstResult: function () {
       return this.timeline && this.timeline.results.length > 0 && this.timeline.results[0]
         ? this.timeline.results[0]
-        : '... no results found'
+        : undefined
     },
     timelineCreated: function () {
       const firstEntry = this.timelineFirstResult
@@ -425,6 +425,9 @@ export default {
           : '... invalid date'
       return createdAt
     },
+    timelineResult: function () {
+      return this.timelineFirstResult ? this.timelineFirstResult : '... no results found'
+    },
     getHoverTheme: function () {
       return this.$vuetify.theme.dark
         ? this.expanded