Adds CSS and js logic to render new canary colors

app/assets/javascripts/environments/components/deploy_board_component.js

@@ -163,7 +163,8 @@ export default {
             <template v-for="instance in deployBoardData.instances">
               <instance-component
                 :status="instance.status"
-                :tooltipText="instance.tooltip"/>
+                :tooltipText="instance.tooltip"
+                :stable="instance.stable" />
             </template>
           </div>
         </section>

app/assets/javascripts/environments/components/deploy_board_instance_component.js

@@ -7,6 +7,9 @@
  * see more information about this in
  * https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
  *
+ * An instance can represent a normal deploy or a canary deploy. In the latter we need to provide
+ * this information in the tooltip and the colors.
+ * Mockup is https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1551#note_26595150
  */
 
 export default {
@@ -28,11 +31,23 @@ export default {
       required: false,
       default: '',
     },
+
+    stable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 
   computed: {
     cssClass() {
-      return `deploy-board-instance-${this.status}`;
+      let cssClassName = `deploy-board-instance-${this.status}`;
+
+      if (!this.stable) {
+        cssClassName = `deploy-board-instance-${this.status} deploy-board-instance-canary`;
+      }
+
+      return cssClassName;
     },
   },
 

app/assets/stylesheets/pages/environments.scss

@@ -240,6 +240,9 @@
   border-width: 1px;
   border-style: solid;
   margin: 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   &-finished {
     background-color: $green-100;
@@ -270,6 +273,17 @@
     background-color: $white-light;
     border-color: $border-color;
   }
+
+  &.deploy-board-instance-canary {
+    &::after {
+      width: 7px;
+      height: 7px;
+      border: 1px solid $white-light;
+      background-color: $orange-300;
+      border-radius: 50px;
+      content: "";
+    }
+  }
 }
 
 .deploy-board-icon i {

spec/javascripts/environments/deploy_board_instance_component_spec.js

@@ -30,4 +30,15 @@ describe('Deploy Board Instance', () => {
     expect(component.$el.classList.contains('deploy-board-instance-deploying')).toBe(true);
     expect(component.$el.getAttribute('data-title')).toEqual('');
   });
+
+  it('should render a div with canary class when stable prop is provided as false', () => {
+    const component = new DeployBoardInstanceComponent({
+      propsData: {
+        status: 'deploying',
+        stable: false,
+      },
+    }).$mount();
+
+    expect(component.$el.classList.contains('deploy-board-instance-canary')).toBe(true);
+  });
 });