Add buttons to hide metrics

metricq · Nov 14, 2024 · ba582f4 · ba582f4
1 parent bab532f
commit ba582f4
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 1 deletion.
diff --git a/components/MetricActions.vue b/components/MetricActions.vue
@@ -60,6 +60,24 @@
       >
         <b-icon-archive scale="1.2" />
       </b-button>
+      <b-button
+        v-if="showHide && !isHidden"
+        v-b-tooltip.hover.noninteractive
+        variant="warning"
+        title="Hide the metric"
+        @click="hideMetric(true)"
+      >
+        <b-icon-eye-slash scale="1.2" />
+      </b-button>
+      <b-button
+        v-if="showHide && isHidden"
+        v-b-tooltip.hover.noninteractive
+        variant="warning"
+        title="Unhide the metric"
+        @click="hideMetric(false)"
+      >
+        <b-icon-eye scale="1.2" />
+      </b-button>
       <b-button
         v-if="showDelete && metric.historic === undefined"
         v-b-tooltip.hover.noninteractive
@@ -92,6 +110,16 @@
         Archived {{ archived | momentAgo }}: {{ archived }}
       </b-tooltip>
     </b-button-group>
+    <b-button-group v-if="showState && isHidden" size="sm" class="shadow-sm">
+      <span id="hidden-tooltip-target">
+        <b-button size="sm" variant="secondary" disabled>
+          <b-icon-eye-slash-fill scale="1.2" />
+        </b-button>
+      </span>
+      <b-tooltip target="hidden-tooltip-target" noninteractive>
+        Hidden
+      </b-tooltip>
+    </b-button-group>
     <b-button-group v-if="showState && isLiveOnly" size="sm" class="shadow-sm">
       <span id="live-only-tooltip-target">
         <b-button size="sm" variant="secondary" disabled>
@@ -121,6 +149,7 @@ export default {
     showDetails: { type: Boolean, default: true },
     showDelete: { type: Boolean, default: true },
     showArchive: { type: Boolean, default: true },
+    showHide: { type: Boolean, default: true },
     showState: { type: Boolean, default: false },
   },
   computed: {
@@ -142,6 +171,9 @@ export default {
     isLiveOnly() {
       return this.metric.historic === false
     },
+    isHidden() {
+      return this.metric.hidden === true
+    },
   },
   methods: {
     async onLoadMetricClick() {
@@ -244,6 +276,44 @@ export default {
         }
       }
     },
+    async hideMetric(hidden) {
+      const confirmed = await this.$bvModal.msgBoxConfirm(this.metric.id, {
+        titleHtml: `Are you sure you want to ${
+          !hidden ? 'un' : ''
+        }hide the metric?`,
+        buttonSize: 'sm',
+        okVariant: 'danger',
+        okTitle: `Yes, ${!hidden ? 'un' : ''}hide it`,
+        cancelTitle: 'No, cancel',
+        footerClass: 'p-2',
+        hideHeaderClose: false,
+        centered: true,
+      })
+
+      if (confirmed) {
+        try {
+          const metrics = {}
+          metrics[this.metric.id] = hidden
+
+          await this.$axios.post(`/metrics/hide`, {
+            metrics,
+          })
+
+          this.$toast.success(`Successfully changed ${this.metric.id}!`)
+
+          Metric.update({
+            where: this.metric.id,
+            data: {
+              hidden,
+            },
+          })
+
+          this.$emit('hidden', hidden)
+        } catch (error) {
+          this.$toast.error(`Failed to update the metric!`)
+        }
+      }
+    },
     webviewLink() {
       return this.$webview.link([this.metric.id])
     },

diff --git a/components/MetricTable.vue b/components/MetricTable.vue
@@ -73,6 +73,9 @@
             <b-badge v-if="data.item.archived">
               <b-icon-archive-fill v-b-tooltip.hover title="Archived Metric" />
             </b-badge>
+            <b-badge v-if="data.item.hidden">
+              <b-icon-eye-slash-fill v-b-tooltip.hover title="Hidden Metric" />
+            </b-badge>
           </template>
           <template #cell(actions)="data">
             <b-button

diff --git a/models/Metric.js b/models/Metric.js
@@ -22,6 +22,7 @@ export default class Metric extends Model {
       sourceType: this.string('source').nullable(),
       sourceRef: this.morphTo('source', 'sourceType'),
       historic: this.boolean().nullable(),
+      hidden: this.boolean().nullable(),
       lastMetadataUpdateStr: this.string().nullable(),
       additionalMetadata: this.attr().nullable(),
       // Database settings
@@ -113,6 +114,7 @@ export default class Metric extends Model {
         rate,
         historic,
         archived,
+        hidden,
         date,
         ...unfilteredAdditionalMetadata
       } = currentValue
@@ -141,6 +143,7 @@ export default class Metric extends Model {
         sourceType,
         historic,
         archived,
+        hidden,
         rate,
         lastMetadataUpdateStr: date,
         additionalMetadata,

diff --git a/pages/metric/configure.vue b/pages/metric/configure.vue
@@ -135,7 +135,7 @@
             <b-col>
               <b-input-group prepend="Units">
                 <b-form-select
-                  id="unitFilter"
+                  id="unitFiltecr"
                   v-model="filterUnits"
                   :options="metricUnits"
                   :value="null"
@@ -317,6 +317,14 @@
             >
               Archive selected metrics
             </b-tooltip>
+            <b-button
+              v-b-tooltip.hover.noninteractive
+              :disabled="selected.length === 0"
+              title="Toggle metric visibility"
+              @click="onHideClicked"
+            >
+              <b-icon-eye-slash />
+            </b-button>
             <span id="delete-tooltip-target">
               <b-button
                 :disabled="selected.length === 0 || numSelectedHistoric > 0"
@@ -460,6 +468,13 @@ export default {
         .where('historic', true)
         .count()
     },
+    numSelectedHidden() {
+      return Metric.query()
+        .with('database')
+        .where('selected', true)
+        .where('hidden', true)
+        .count()
+    },
     numSelectedArchived() {
       return Metric.query()
         .with('database')