Commit 07c1466b authored by Filipa Lacerda's avatar Filipa Lacerda

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
parents 921d6b1a 68bd15ac
...@@ -44,9 +44,9 @@ export default { ...@@ -44,9 +44,9 @@ export default {
title: 'Get started with performance monitoring', title: 'Get started with performance monitoring',
description: `Stay updated about the performance and health description: `Stay updated about the performance and health
of your environment by configuring Prometheus to monitor your deployments.`, of your environment by configuring Prometheus to monitor your deployments.`,
buttonText: 'Install Prometheus on clusters', buttonText: 'Install on clusters',
buttonPath: this.clustersPath, buttonPath: this.clustersPath,
secondaryButtonText: 'Configure existing Prometheus', secondaryButtonText: 'Configure existing installation',
secondaryButtonPath: this.settingsPath, secondaryButtonPath: this.settingsPath,
}, },
loading: { loading: {
...@@ -88,26 +88,32 @@ export default { ...@@ -88,26 +88,32 @@ export default {
</script> </script>
<template> <template>
<div class="prometheus-state"> <div class="row empty-state js-empty-state">
<div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div> <div class="col-12">
<h4 class="state-title">{{ currentState.title }}</h4> <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div>
<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>
<div class="state-button">
<a <div class="col-12">
v-if="currentState.secondaryButtonPath" <div class="text-content">
:href="currentState.secondaryButtonPath" <h4 class="state-title text-center">{{ currentState.title }}</h4>
class="btn" <p class="state-description">
> {{ currentState.description }}
{{ currentState.secondaryButtonText }} <a v-if="showButtonDescription" :href="settingsPath"> Prometheus server </a>
</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>
</div> </div>
</template> </template>
...@@ -203,21 +203,6 @@ ...@@ -203,21 +203,6 @@
stroke: $gray-darkest; 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 { .prometheus-graphs {
.environments { .environments {
.dropdown-menu-toggle { .dropdown-menu-toggle {
......
---
title: Update environments metrics empty state
merge_request: 23074
author: George Tsiolis
type: changed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment