1<template>
2  <div class="quicklinks form-background">
3    <div>
4      <dl>
5        <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt>
6        <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-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="indicatorLedActiveState"
18            data-test-id="overviewQuickLinks-checkbox-serverLed"
19            name="check-button"
20            switch
21            @change="onChangeServerLed"
22          >
23            <span v-if="indicatorLedActiveState">
24              {{ $t('global.status.on') }}
25            </span>
26            <span v-else>{{ $t('global.status.off') }}</span>
27          </b-form-checkbox>
28        </dd>
29      </dl>
30    </div>
31    <div>
32      <b-button
33        to="/settings/network"
34        variant="secondary"
35        data-test-id="overviewQuickLinks-button-networkSettings"
36        class="d-flex justify-content-between align-items-center"
37      >
38        {{ $t('pageOverview.quicklinks.editNetworkSettings') }}
39        <icon-arrow-right />
40      </b-button>
41    </div>
42    <div>
43      <b-button
44        to="/operations/serial-over-lan"
45        variant="secondary"
46        data-test-id="overviewQuickLinks-button-solConsole"
47        class="d-flex justify-content-between align-items-center"
48      >
49        {{ $t('pageOverview.quicklinks.solConsole') }}
50        <icon-arrow-right />
51      </b-button>
52    </div>
53  </div>
54</template>
55
56<script>
57import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
58import BVToastMixin from '@/components/Mixins/BVToastMixin';
59
60export default {
61  name: 'QuickLinks',
62  components: {
63    IconArrowRight: ArrowRight16,
64  },
65  mixins: [BVToastMixin],
66  computed: {
67    bmcTime() {
68      return this.$store.getters['global/bmcTime'];
69    },
70    indicatorLedActiveState: {
71      get() {
72        return this.$store.getters['serverLed/getIndicatorLedActiveState'];
73      },
74      set(value) {
75        return value;
76      },
77    },
78  },
79  created() {
80    Promise.all([
81      this.$store.dispatch('global/getBmcTime'),
82      this.$store.dispatch('serverLed/getIndicatorLedActiveState'),
83    ]).finally(() => {
84      this.$root.$emit('overview-quicklinks-complete');
85    });
86  },
87  methods: {
88    onChangeServerLed(indicatorLedActiveState) {
89      this.$store
90        .dispatch(
91          'serverLed/saveIndicatorLedActiveState',
92          indicatorLedActiveState
93        )
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