1<template>
2  <page-section :section-title="$t('pageFirmware.sectionTitleHostCards')">
3    <b-card-group deck>
4      <!-- Running image -->
5      <b-card>
6        <template #header>
7          <p class="font-weight-bold m-0">
8            {{ $t('pageFirmware.cardTitleRunning') }}
9          </p>
10        </template>
11        <dl class="mb-0">
12          <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
13          <dd class="mb-0">{{ runningVersion }}</dd>
14        </dl>
15      </b-card>
16
17      <!-- Backup image -->
18      <b-card>
19        <template #header>
20          <p class="font-weight-bold m-0">
21            {{ $t('pageFirmware.cardTitleBackup') }}
22          </p>
23        </template>
24        <dl class="mb-0">
25          <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
26          <dd class="mb-0">
27            <status-icon v-if="showBackupImageStatus" status="danger" />
28            <span v-if="showBackupImageStatus" class="sr-only">
29              {{ backupStatus }}
30            </span>
31            {{ backupVersion }}
32          </dd>
33        </dl>
34      </b-card>
35    </b-card-group>
36  </page-section>
37</template>
38
39<script>
40import PageSection from '@/components/Global/PageSection';
41
42export default {
43  components: { PageSection },
44  computed: {
45    running() {
46      return this.$store.getters['firmware/activeHostFirmware'];
47    },
48    backup() {
49      return this.$store.getters['firmware/backupHostFirmware'];
50    },
51    runningVersion() {
52      return this.running?.version || '--';
53    },
54    backupVersion() {
55      return this.backup?.version || '--';
56    },
57    backupStatus() {
58      return this.backup?.status || null;
59    },
60    showBackupImageStatus() {
61      return (
62        this.backupStatus === 'Critical' || this.backupStatus === 'Warning'
63      );
64    },
65  },
66};
67</script>
68
69<style lang="scss" scoped>
70.page-section {
71  margin-top: -$spacer * 1.5;
72}
73</style>
74