diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-11-27 11:34:55 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-11-27 11:34:55 +0000 |
commit | 07c1466b7c715fa514b02acbd6887fd1926918f3 (patch) | |
tree | ff6f6d06d7f6e6bb6aeb982f07b22c1b51240ce9 | |
parent | 921d6b1a13b5ec59217ab714b4daa6800500d95f (diff) | |
parent | 68bd15ace5d8766c34db89bb3921d8595e801132 (diff) | |
download | gitlab-ce-07c1466b7c715fa514b02acbd6887fd1926918f3.tar.gz |
Merge branch 'gt-update-env-metrics-empty-state' into 'master'
Update environments metrics empty state
Closes #51745
See merge request gitlab-org/gitlab-ce!23074
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 |