Skip to content

G
gitlab-ce
Commit dca25122 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Jacob Schatz
Browse files
Options

Adds empty state to deploy boards

parent fcb82e83
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 1 deletion
app/assets/javascripts/environments/components/deploy_board_component.js.es6
View file @ dca25122
......@@ -110,7 +110,11 @@ module.exports = {
computed: {
canRenderDeployBoard() {
return !this.isLoading && !this.hasError && Object.keys(this.deployBoardData).length;
return !this.isLoading && !this.hasError && this.deployBoardData.valid;
},
canRenderEmptyState() {
return !this.isLoading && !this.hasError && !this.deployBoardData.valid;
},
instanceTitle() {
......@@ -124,6 +128,10 @@ module.exports = {
return title;
},
projecName() {
return '<projectname>';
},
},
template: `
......@@ -174,6 +182,46 @@ module.exports = {
</section>
</div>
<div v-if="canRenderEmptyState">
<section class="deploy-board-empty-state-svg">
<svg width="55" height="44" viewBox="0 0 55 44" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1.488 .803)">
<rect stroke="#E5E5E5" stroke-width="1.6" fill="#FFF" width="42" height="42" rx="4"/>
<rect stroke="#E7E7E7" stroke-width="1.6" fill="#FFF" x="6" y="12" width="7.171" height="24" rx="2"/>
<rect stroke="#B5A7DD" stroke-width="1.6" fill="#FFF" x="6" y="5" width="32.17" height="3.5" rx="1.75"/>
<rect stroke="#FDE5D8" stroke-width="1.6" fill="#FFF" x="17" y="12" width="21.17" height="24" rx="2"/>
<rect fill="#E52C5A" x="19.74" y="14.197" width="7.171" height="2.408" rx="1.204"/>
<rect fill="#E5E5E5" x="28.35" y="18.272" width="7.171" height="2.408" rx="1.204"/>
<rect fill="#E5E5E5" x="19.74" y="26.697" width="15.943" height="2.408" rx="1.204"/>
<rect fill="#E5E5E5" x="19.74" y="30.697" width="15.943" height="2.408" rx="1.204"/>
<rect fill="#E52C5A" x="21.911" y="21.272" width="4.78" height="2.408" rx="1.204"/>
<rect fill="#FC8A51" x="28.472" y="22.429" width="7.171" height="2.408" rx="1.204"/>
<rect fill="#FDE5D8" x="26.691" y="8.429" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#FF8340" x="8.512" y="14.85" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#E52C5A" x="8.512" y="19.197" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#FF8340" x="8.512" y="31.197" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#E7E7E7" x="8.512" y="27.197" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#B5A7DD" x="8.512" y="23.197" width="2.39" height="2.408" rx="1.195"/>
</g>
<g transform="rotate(-45 33.371 -12.99)">
<ellipse stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".1" fill="#FFF" cx="11.951" cy="12.041" rx="11.951" ry="12.041"/>
<path d="M5.536 22.29c5.716 3.3 13.046 1.307 16.37-4.452 3.326-5.759 1.387-13.103-4.329-16.403" stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".3" fill="#FFF"/>
<rect fill="#6B4FBB" x="9.561" y="23.279" width="4.78" height="13.646" rx="2.39"/>
</g>
</g>
</svg>
</section>
<section class="deploy-board-empty-state-text">
<span class="title">Kubernetes deployment not found</span>
<span>
To see deployment progress for your environments, make sure your deployments are in Kubernetes namespace
<code>{{projecName}}</code> and labeled with <code>app=$CI_ENVIRONMENT_SLUG</code>.
</span>
</section>
</div>
<div v-if="!isLoading && hasError" class="deploy-board-error-message">
We can't fetch the data right now. Please try again later.
</div>
......
app/assets/stylesheets/pages/environments.scss
View file @ dca25122
......@@ -200,6 +200,25 @@
&.deploy-board-error-message {
justify-content: center;
}
.deploy-board-empty-state-svg {
order: 1;
width: 90px;
margin: auto 0 auto 20px;
}
.deploy-board-empty-state-text {
order: 2;
flex-wrap: wrap;
margin: auto auto 15px 0;
.title {
order: 1;
display: flex;
font-size: 17px;
line-height: 40px;
}
}
}
.deploy-board-instance {
......
app/views/shared/empty_states/icons/_deploy_board.svg 0 → 100644
View file @ dca25122
<svg width="55" height="44" viewBox="0 0 55 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(1.488 .803)"><rect stroke="#E5E5E5" stroke-width="1.6" fill="#FFF" width="42" height="42" rx="4"/><rect stroke="#E7E7E7" stroke-width="1.6" fill="#FFF" x="6" y="12" width="7.171" height="24" rx="2"/><rect stroke="#B5A7DD" stroke-width="1.6" fill="#FFF" x="6" y="5" width="32.17" height="3.5" rx="1.75"/><rect stroke="#FDE5D8" stroke-width="1.6" fill="#FFF" x="17" y="12" width="21.17" height="24" rx="2"/><rect fill="#E52C5A" x="19.74" y="14.197" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="28.35" y="18.272" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="26.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="30.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E52C5A" x="21.911" y="21.272" width="4.78" height="2.408" rx="1.204"/><rect fill="#FC8A51" x="28.472" y="22.429" width="7.171" height="2.408" rx="1.204"/><rect fill="#FDE5D8" x="26.691" y="8.429" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="14.85" width="2.39" height="2.408" rx="1.195"/><rect fill="#E52C5A" x="8.512" y="19.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="31.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#E7E7E7" x="8.512" y="27.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#B5A7DD" x="8.512" y="23.197" width="2.39" height="2.408" rx="1.195"/></g><g transform="rotate(-45 33.371 -12.99)"><ellipse stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".1" fill="#FFF" cx="11.951" cy="12.041" rx="11.951" ry="12.041"/><path d="M5.536 22.29c5.716 3.3 13.046 1.307 16.37-4.452 3.326-5.759 1.387-13.103-4.329-16.403" stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".3" fill="#FFF"/><rect fill="#6B4FBB" x="9.561" y="23.279" width="4.78" height="13.646" rx="2.39"/></g></g></svg>
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7