VSwitch Colors, QuickAction Position, Chart Redrawing

All v-switches now have a global color specified ("primary") and a new css rule that turns the "thumb" of the button "primary" to match. All individual color properties for switches have been removed.

The Quick Action menu will now be located where the user clicked instead of attached to the control the user clicked. This is especially noticeable on large strings.

Charts now have a "key" field that must be edited for the chart to redraw. Vue 3 will re-render components when their props change, but not if a field on their props changes. In order for Vue to notice that the Basic Metrics charts have new data, we need to specify a :key and change it.

html/css/app.css

@@ -884,4 +884,8 @@ ul ul ul {
 
 .va-baseline {
   vertical-align: baseline;
+}
+
+.text-primary .v-switch__thumb {
+  background-color: rgb(var(--v-theme-primary)) !important;
 }

html/index.html

@@ -334,10 +334,10 @@ <h2 v-text="i18n[category]"></h2>
                 <v-expansion-panel-title id="huntOptionsHeader" expand-icon="fa-chevron-down" collapse-icon="fa-chevron-up">{{i18n.options}}</v-expansion-panel-title>
                 <v-expansion-panel-text>
                   <span :data-aid="'advanced_toggle_' + category">
-                    <v-switch v-if="isCategory('alerts') || isCategory('cases')" id="enable-advanced" :disabled="loading()" v-model="advanced" density="compact" hide-details class="my-0" :label="i18n.advanced" :data-aid="'advanced_toggle' + category" color="primary"></v-switch>
+                    <v-switch v-if="isCategory('alerts') || isCategory('cases')" id="enable-advanced" :disabled="loading()" v-model="advanced" density="compact" hide-details class="my-0" :label="i18n.advanced" :data-aid="'advanced_toggle' + category"></v-switch>
                   </span>
                   <span :data-aid="'autohunt_toggle_' + category">
-                    <v-switch v-if="isAdvanced()" id="auto-hunt" :disabled="loading()" v-model="autohunt" density="compact" hide-details class="my-0" :label="i18n.autohunt" :data-aid="'autohunt_toggle_' + category" color="primary"></v-switch>
+                    <v-switch v-if="isAdvanced()" id="auto-hunt" :disabled="loading()" v-model="autohunt" density="compact" hide-details class="my-0" :label="i18n.autohunt" :data-aid="'autohunt_toggle_' + category"></v-switch>
                   </span>
                   <span v-for="toggle in filterToggles" :key="toggle.name" :data-aid="'filter_toggle_' + category + '_' + toggle.name">
                     <v-switch
@@ -512,13 +512,13 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
               </v-row>
               <v-row v-if="metricsEnabled">
                 <v-col cols="12" md="4" :data-aid="'graph_top_' + category">
-                  <bar-chart id="topChart" :height="chartHeight" :data="topChartData" :options="topChartOptions"/>
+                  <bar-chart id="topChart" :height="chartHeight" :key="topChartData.key" :data="topChartData" :options="topChartOptions"/>
                 </v-col>
                 <v-col cols="12" md="4" :data-aid="'graph_timeline_' + category">
-                  <line-chart id="timelineChart" :height="chartHeight" :data="timelineChartData" :options="timelineChartOptions"/>
+                  <line-chart id="timelineChart" :height="chartHeight" :key="timelineChartData.key" :data="timelineChartData" :options="timelineChartOptions"/>
                 </v-col>
                 <v-col cols="12" md="4" :data-aid="'graphs_bottom_' + category">
-                  <bar-chart id="bottomChart" :height="chartHeight" :data="bottomChartData" :options="bottomChartOptions"/>
+                  <bar-chart id="bottomChart" :height="chartHeight" :key="bottomChartData.key" :data="bottomChartData" :options="bottomChartOptions"/>
                 </v-col>
               </v-row>
             </div>
@@ -1591,7 +1591,7 @@ <h3 class="primary-text">{{ i18n.commentAddDetection }}</h3>
                           <div class="font-weight-bold mt-2">
                             {{i18n.enabled}}: {{item.isEnabled}}
                           </div>
-                          <v-switch variant="underlined" id="override-enabled-edit" ref="override-enabled" hide-details="auto" v-model="item.isEnabled"
+                          <v-switch id="override-enabled-edit" ref="override-enabled" hide-details="auto" v-model="item.isEnabled"
                             inset @change="saveDetection(false)"></v-switch>
                         </div>
                         <div @click="startOverrideEdit('override-custom-filter', item, 'customFilter')" :class="{ clicktoedit: !isOverrideEdit('override-custom-filter') }">
@@ -1996,7 +1996,7 @@ <h3>{{ i18n.operations }}</h3>
                       {{ i18n.status }}: {{ detect.isEnabled ? i18n.enabled : i18n.disabled }}
                     </div>
                     <div data-aid="detection_metadata_enabled_toggle">
-                      <v-switch id="detection-enabled-edit" inset v-model="detect.isEnabled" color="primary" @change="saveDetection(false)"></v-switch>
+                      <v-switch id="detection-enabled-edit" inset v-model="detect.isEnabled" @change="saveDetection(false)"></v-switch>
                     </div>
                   </span>
                   <div id="ops-buttons">
@@ -5162,7 +5162,7 @@ <h2 v-text="i18n.configTitle"></h2>
               <v-expansion-panel>
                 <v-expansion-panel-title id="configOptionsHeader" expand-icon="fa-chevron-down" collapse-icon="fa-chevron-up">{{i18n.options}}</v-expansion-panel-title>
                 <v-expansion-panel-text>
-                  <v-switch id="option-advanced" color="primary" :disabled="$root.loading" v-model="advanced" dense class="my-0" :label="i18n.settingsAdvanced" :hint="i18n.settingsAdvancedHelp" persistent-hint data-aid="config_option_advanced_toggle"></v-switch>
+                  <v-switch id="option-advanced" :disabled="$root.loading" v-model="advanced" dense class="my-0" :label="i18n.settingsAdvanced" :hint="i18n.settingsAdvancedHelp" persistent-hint data-aid="config_option_advanced_toggle"></v-switch>
                   <v-btn id="option-synchronize" @click.stop="sync()" class="mt-6 mb-1" data-aid="config_option_synchronize_toggle">
                     {{ i18n.settingsSynchronize }}
                   </v-btn>

html/js/app.js

@@ -65,6 +65,9 @@ $(document).ready(function () {
       VChip: {
         closeIcon: 'fa-xmark va-baseline',
       },
+      VSwitch: {
+        color: 'primary'
+      },
     },
     icons: {
       defaultSet: 'fa',

html/js/routes/detection.js

@@ -620,7 +620,7 @@ routes.push({ path: '/detection/:id', name: 'detection', component: {
 		},
 		pickValue(item, field) {
 			let value = '';
-			if (item[field.value]) {
+			if (field.value in item) {
 				value = item[field.value];
 			} else if (field.altValues) {
 				for (let i = 0; i < field.altValues.length; i++) {

html/js/routes/hunt.js

@@ -1141,7 +1141,7 @@ const huntComponent = {
         this.quickActionEvent = event;
         this.quickActionField = field;
         this.quickActionValue = value;
-        this.quickActionTarget = domEvent.target;
+        this.quickActionTarget = [domEvent.clientX, domEvent.clientY];
         this.$nextTick(() => {
           this.quickActionVisible = true;
         });
@@ -1596,6 +1596,7 @@ const huntComponent = {
       }
     },
     populateChart(chart, data) {
+      chart.key++;
       chart.labels = [];
       chart.datasets[0].data = [];
       if (!data) return;
@@ -1715,6 +1716,10 @@ const huntComponent = {
       this.setupBarChart(this.topChartOptions, this.topChartData, this.i18n.chartTitleTop);
       this.setupTimelineChart(this.timelineChartOptions, this.timelineChartData, this.i18n.chartTitleTimeline);
       this.setupBarChart(this.bottomChartOptions, this.bottomChartData, this.i18n.chartTitleBottom);
+
+      this.topChartData.key = 0;
+      this.timelineChartData.key = 0;
+      this.bottomChartData.key = 0;
     },
     setupBarChart(options, data, title, groupIdx) {
       var fontColor = this.$root.getColor("#888888", -40);