kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Resolve "Monitoring graph empty states are gigantic on screen-sm viewport sizes"

Browse source
This commit is contained in:
Mike Greiling 2017-10-05 08:13:04 +00:00 committed by Phil Hughes
parent 0a567f234e
commit 3c484861c5
3 changed files with 22 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/assets/javascripts/monitoring/components/empty_state.vue
View file

@ -73,34 +73,22 @@
<template>
<div class="prometheus-state">
<div class="row">
<div class="col-md-4 col-md-offset-4 state-svg svg-content">
<img :src="currentState.svgUrl"/>
</div>
<div class="state-svg svg-content">
<img :src="currentState.svgUrl"/>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4 class="text-center state-title">
{{currentState.title}}
</h4>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="description-text text-center state-description">
{{currentState.description}}
<a v-if="showButtonDescription" :href="settingsPath">
Prometheus server
</a>
</div>
</div>
</div>
<div class="row state-button-section">
<div class="col-md-4 col-md-offset-4 text-center state-button">
<a class="btn btn-success" :href="buttonPath">
{{currentState.buttonText}}
</a>
</div>
<h4 class="state-title">
{{currentState.title}}
</h4>
<p class="state-description">
{{currentState.description}}
<a v-if="showButtonDescription" :href="settingsPath">
Prometheus server
</a>
</p>
<div class="state-button">
<a class="btn btn-success" :href="buttonPath">
{{currentState.buttonText}}
</a>
</div>
</div>
</template>

5
app/assets/javascripts/monitoring/monitoring_bundle.js
View file

@ -3,8 +3,5 @@ import Dashboard from './components/dashboard.vue';
document.addEventListener('DOMContentLoaded', () => new Vue({
el: '#prometheus-graphs',
components: {
Dashboard,
},
render: createElement => createElement('dashboard'),
render: createElement => createElement(Dashboard),
}));

9
app/assets/stylesheets/pages/environments.scss
View file

@ -207,10 +207,13 @@
}
.prometheus-state {
margin-top: 10px;
max-width: 430px;
margin: 10px auto;
text-align: center;
.state-button-section {
margin-top: 10px;
.state-svg {
max-width: 80vw;
margin: 0 auto;
}
}