diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/empty_state.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/empty_state.vue | 61 |
1 files changed, 27 insertions, 34 deletions
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index 82b9a4b1adb..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,39 +88,32 @@ export default { </script> <template> - <div class="prometheus-state"> - <div class="state-svg svg-content"> - <img :src="currentState.svgUrl" /> + <div class="row empty-state js-empty-state"> + <div class="col-12"> + <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div> </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> - <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> |