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

22
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> <h4 class="state-title">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4 class="text-center state-title">
{{currentState.title}} {{currentState.title}}
</h4> </h4>
</div> <p class="state-description">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="description-text text-center state-description">
{{currentState.description}} {{currentState.description}}
<a v-if="showButtonDescription" :href="settingsPath"> <a v-if="showButtonDescription" :href="settingsPath">
Prometheus server Prometheus server
</a> </a>
</div> </p>
</div> <div class="state-button">
</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"> <a class="btn btn-success" :href="buttonPath">
{{currentState.buttonText}} {{currentState.buttonText}}
</a> </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;
} }
} }