Fix problems with field selection for visualizations

timesketch/frontend-ng/src/components/Visualization/AggregationConfig.vue

@@ -20,8 +20,6 @@ limitations under the License.
         <TsEventFieldSelect
           :field="selectedField"
           @selectedField="selectedField = $event"
-          :timelineFields="timelineFields"
-          :loadingFields="loadingFields"
           :rules="[rules.required]"
           >
           </TsEventFieldSelect>
@@ -116,14 +114,6 @@ export default {
     splitByTimeline: {
       type: Boolean,
     },
-    timelineFields: {
-        type: Array,
-        default: () => [],
-    },
-    loadingFields: {
-        type: Boolean,
-        default: false
-    },
   },
   data() {
     return {

timesketch/frontend-ng/src/components/Visualization/EventFieldSelect.vue

@@ -17,9 +17,8 @@ limitations under the License.
   <v-autocomplete
     outlined
     v-model="selectedField"
-    :items="mappedTimelineFields"
+    :items="allNonTimestampFields"
     label="Field name to aggregate"
-    :loading="loadingFields"
     @input="$emit('selectedField', $event)"
   >
     <template
@@ -57,40 +56,33 @@ export default {
     field: {
       type: Object,
     },
-    timelineFields: {
-      type: Array,
-      default: () => [],
-    },
-    loadingFields: {
-        type: Boolean,
-        default: false
-    },
   },
   data() {
     return {
       selectedField: this.field,
     }
   },
   computed: {
-    mappedTimelineFields() {
-      const mappings = this.$store.state.meta.mappings;
-
-      return this.timelineFields.map(field => {
-        const mapping = mappings.find(m => m.field === field);
-        const type = mapping ? mapping.type : 'unknown';
-        return { text: field, value: { field, type } };
-      });
+    allNonTimestampFields() {
+      let mappings = this.$store.state.meta.mappings
+        .filter(
+          (mapping) => {
+            return (
+              mapping['field'] !== 'datetime'
+              && mapping['field'] !== 'timestamp'
+            )
+        })
+        .map(
+          (mapping) => {
+            return {text: mapping['field'], value: mapping}}
+        )
+      return mappings
     },
   },
   watch: {
     field() {
         this.selectedField = this.field
-    },
-    timelineFields(newFields) {
-      if (!newFields || newFields.length === 0) {
-          this.selectedField = null;
-      }
-    },
+    }
   }
 }
 </script>

timesketch/frontend-ng/src/components/Visualization/VisualizationEditor.vue

@@ -39,7 +39,7 @@ limitations under the License.
     <v-row class="mt-3">
       <v-col>
         <TsAggregationEventSelect
-          @updateTimelineIDs="getTimelineFields"
+          @updateTimelineIDs="selectedTimelineIDs = $event"
           :timelineIDs="selectedTimelineIDs"
           @updateQueryString="selectedQueryString = $event"
           :queryString="selectedQueryString"
@@ -48,8 +48,6 @@ limitations under the License.
         >
         </TsAggregationEventSelect>
         <TsAggregationConfig
-          :timelineFields="availableTimelineFields"
-          :loadingFields="loadingFields"
           :field="selectedField"
           @updateField="selectedField = $event"
           :aggregator="selectedAggregator"
@@ -292,8 +290,6 @@ export default {
       selectedYTitle: this.yTitle,
       renameVisualDialog: false,
       selectedChartTitleDraft: this.selectedChartTitleDraft,
-      availableTimelineFields: [],
-      loadingFields: false,
     }
   },
   computed: {
@@ -320,51 +316,6 @@ export default {
     },
   },
   methods: {
-    getTimelineFields(timelineIDs) {
-      this.selectedTimelineIDs = timelineIDs
-      if (!timelineIDs || timelineIDs.length === 0 ) {
-        this.availableTimelineFields = []
-        return;
-      }
-
-      this.loadingFields = true;
-
-      if (timelineIDs.length === 1) {
-        ApiClient.getTimelineFields(this.sketch.id, timelineIDs[0])
-          .then(response => {
-            this.availableTimelineFields = response.data.objects
-            this.loadingFields = false
-          })
-          .catch(error => {
-            console.error("Error fetching fields:", error);
-            this.availableTimelineFields = [];
-            this.loadingFields = false
-          });
-      }
-      else {
-        const promises = timelineIDs.map(timelineID => {
-          return ApiClient.getTimelineFields(this.sketch.id, timelineID)
-            .then(response => response.data.objects)
-            .catch(error => {
-                console.error("Error fetching timeline fields:", error);
-                return []
-            })
-          })
-
-          Promise.all(promises)
-            .then(results => {
-              // Flatten the arrays and create a set to guarantee uniqueness
-              const union = [...new Set(results.flat())];
-              this.availableTimelineFields = union
-              this.loadingFields = false;
-            })
-            .catch(error => {
-              console.error("Error in Promise.all", error)
-              this.availableTimelineFields = []
-              this.loadingFields = false;
-            })
-      }
-    },
     rename() {
       this.renameVisualDialog = false
       this.selectedChartTitle = this.selectedChartTitleDraft