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="/configuration/network-settings"
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="/control/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        .then((message) => this.successToast(message))
95        .catch(({ message }) => this.errorToast(message));
96    },
97  },
98};
99</script>
100
101<style lang="scss" scoped>
102dd,
103dl {
104  margin: 0;
105}
106
107.quicklinks {
108  display: grid;
109  grid-gap: 1rem;
110  padding: 1rem;
111  white-space: nowrap;
112  align-items: center;
113}
114
115@include media-breakpoint-up(sm) {
116  .quicklinks {
117    grid-template-columns: repeat(2, 1fr);
118  }
119}
120
121@include media-breakpoint-up(xl) {
122  .quicklinks {
123    grid-template-columns: repeat(4, 1fr);
124  }
125}
126</style>
127