diff options
author | George Tsiolis <tsiolis.g@gmail.com> | 2018-11-14 18:46:25 +0200 |
---|---|---|
committer | George Tsiolis <tsiolis.g@gmail.com> | 2018-11-26 16:41:35 +0200 |
commit | 68bd15ace5d8766c34db89bb3921d8595e801132 (patch) | |
tree | e6d34dc724d04d8b1ef44bc1c978ff316b5e561f | |
parent | b55aeca25e70cf884c08afaa4b4d84d9ac772c35 (diff) | |
download | gitlab-ce-68bd15ace5d8766c34db89bb3921d8595e801132.tar.gz |
Update environments metrics empty state
3 files changed, 32 insertions, 36 deletions
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index 23e1e734b37..0e141d02ead 100644 --- a/app/assets/javascripts/monitoring/components/empty_state.vue +++ b/app/assets/javascripts/monitoring/components/empty_state.vue @@ -44,9 +44,9 @@ export default { title: 'Get started with performance monitoring', description: `Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments.`, - buttonText: 'Install Prometheus on clusters', + buttonText: 'Install on clusters', buttonPath: this.clustersPath, - secondaryButtonText: 'Configure existing Prometheus', + secondaryButtonText: 'Configure existing installation', secondaryButtonPath: this.settingsPath, }, loading: { @@ -88,26 +88,32 @@ export default { </script> <template> - <div class="prometheus-state"> - <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></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 v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success"> - {{ currentState.buttonText }} - </a> + <div class="row empty-state js-empty-state"> + <div class="col-12"> + <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div> </div> - <div class="state-button"> - <a - v-if="currentState.secondaryButtonPath" - :href="currentState.secondaryButtonPath" - class="btn" - > - {{ currentState.secondaryButtonText }} - </a> + + <div class="col-12"> + <div class="text-content"> + <h4 class="state-title text-center">{{ currentState.title }}</h4> + <p class="state-description"> + {{ currentState.description }} + <a v-if="showButtonDescription" :href="settingsPath"> Prometheus server </a> + </p> + + <div class="text-center"> + <a v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success"> + {{ currentState.buttonText }} + </a> + <a + v-if="currentState.secondaryButtonPath" + :href="currentState.secondaryButtonPath" + class="btn" + > + {{ currentState.secondaryButtonText }} + </a> + </div> + </div> </div> </div> </template> diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 347fcad771a..75166ffcada 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -203,21 +203,6 @@ stroke: $gray-darkest; } -.prometheus-state { - max-width: 460px; - margin: 10px auto; - text-align: center; - - .state-svg { - max-width: 80vw; - margin: 0 auto; - } - - .state-button { - padding: $gl-padding / 2; - } -} - .prometheus-graphs { .environments { .dropdown-menu-toggle { diff --git a/changelogs/unreleased/gt-update-env-metrics-empty-state.yml b/changelogs/unreleased/gt-update-env-metrics-empty-state.yml new file mode 100644 index 00000000000..a05dc07e65c --- /dev/null +++ b/changelogs/unreleased/gt-update-env-metrics-empty-state.yml @@ -0,0 +1,5 @@ +--- +title: Update environments metrics empty state +merge_request: 23074 +author: George Tsiolis +type: changed |