Vue app to display output of health.json

HealthCheck.vue

<template>
  <div v-if="loading">
    Loading
  </div>
  <div v-else>
    <h1>{{ healthData.description }} <span :class="iconsFor(healthData.status)" /></h1>
    <template v-if="healthData.output">
      <h3>Problem summary:</h3>
      {{ healthData.output }}
    </template>
    <template v-if="healthData.notes">
      <h3>Notes:</h3>
      <ul>
        <li v-for="note in healthData.notes">
          {{ note }}
        </li>
      </ul>
    </template>
    <h3>Components:</h3>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Component</th>
          <th>Component ID</th>
          <th>Status</th>
          <th>Observed value</th>
          <th>Last updated</th>
          <th>Output</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="subcomponents, componentName in healthData.details">
          <tr v-for="sc, i in subcomponents">
            <th v-if="i == 0" :rowspan="subcomponents.length">
              {{ componentName }}
            </th>
            <td :class="backgroundFor(sc.status)">
              {{ sc.componentId }}
            </td>
            <td :class="backgroundFor(sc.status)">
              <span :class="iconsFor(sc.status)" /> {{ sc.status }}
            </td>
            <td :class="backgroundFor(sc.status)">
              {{ sc.observedValue }}
            </td>
            <td :class="backgroundFor(sc.status)" v-html="formatDate(sc.time)" />
            <td :class="backgroundFor(sc.status)">
              {{ sc.output }}
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from 'axios';
import { format, parseISO, formatDistanceToNow } from 'date-fns';

export default {
  props: {
    jsonEndpoint: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: true,
      healthData: null,
      originalTitle: document.title
    };
  },
  mounted () {
    axios
      .get(this.jsonEndpoint)
      .then(response => {
        this.loading = false;
        this.healthData = response.data;
        this.updateTitle();
      }).then(() => {
        $('[data-toggle="tooltip"]').tooltip()
      });
  },
  methods: {
    iconsFor(status) {
      return {
        'pass': ['glyphicon', 'glyphicon-ok', 'text-success'],
        'warn': ['glyphicon', 'glyphicon-warning-sign', 'text-warning'],
        'fail': ['glyphicon', 'glyphicon-exclamation-sign', 'text-danger'],
      }[status];
    },
    backgroundFor(status) {
      return {
        'pass': ['success'],
        'warn': ['warning'],
        'fail': ['danger'],
      }[status];
    },
    formatDate(date) {
      let d = parseISO(date);
      let title = format(d, 'M/d/yy h:mma');
      return `<u data-toggle="tooltip" href="#" title="${title}">${formatDistanceToNow(d)} ago</u>`;
    },
    updateTitle() {
      let icons = {
        'pass': '✔',
        'warn': '⚠️',
        'fail': '❗'
      };
      // TODO: update favicon as well. This requires having images for each status
      document.title = `${icons[this.healthData.status]} ${this.originalTitle}`;
    }
  }
};
</script>