From 152a8dc802503449a9fe586ffdd71188c0f9d580 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Thu, 17 Aug 2023 15:01:47 +0200
Subject: [PATCH] Move warning banner below welcome card

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../pkg/epinio/pages/c/_cluster/dashboard.vue | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
index 1d10432..1a0cee5 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/dashboard.vue
@@ -208,24 +208,6 @@ export default Vue.extend<any, any, any, any>({
 
 <template>
   <div class="dashboard">
-    <Banner
-      v-if="availableCpu < threshold.cpu || availableMemory < threshold.memory"
-      class="warning"
-      color="warning"
-    >
-      <span>
-        {{ t('epinio.intro.warning.lowResources', {
-          availability: ''
-            + (availableCpu < threshold.cpu ? t('epinio.intro.warning.availability', { resource: 'cpu', percentage: availableCpu }) : '')
-            + (availableCpu < threshold.cpu && availableMemory < threshold.memory ? ', ' : '')
-            + (availableMemory < threshold.memory ? t('epinio.intro.warning.availability', { resource: 'memory', percentage: availableMemory }) : '')
-        }) }}
-      </span>
-      <a
-        class="cluster-link"
-        @click="openMetricsDetails"
-      >{{ t('epinio.intro.warning.link.label') }}</a>
-    </Banner>
     <div class="head">
       <div class="head-title">
         <h1>{{ t('epinio.intro.welcome') }}</h1>
@@ -259,6 +241,26 @@ export default Vue.extend<any, any, any, any>({
         </n-link>
       </div>
     </div>
+
+    <Banner
+      v-if="availableCpu < threshold.cpu || availableMemory < threshold.memory"
+      class="warning"
+      color="warning"
+    >
+      <span>
+        {{ t('epinio.intro.warning.lowResources', {
+          availability: ''
+            + (availableCpu < threshold.cpu ? t('epinio.intro.warning.availability', { resource: 'cpu', percentage: availableCpu }) : '')
+            + (availableCpu < threshold.cpu && availableMemory < threshold.memory ? ', ' : '')
+            + (availableMemory < threshold.memory ? t('epinio.intro.warning.availability', { resource: 'memory', percentage: availableMemory }) : '')
+        }) }}
+      </span>
+      <a
+        class="cluster-link"
+        @click="openMetricsDetails"
+      >{{ t('epinio.intro.warning.link.label') }}</a>
+    </Banner>
+
     <div class="get-started">
       <div
         v-for="(card, index) in sectionContent"
@@ -389,9 +391,17 @@ export default Vue.extend<any, any, any, any>({
 </style>
 
 <style lang="scss">
-  .warning .banner__content {
+  .warning {
+
+    &.banner {
+      margin-top: 0;
+      margin-bottom: 20px;
+    }
+
+    &.banner__content {
     .cluster-link {
       cursor: pointer;
+      }
     }
   }
 </style>