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            @change="onChangeServerLed"
22          >
23            <span v-if="serverLedChecked">
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    serverLedChecked: {
71      get() {
72        return this.$store.getters['serverLed/getIndicatorValue'];
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/getIndicatorValue'),
83    ]).finally(() => {
84      this.$root.$emit('overview-quicklinks-complete');
85    });
86  },
87  methods: {
88    onChangeServerLed(value) {
89      this.$store
90        .dispatch('serverLed/saveIndicatorLedValue', value)
91        .then((message) => this.successToast(message))
92        .catch(({ message }) => this.errorToast(message));
93    },
94  },
95};
96</script>
97
98<style lang="scss" scoped>
99dd,
100dl {
101  margin: 0;
102}
103
104.quicklinks {
105  display: grid;
106  grid-gap: 1rem;
107  padding: 1rem;
108  white-space: nowrap;
109  align-items: center;
110}
111
112@include media-breakpoint-up(sm) {
113  .quicklinks {
114    grid-template-columns: repeat(2, 1fr);
115  }
116}
117
118@include media-breakpoint-up(xl) {
119  .quicklinks {
120    grid-template-columns: repeat(4, 1fr);
121  }
122}
123</style>
124