1<template>
2  <div class="quicklinks form-background">
3    <div>
4      <dl>
5        <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt>
6        <dd v-if="bmcTime">
7          {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
8        </dd>
9        <dd v-else>--</dd>
10      </dl>
11    </div>
12    <div>
13      <dl>
14        <dt>{{ $t('pageOverview.quicklinks.serverLed') }}</dt>
15        <dd>
16          <b-form-checkbox
17            v-model="serverLedChecked"
18            data-test-id="overviewQuickLinks-checkbox-serverLed"
19            name="check-button"
20            switch
21            value="Lit"
22            unchecked-value="Off"
23            @change="onChangeServerLed"
24          >
25            <span v-if="serverLedChecked !== 'Off'">
26              {{ $t('global.status.on') }}
27            </span>
28            <span v-else>{{ $t('global.status.off') }}</span>
29          </b-form-checkbox>
30        </dd>
31      </dl>
32    </div>
33    <div>
34      <b-button
35        to="/configuration/network-settings"
36        variant="secondary"
37        data-test-id="overviewQuickLinks-button-networkSettings"
38        class="d-flex justify-content-between align-items-center"
39      >
40        <span>{{ $t('pageOverview.quicklinks.editNetworkSettings') }}</span>
41        <icon-arrow-right />
42      </b-button>
43    </div>
44    <div>
45      <b-button
46        to="/control/serial-over-lan"
47        variant="secondary"
48        data-test-id="overviewQuickLinks-button-solConsole"
49        class="d-flex justify-content-between align-items-center"
50      >
51        <span>{{ $t('pageOverview.quicklinks.solConsole') }}</span>
52        <icon-arrow-right />
53      </b-button>
54    </div>
55  </div>
56</template>
57
58<script>
59import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
60import BVToastMixin from '@/components/Mixins/BVToastMixin';
61
62export default {
63  name: 'QuickLinks',
64  components: {
65    IconArrowRight: ArrowRight16
66  },
67  mixins: [BVToastMixin],
68  computed: {
69    bmcTime() {
70      return this.$store.getters['global/bmcTime'];
71    },
72    serverLedChecked: {
73      get() {
74        return this.$store.getters['serverLed/getIndicatorValue'];
75      },
76      set(value) {
77        return value;
78      }
79    }
80  },
81  created() {
82    Promise.all([
83      this.$store.dispatch('global/getBmcTime'),
84      this.$store.dispatch('serverLed/getIndicatorValue')
85    ]).finally(() => {
86      this.$root.$emit('overview::quicklinks::complete');
87    });
88  },
89  methods: {
90    onChangeServerLed(value) {
91      this.$store
92        .dispatch('serverLed/saveIndicatorLedValue', value)
93        .then(message => this.successToast(message))
94        .catch(({ message }) => this.errorToast(message));
95    }
96  }
97};
98</script>
99
100<style lang="scss" scoped>
101dd,
102dl {
103  margin: 0;
104}
105
106.quicklinks {
107  display: grid;
108  grid-gap: 1rem;
109  padding: 1rem;
110  white-space: nowrap;
111  align-items: center;
112}
113
114@include media-breakpoint-up(sm) {
115  .quicklinks {
116    grid-template-columns: repeat(2, 1fr);
117  }
118}
119
120@include media-breakpoint-up(xl) {
121  .quicklinks {
122    grid-template-columns: repeat(4, 1fr);
123  }
124}
125</style>
126