diff options
Diffstat (limited to 'app/assets/javascripts/serverless/components')
4 files changed, 39 insertions, 70 deletions
diff --git a/app/assets/javascripts/serverless/components/empty_state.vue b/app/assets/javascripts/serverless/components/empty_state.vue index 2683805f2f7..49922ad8e6c 100644 --- a/app/assets/javascripts/serverless/components/empty_state.vue +++ b/app/assets/javascripts/serverless/components/empty_state.vue @@ -1,40 +1,38 @@ <script> +import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; +import { mapState } from 'vuex'; + export default { - props: { - clustersPath: { - type: String, - required: true, - }, - helpPath: { - type: String, - required: true, - }, + components: { + GlEmptyState, + GlLink, + GlSprintf, + }, + computed: { + ...mapState(['clustersPath', 'emptyImagePath', 'helpPath']), }, }; </script> <template> - <div class="row empty-state js-empty-state"> - <div class="col-12"> - <div class="text-content"> - <h4 class="state-title text-center"> - {{ s__('Serverless|Getting started with serverless') }} - </h4> - <p class="state-description"> - {{ - s__(`Serverless| In order to start using functions as a service, - you must first install Knative on your Kubernetes cluster.`) - }} - - <a :href="helpPath"> {{ __('More information') }} </a> - </p> - - <div class="text-center"> - <a :href="clustersPath" class="btn btn-success"> - {{ s__('Serverless|Install Knative') }} - </a> - </div> - </div> - </div> - </div> + <gl-empty-state + :svg-path="emptyImagePath" + :title="s__('Serverless|Getting started with serverless')" + :primary-button-link="clustersPath" + :primary-button-text="s__('Serverless|Install Knative')" + > + <template #description> + <gl-sprintf + :message=" + s__( + 'Serverless|In order to start using functions as a service, you must first install Knative on your Kubernetes cluster. %{linkStart}More information%{linkEnd}', + ) + " + > + <template #link="{ content }"> + <gl-link :href="helpPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </template> + </gl-empty-state> </template> diff --git a/app/assets/javascripts/serverless/components/function_details.vue b/app/assets/javascripts/serverless/components/function_details.vue index 53c78b93254..6ab44eec5cd 100644 --- a/app/assets/javascripts/serverless/components/function_details.vue +++ b/app/assets/javascripts/serverless/components/function_details.vue @@ -23,14 +23,6 @@ export default { required: false, default: false, }, - clustersPath: { - type: String, - required: true, - }, - helpPath: { - type: String, - required: true, - }, }, data() { return { @@ -96,8 +88,6 @@ export default { <area-chart v-if="hasPrometheusData" :graph-data="graphData" :container-width="elWidth" /> <missing-prometheus v-if="!hasPrometheus || hasPrometheusMissingData" - :help-path="helpPath" - :clusters-path="clustersPath" :missing-data="hasPrometheusMissingData" /> </section> diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue index 8fa48134f1f..c44a14f1785 100644 --- a/app/assets/javascripts/serverless/components/functions.vue +++ b/app/assets/javascripts/serverless/components/functions.vue @@ -1,6 +1,6 @@ <script> import { mapState, mapActions, mapGetters } from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLink, GlLoadingIcon } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; import EnvironmentRow from './environment_row.vue'; import EmptyState from './empty_state.vue'; @@ -10,24 +10,11 @@ export default { components: { EnvironmentRow, EmptyState, + GlLink, GlLoadingIcon, }, - props: { - clustersPath: { - type: String, - required: true, - }, - helpPath: { - type: String, - required: true, - }, - statusPath: { - type: String, - required: true, - }, - }, computed: { - ...mapState(['installed', 'isLoading', 'hasFunctionData']), + ...mapState(['installed', 'isLoading', 'hasFunctionData', 'helpPath', 'statusPath']), ...mapGetters(['getFunctions']), checkingInstalled() { @@ -118,14 +105,14 @@ export default { }} </p> <div class="text-center"> - <a :href="helpPath" class="btn btn-success"> - {{ s__('Serverless|Learn more about Serverless') }} - </a> + <gl-link :href="helpPath" class="btn btn-success">{{ + s__('Serverless|Learn more about Serverless') + }}</gl-link> </div> </div> </div> </div> - <empty-state v-else :clusters-path="clustersPath" :help-path="helpPath" /> + <empty-state v-else /> </section> </template> diff --git a/app/assets/javascripts/serverless/components/missing_prometheus.vue b/app/assets/javascripts/serverless/components/missing_prometheus.vue index 6c29f7c89ff..0d2c9f5151c 100644 --- a/app/assets/javascripts/serverless/components/missing_prometheus.vue +++ b/app/assets/javascripts/serverless/components/missing_prometheus.vue @@ -1,5 +1,6 @@ <script> import { GlDeprecatedButton, GlLink } from '@gitlab/ui'; +import { mapState } from 'vuex'; import { s__ } from '../../locale'; export default { @@ -8,20 +9,13 @@ export default { GlLink, }, props: { - clustersPath: { - type: String, - required: true, - }, - helpPath: { - type: String, - required: true, - }, missingData: { type: Boolean, required: true, }, }, computed: { + ...mapState(['clustersPath', 'helpPath']), missingStateClass() { return this.missingData ? 'missing-prometheus-state' : 'empty-prometheus-state'; }, |