feat: add icon in alert summary if note added to alert (#428)

Author: satterly

src/components/AlertList.vue

@@ -111,6 +111,26 @@
                 :style="fontStyle"
               >
                 {{ props.item.status | capitalize }}
+
+              </span>
+              <span
+                v-if="showNotesIcon"
+              >
+                <span
+                  v-if="lastNote(props.item)"
+                  class="pl-2"
+                >
+                  <v-tooltip bottom>
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-icon
+                        v-bind="attrs"
+                        v-on="on"
+                        small
+                      >text_snippet</v-icon>
+                    </template>
+                    <span>{{ lastNote(props.item) }}</span>
+                  </v-tooltip>
+                </span>
               </span>
             </span>
             <span
@@ -527,6 +547,9 @@ export default {
     isSearching() {
       return this.$store.state.alerts.isSearching ? 'primary' : false
     },
+    showNotesIcon() {
+      return this.$store.getters.getPreference('showNotesIcon')
+    },
     rowsPerPage() {
       return this.$store.getters.getPreference('rowsPerPage')
     },

src/components/Preferences.vue

@@ -127,13 +127,26 @@
           </div>
         </v-card-title>
         <v-card-actions>
-          <v-layout column>
+          <v-radio-group
+            class="mt-0"
+          >
             <v-checkbox
               v-model="showAllowedEnvs"
               :label="$t('ShowAllowedEnvs')"
-              class="pa-0 mb-1"
+              hide-details
+              class="my-0"
             />
-
+            <v-checkbox
+              v-model="showNotesIcon"
+              :label="$t('ShowNotesIcon')"
+              :hint="$t('ShowNotesHint')"
+              persistent-hint
+              class="my-0"
+            />
+          </v-radio-group>
+        </v-card-actions>
+        <v-card-actions>
+          <v-layout column>
             <v-select
               v-model="fontFamily"
               :items="computedFontFamilies"
@@ -399,6 +412,14 @@ export default {
         this.$store.dispatch('toggle', ['showAllowedEnvs', value])
       }
     },
+    showNotesIcon: {
+      get() {
+        return this.$store.getters.getPreference('showNotesIcon')
+      },
+      set(value) {
+        this.$store.dispatch('toggle', ['showNotesIcon', value])
+      }
+    },
     computedFontFamilies() {
       const defaultFontFamily = this.$store.getters.getConfig('font')['font-family']
       return [

src/locales/de.js

@@ -238,6 +238,8 @@ export const de = {
   UseUTC: 'Nutze Coordinated Universal Time (UTC)',
   AlertSettings: 'Meldungseinstellungen',
   ShowAllowedEnvs: 'Zeigen Sie immer zulässige Umgebungen an',
+  ShowNotesIcon: 'Notizen-Symbol anzeigen',
+  ShowNotesHint: 'Symbol neben Alarmstatus anzeigen, um eine Bedienernotiz anzuzeigen',
   Font: 'Schrift',
   FontSize: 'Schriftgröße',
   FontWeight: 'Stärke',

src/locales/en.js

@@ -238,6 +238,8 @@ export const en = {
   UseUTC: 'Use Coordinated Universal Time (UTC)',
   AlertSettings: 'Alert summary settings',
   ShowAllowedEnvs: 'Always show allowed environments',
+  ShowNotesIcon: 'Show notes icon',
+  ShowNotesHint: 'Show icon next to alert status to indicate an operator note',
   Font: 'Font',
   FontSize: 'Font Size',
   FontWeight: 'Font Weight',

src/locales/fr.js

@@ -238,6 +238,8 @@ export const fr = {
   UseUTC: 'Utiliser le temps universel (UTC)',
   AlertSettings: 'Paramétrage des alertes',
   ShowAllowedEnvs: 'Toujours afficher les environnements autorisés',
+  ShowNotesIcon: 'Afficher l\'icône des notes',
+  ShowNotesHint: 'Afficher l\'icône à côté de l\'état de l\'alerte pour indiquer une note d\'opérateur',
   Font: 'Texte',
   FontSize: 'Taille de la police',
   FontWeight: 'Niveaux de graisse',

src/store/modules/alerts.store.ts

@@ -140,6 +140,11 @@ const actions = {
       sortBy.map(sb => params.append('sort-by', sb))
     }
 
+    // need notes from alert history if showing notes icons
+    if (rootGetters.getPreference('showNotesIcon')) {
+      params.append('show-history', 'true')
+    }
+
     // add server-side paging
     params.append('page', state.pagination.page)
     params.append('page-size', state.pagination.rowsPerPage)

src/store/modules/preferences.store.ts

@@ -16,6 +16,7 @@ const getDefaults = () => {
     timezone: 'local',  // 'local' or 'utc'
     displayDensity: 'comfortable',  // 'comfortable' or 'compact'
     showAllowedEnvs: false,
+    showNotesIcon: false,
     font: {
       'font-family': null,
       'font-size': null,