Commit 5fdca34d authored by Filipa Lacerda's avatar Filipa Lacerda

Adds CSS and js logic to render new canary colors

parent 5470f02c
......@@ -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>
......
......@@ -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;
},
},
......
......@@ -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 {
......
......@@ -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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment