diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/empty_state.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/empty_state.vue | 26 |
1 files changed, 18 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index a8708be76de..a7b483f6786 100644 --- a/app/assets/javascripts/monitoring/components/empty_state.vue +++ b/app/assets/javascripts/monitoring/components/empty_state.vue @@ -1,8 +1,4 @@ <script> - import gettingStartedSvg from 'empty_states/monitoring/_getting_started.svg'; - import loadingSvg from 'empty_states/monitoring/_loading.svg'; - import unableToConnectSvg from 'empty_states/monitoring/_unable_to_connect.svg'; - export default { props: { documentationPath: { @@ -18,24 +14,36 @@ type: String, required: true, }, + emptyGettingStartedSvgPath: { + type: String, + required: true, + }, + emptyLoadingSvgPath: { + type: String, + required: true, + }, + emptyUnableToConnectSvgPath: { + type: String, + required: true, + }, }, data() { return { states: { gettingStarted: { - svg: gettingStartedSvg, + svgUrl: this.emptyGettingStartedSvgPath, 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: 'Configure Prometheus', }, loading: { - svg: loadingSvg, + svgUrl: this.emptyLoadingSvgPath, title: 'Waiting for performance data', description: 'Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.', buttonText: 'View documentation', }, unableToConnect: { - svg: unableToConnectSvg, + svgUrl: this.emptyUnableToConnectSvgPath, title: 'Unable to connect to Prometheus server', description: 'Ensure connectivity is available from the GitLab server to the ', buttonText: 'View documentation', @@ -66,7 +74,9 @@ <template> <div class="prometheus-state"> <div class="row"> - <div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div> + <div class="col-md-4 col-md-offset-4 state-svg svg-content"> + <img :src="currentState.svgUrl"/> + </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> |