<template>
  <div>
    <h2>
      <span id="health-page-heading" data-cy="healthPageHeading">{{ t$('health.title') }}</span>
      <button class="btn btn-primary float-end" @click="refresh()" :disabled="updatingHealth">
        <font-awesome-icon icon="sync"></font-awesome-icon> <span>{{ t$("health['refresh.button']") }}</span>
      </button>
    </h2>
    <div class="table-responsive">
      <table id="healthCheck" class="table table-striped" aria-describedby="Health check">
        <thead>
          <tr>
            <th scope="col">{{ t$('health.table.service') }}</th>
            <th class="text-center" scope="col">{{ t$('health.table.status') }}</th>
            <th class="text-center" scope="col">{{ t$('health.details.details') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="health of healthData" :key="health.name">
            <td><span />{{ t$('health.indicator.' + baseName(health.name)) }} {{ subSystemName(health.name) }}</td>
            <td class="text-center">
              <span class="badge" :class="getBadgeClass(health.status)">{{ t$('health.status.' + health.status) }}</span>
            </td>
            <td class="text-center">
              <a class="hand" @click="showHealth(health)" v-if="health.details || health.error">
                <font-awesome-icon icon="eye"></font-awesome-icon>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <b-modal ref="healthModal" ok-only>
      <template #title>
        <h4 v-if="currentHealth" class="modal-title" id="showHealthLabel">
          <span>{{ t$('health.indicator.' + baseName(currentHealth.name)) }}</span>
          {{ subSystemName(currentHealth.name) }}
        </h4>
      </template>
      <health-modal :current-health="currentHealth"></health-modal>
    </b-modal>
  </div>
</template>

<script lang="ts" src="./health.component.ts"></script>
