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';
41import { useI18n } from 'vue-i18n';
42
43export default {
44  components: { PageSection },
45  data() {
46    return {
47      $t: useI18n().t,
48    };
49  },
50  computed: {
51    running() {
52      return this.$store.getters['firmware/activeHostFirmware'];
53    },
54    backup() {
55      return this.$store.getters['firmware/backupHostFirmware'];
56    },
57    runningVersion() {
58      return this.running?.version || '--';
59    },
60    backupVersion() {
61      return this.backup?.version || '--';
62    },
63    backupStatus() {
64      return this.backup?.status || null;
65    },
66    showBackupImageStatus() {
67      return (
68        this.backupStatus === 'Critical' || this.backupStatus === 'Warning'
69      );
70    },
71  },
72};
73</script>
74
75<style lang="scss" scoped>
76@import '@/assets/styles/bmc/helpers/_index.scss';
77@import '@/assets/styles/bootstrap/_helpers.scss';
78
79@import '@/assets/styles/bootstrap/_helpers.scss';
80
81.page-section {
82  margin-top: -$spacer * 1.5;
83}
84</style>
85