Add DetailURL and line breaks for descriptions

Signed-off-by: Knut Ahlers <knut@ahlers.me>

src/metric.vue

@@ -2,35 +2,56 @@
   <b-row class="mb-3">
     <b-col>
       <b-card :border-variant="variantFromStatus(metric.status)">
-
         <b-row slot="header">
           <b-col cols="7">
             <strong>{{ metric.title }}</strong>
+            <b-btn
+              v-if="metric.detail_url"
+              :href="metric.detail_url"
+            >
+              <i class="fa fa-external-link-alt" />
+            </b-btn>
           </b-col>
-          <b-col class="d-flex align-items-center" cols="5">
+          <b-col
-            <historyBar :metric="metric"></historyBar>
+            class="d-flex align-items-center"
+            cols="5"
+          >
+            <historyBar :metric="metric" />
           </b-col>
         </b-row>
 
-        <b-card-text>
+        <b-card-text v-html="description" />
-          {{ description }}
-        </b-card-text>
 
-        <graph :metric="metric" v-if="!metric.config.hide_mad"></graph>
+        <graph
+          v-if="!metric.config.hide_mad"
+          :metric="metric"
+        />
 
-        <div slot="footer" class="d-flex justify-content-between">
+        <div
+          slot="footer"
+          class="d-flex justify-content-between"
+        >
           <span>
-            <b-badge :variant="variantFromStatus(metric.status)" v-if="!metric.config.hide_value">Current value: {{ metric.value.toFixed(3) }}</b-badge>
+            <b-badge
+              v-if="!metric.config.hide_value"
+              :variant="variantFromStatus(metric.status)"
+            >Current value: {{ metric.value.toFixed(3) }}</b-badge>
             <span v-if="!metric.config.hide_mad">
               <abbr title="Median Absolute Deviation">MAD</abbr>: {{ metric.mad_multiplier.toFixed(3) }} above the median ({{ metric.median.toFixed(3) }})
             </span>
           </span>
           <small class="text-muted">
-            <span v-b-tooltip.hover :title="moment(metric.last_update).format('lll')">Updated {{ moment(metric.last_update).fromNow() }}</span>
+            <span
-            <span v-b-tooltip.hover :title="moment(metric.last_ok).format('lll')" v-if="metric.status !== 'OK'"> (Last OK {{ moment(metric.last_ok).fromNow() }})</span>
+              v-b-tooltip.hover
+              :title="moment(metric.last_update).format('lll')"
+            >Updated {{ moment(metric.last_update).fromNow() }}</span>
+            <span
+              v-if="metric.status !== 'OK'"
+              v-b-tooltip.hover
+              :title="moment(metric.last_ok).format('lll')"
+            > (Last OK {{ moment(metric.last_ok).fromNow() }})</span>
           </small>
         </div>
-
       </b-card>
     </b-col>
   </b-row>
@@ -43,8 +64,15 @@ import graph from './graph.vue'
 import historyBar from './history-bar.vue'
 
 export default {
-  name: 'metric',
+  name: 'Metric',
-  props: ['metric'],
+
+  components: { graph, historyBar },
+  props: {
+    metric: {
+      required: true,
+      type: Object,
+    },
+  },
 
   computed: {
     description() {
@@ -52,8 +80,6 @@ export default {
     },
   },
 
-  components: { graph, historyBar },
-
   methods: {
     moment,