Add timeline selection to visualization editor (#3140)

* Add timeline selection to visualization editor * variable TimelineSearch label --------- Co-authored-by: jkppr <[email protected]> Co-authored-by: Janosch <[email protected]>
google · Aug 19, 2024 · 15f4a46 · 15f4a46
1 parent e00b161
commit 15f4a46
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/timesketch/frontend-ng/src/components/Analyzer/TimelineSearch.vue b/timesketch/frontend-ng/src/components/Analyzer/TimelineSearch.vue
@@ -27,7 +27,7 @@ limitations under the License.
       v-model="selectedTimelines"
       :items="allReadyTimelines"
       outlined
-      label="Select timelines for analysis"
+      :label="`Select timelines for ${componentName}`"
       item-text="name"
       item-value="id"
       multiple
@@ -63,7 +63,7 @@ export default {
   components:{
     TsAnalyzerTimelineChip,
   },
-  props: ['analyzerTimelineId'],
+  props: ['analyzerTimelineId', 'componentName'],
   data() {
     return {
       selectedTimelines: [],

diff --git a/timesketch/frontend-ng/src/components/Visualization/VisualizationEditor.vue b/timesketch/frontend-ng/src/components/Visualization/VisualizationEditor.vue
@@ -36,9 +36,19 @@ limitations under the License.
       </v-btn>
     </v-toolbar>
     <v-divider class="mx-3"></v-divider>
+    <v-row class="mt-3">
+      <v-col >
+        <v-container class="ma-0">
+          <ts-timeline-search 
+            componentName="visualization" 
+            @selectedTimelines="selectedTimelineIDs = $event"></ts-timeline-search>
+        </v-container>
+      </v-col>
+    </v-row>
     <v-row class="mt-3">
       <v-col>
         <TsAggregationConfig
+          @enabled="selectedTimelineIDs.length > 0"
           :field="selectedField"
           @updateField="selectedField = $event"
           :aggregator="selectedAggregator"
@@ -100,7 +110,7 @@ limitations under the License.
         <v-btn
           class="ml-3"
           color="primary"
-          :disabled="response == null || !selectedChartTitle"
+          :disabled="selectedTimelineIDs.length == 0 || response == null || !selectedChartTitle"
           @click="saveVisualization"
         >
           Save
@@ -110,7 +120,7 @@ limitations under the License.
           text
           color="primary"
           @click="loadAggregationData"
-          :disabled="!(
+          :disabled="selectedTimelineIDs.length == 0 || !(
             selectedField &&
             selectedAggregator &&
             selectedChartType
@@ -147,12 +157,14 @@ import ApiClient from '../../utils/RestApiClient'
 import TsAggregationConfig from './AggregationConfig.vue'
 import TsChartConfig from './ChartConfig.vue'
 import TsChartCard from './ChartCard.vue'
+import TsTimelineSearch from '../Analyzer/TimelineSearch.vue'
 
 export default {
   components: {
     TsAggregationConfig,
     TsChartConfig,
     TsChartCard,
+    TsTimelineSearch,
   },
   props: {
     aggregator: {

diff --git a/timesketch/frontend-ng/src/views/Analyze.vue b/timesketch/frontend-ng/src/views/Analyze.vue
@@ -17,7 +17,7 @@ limitations under the License.
   <v-container fluid>
     <v-card flat class="pa-3 pt-0 mt-n3" color="transparent">
       <div class="mt-2">
-        <ts-timeline-search :analyzer-timeline-id="analyzerTimelineId" @selectedTimelines="timelineSelection = $event"></ts-timeline-search>
+        <ts-timeline-search componentName="analysis" :analyzer-timeline-id="analyzerTimelineId" @selectedTimelines="timelineSelection = $event"></ts-timeline-search>
       </div>
       <v-divider></v-divider>
       <div>