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> <template>
<div class="prometheus-state"> <div class="prometheus-state">
<div class="row"> <div class="state-svg svg-content">
<div class="col-md-4 col-md-offset-4 state-svg svg-content"> <img :src="currentState.svgUrl"/>
<img :src="currentState.svgUrl"/>
</div>
</div> </div>
<div class="row"> <h4 class="state-title">
<div class="col-md-6 col-md-offset-3"> {{currentState.title}}
<h4 class="text-center state-title"> </h4>
{{currentState.title}} <p class="state-description">
</h4> {{currentState.description}}
</div> <a v-if="showButtonDescription" :href="settingsPath">
</div> Prometheus server
<div class="row"> </a>
<div class="col-md-6 col-md-offset-3"> </p>
<div class="description-text text-center state-description"> <div class="state-button">
{{currentState.description}} <a class="btn btn-success" :href="buttonPath">
<a v-if="showButtonDescription" :href="settingsPath"> {{currentState.buttonText}}
Prometheus server </a>
</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>
</div> </div>
</div> </div>
</template> </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({ document.addEventListener('DOMContentLoaded', () => new Vue({
el: '#prometheus-graphs', el: '#prometheus-graphs',
components: { render: createElement => createElement(Dashboard),
Dashboard,
},
render: createElement => createElement('dashboard'),
})); }));

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

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