Cleans up Deploy Boards CSS

Removes unused CSS
Replaces CSS with utility classes

ee/app/assets/javascripts/environments/components/deploy_board_component.vue

@@ -84,18 +84,18 @@ export default {
     <div v-if="canRenderDeployBoard">
       <section class="deploy-board-information">
         <span v-tooltip :title="instanceIsCompletedText">
-          <span class="percentage">{{ deployBoardData.completion }}%</span>
-          <span class="text">Complete</span>
+          <span class="percentage text-center text-plain">{{ deployBoardData.completion }}%</span>
+          <span class="text text-center text-secondary">Complete</span>
         </span>
       </section>
 
       <section class="deploy-board-instances">
-        <p class="text">
+        <p class="deploy-board-instances-text text-secondary">
           <span>{{ instanceTitle }}</span>
           <span class="total-instances">({{ instanceCount }})</span>
         </p>
 
-        <div class="deploy-board-instances-container">
+        <div class="deploy-board-instances-container d-flex flex-wrap flex-row">
           <template v-for="(instance, i) in deployBoardData.instances">
             <instance-component
               :key="i"
@@ -139,7 +139,7 @@ export default {
       <section class="deploy-board-empty-state-svg" v-html="deployBoardSvg"></section>
 
       <section class="deploy-board-empty-state-text">
-        <span class="title">Kubernetes deployment not found</span>
+        <span class="deploy-board-empty-state-title d-flex">Kubernetes deployment not found</span>
         <span>
           To see deployment progress for your environments, make sure your deployments are in
           Kubernetes namespace <code>{{ projectName }}</code> and labeled with

ee/app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -201,7 +201,7 @@ export default {
       <icon :size="16" name="arrow-down" aria-hidden="true" class="chevron" />
     </button>
     <div ref="dropdownMenu" :class="{ show: isOpen }" class="dropdown-menu alert-dropdown-menu">
-      <div class="dropdown-title">
+      <div class="dropdown-title m0">
         <span>{{ dropdownTitle }}</span>
         <button
           class="dropdown-title-button dropdown-menu-close"

ee/app/assets/javascripts/monitoring/components/alert_widget_form.vue

@@ -194,7 +194,7 @@ export default {
         ref="cancelButton"
         :disabled="formDisabled"
         type="button"
-        class="btn btn-default"
+        class="btn btn-default prepend-left-8"
         @click="handleCancel"
       >
         {{ __('Cancel') }}
@@ -204,7 +204,7 @@ export default {
         :class="submitButtonClass"
         :disabled="isSubmitDisabled"
         type="button"
-        class="btn btn-inverted"
+        class="btn btn-inverted prepend-left-8"
         @click="handleSubmit"
       >
         {{ submitActionText }}

ee/app/assets/stylesheets/pages/environments.scss

@@ -6,13 +6,6 @@
   background-color: $gray-light;
   min-height: 20px;
 
-  .fa-spinner {
-    margin: 0 auto;
-    width: 20px;
-    display: block;
-    font-size: 20px;
-  }
-
   > div {
     display: flex;
     justify-content: space-between;
@@ -24,36 +17,20 @@
       flex-wrap: wrap;
       justify-content: center;
       margin: 20px 0 20px 5px;
-
-      > span {
-        text-align: center;
-      }
-
-      .percentage {
-        color: $gl-text-color;
-      }
-
-      .text {
-        color: $gl-text-color-secondary;
-      }
     }
 
     .deploy-board-instances {
       order: 2;
       margin-left: 20px;
       width: 100%;
+    }
 
-      .text {
-        color: $gl-text-color-secondary;
-        font-size: 12px;
-      }
-
-      .deploy-board-instances-container {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        margin-top: -8px;
-      }
+    .deploy-board-instances-text {
+      font-size: 12px;
+    }
+
+    .deploy-board-instances-container {
+      margin-top: -8px;
     }
 
     .deploy-board-actions {
@@ -78,12 +55,12 @@
       flex-wrap: wrap;
       margin: auto auto 15px 0;
 
-      .title {
-        order: 1;
-        display: flex;
-        font-size: 17px;
-        line-height: 40px;
-      }
+    }
+
+    .deploy-board-empty-state-title {
+      order: 1;
+      font-size: 17px;
+      line-height: 40px;
     }
   }
 }
@@ -114,11 +91,7 @@
     border-color: $green-400;
   }
 
-  &-failed {
-    background-color: $red-200;
-    border-color: $red-500;
-  }
-
+  &-failed,
   &-unknown {
     background-color: $red-200;
     border-color: $red-500;
@@ -156,19 +129,6 @@
   }
 }
 
-.cluster-health-graphs {
-  .prometheus-state {
-    .state-svg img {
-      max-height: 120px;
-    }
-
-    .state-description,
-    .state-button {
-      display: none;
-    }
-  }
-}
-
 .alert-dropdown-button {
   margin-left: $btn-side-margin;
 
@@ -194,10 +154,6 @@
   right: 0;
   left: auto;
   z-index: $zindex-popover + 5; // must be higher than graph flag popover
-
-  .dropdown-title {
-    margin: 0;
-  }
 }
 
 .alert-error-message {
@@ -226,10 +182,6 @@
       box-shadow: none;
     }
   }
-
-  .action-group .btn + .btn {
-    margin-left: $gl-padding-8;
-  }
 }
 
 .canary-deployment-callout {

ee/spec/javascripts/environments/deploy_board_component_spec.js

@@ -74,7 +74,9 @@ describe('Deploy Board', () => {
     it('should render the empty state', () => {
       expect(component.$el.querySelector('.deploy-board-empty-state-svg svg')).toBeDefined();
       expect(
-        component.$el.querySelector('.deploy-board-empty-state-text .title').textContent,
+        component.$el.querySelector(
+          '.deploy-board-empty-state-text .deploy-board-empty-state-title',
+        ).textContent,
       ).toContain('Kubernetes deployment not found');
     });
   });