From 6a192d526c9efebf7a614a9aa473eee62e555fc5 Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Thu, 2 Sep 2021 15:26:58 -0500
Subject: Update overview layout

Layout updates uses bootstrap vue cards to display
general information. View more links and download
or export ability has been added to the overview page.

Network settings displays the hostname and the first IP
address for the first ethernet interface. Link status
was also added.

TODO: Add idle power and power mode properties in seperate
commit for each story.

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Iaf0720d76b2a9416f068a1e779ede59bffda9727
---
 src/views/Overview/OverviewQuickLinks.vue | 119 +++++++-----------------------
 1 file changed, 25 insertions(+), 94 deletions(-)

(limited to 'src/views/Overview/OverviewQuickLinks.vue')

diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 1dc2c984..bc579b03 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -1,56 +1,28 @@
 <template>
-  <div class="quicklinks form-background">
-    <div>
-      <dl>
-        <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt>
-        <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
-          {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
-        </dd>
-        <dd v-else>--</dd>
-      </dl>
-    </div>
-    <div>
-      <dl>
-        <dt>{{ $t('pageOverview.quicklinks.serverLed') }}</dt>
-        <dd>
-          <b-form-checkbox
-            v-model="indicatorLedActiveState"
-            data-test-id="overviewQuickLinks-checkbox-serverLed"
-            name="check-button"
-            switch
-            @change="onChangeServerLed"
-          >
-            <span v-if="indicatorLedActiveState">
-              {{ $t('global.status.on') }}
-            </span>
-            <span v-else>{{ $t('global.status.off') }}</span>
-          </b-form-checkbox>
-        </dd>
-      </dl>
-    </div>
-    <div>
-      <b-button
-        to="/settings/network"
-        variant="secondary"
-        data-test-id="overviewQuickLinks-button-networkSettings"
-        class="d-flex justify-content-between align-items-center"
-      >
-        {{ $t('pageOverview.quicklinks.editNetworkSettings') }}
-        <icon-arrow-right />
-      </b-button>
-    </div>
-    <div>
-      <b-button
-        to="/operations/serial-over-lan"
-        variant="secondary"
-        data-test-id="overviewQuickLinks-button-solConsole"
-        class="d-flex justify-content-between align-items-center"
-      >
-        {{ $t('pageOverview.quicklinks.solConsole') }}
-        <icon-arrow-right />
-      </b-button>
-    </div>
-  </div>
+  <b-card bg-variant="light" border-variant="light">
+    <b-row class="d-flex justify-content-between align-items-center">
+      <b-col sm="6" lg="9" class="mb-2 mt-2">
+        <dl>
+          <dt>{{ $t('pageOverview.bmcTime') }}</dt>
+          <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
+            {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+          </dd>
+          <dd v-else>--</dd>
+        </dl>
+      </b-col>
+      <b-col sm="6" lg="3" class="mb-2 mt-2">
+        <b-button
+          to="/operations/serial-over-lan"
+          variant="secondary"
+          data-test-id="overviewQuickLinks-button-solConsole"
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{ $t('pageOverview.solConsole') }}
+          <icon-arrow-right />
+        </b-button>
+      </b-col>
+    </b-row>
+  </b-card>
 </template>
 
 <script>
@@ -67,33 +39,12 @@ export default {
     bmcTime() {
       return this.$store.getters['global/bmcTime'];
     },
-    indicatorLedActiveState: {
-      get() {
-        return this.$store.getters['serverLed/getIndicatorLedActiveState'];
-      },
-      set(value) {
-        return value;
-      },
-    },
   },
   created() {
-    Promise.all([
-      this.$store.dispatch('global/getBmcTime'),
-      this.$store.dispatch('serverLed/getIndicatorLedActiveState'),
-    ]).finally(() => {
+    Promise.all([this.$store.dispatch('global/getBmcTime')]).finally(() => {
       this.$root.$emit('overview-quicklinks-complete');
     });
   },
-  methods: {
-    onChangeServerLed(indicatorLedActiveState) {
-      this.$store
-        .dispatch(
-          'serverLed/saveIndicatorLedActiveState',
-          indicatorLedActiveState
-        )
-        .catch(({ message }) => this.errorToast(message));
-    },
-  },
 };
 </script>
 
@@ -102,24 +53,4 @@ dd,
 dl {
   margin: 0;
 }
-
-.quicklinks {
-  display: grid;
-  grid-gap: 1rem;
-  padding: 1rem;
-  white-space: nowrap;
-  align-items: center;
-}
-
-@include media-breakpoint-up(sm) {
-  .quicklinks {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .quicklinks {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
 </style>
-- 
cgit v1.2.3

