diff options
Diffstat (limited to 'app/assets/javascripts/serverless')
11 files changed, 62 insertions, 102 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'; }, diff --git a/app/assets/javascripts/serverless/serverless_bundle.js b/app/assets/javascripts/serverless/serverless_bundle.js index ed3b633d766..24a9b4ac521 100644 --- a/app/assets/javascripts/serverless/serverless_bundle.js +++ b/app/assets/javascripts/serverless/serverless_bundle.js @@ -6,6 +6,9 @@ import { createStore } from './store'; export default class Serverless { constructor() { if (document.querySelector('.js-serverless-function-details-page') != null) { + const entryPointData = document.querySelector('.js-serverless-function-details-page').dataset; + const store = createStore(entryPointData); + const { serviceName, serviceDescription, @@ -15,9 +18,7 @@ export default class Serverless { servicePodcount, serviceMetricsUrl, prometheus, - clustersPath, - helpPath, - } = document.querySelector('.js-serverless-function-details-page').dataset; + } = entryPointData; const el = document.querySelector('#js-serverless-function-details'); const service = { @@ -32,35 +33,26 @@ export default class Serverless { this.functionDetails = new Vue({ el, - store: createStore(), + store, render(createElement) { return createElement(FunctionDetails, { props: { func: service, hasPrometheus: prometheus !== undefined, - clustersPath, - helpPath, }, }); }, }); } else { - const { statusPath, clustersPath, helpPath } = document.querySelector( - '.js-serverless-functions-page', - ).dataset; + const entryPointData = document.querySelector('.js-serverless-functions-page').dataset; + const store = createStore(entryPointData); const el = document.querySelector('#js-serverless-functions'); this.functions = new Vue({ el, - store: createStore(), + store, render(createElement) { - return createElement(Functions, { - props: { - clustersPath, - helpPath, - statusPath, - }, - }); + return createElement(Functions); }, }); } diff --git a/app/assets/javascripts/serverless/store/actions.js b/app/assets/javascripts/serverless/store/actions.js index a0a9fdf7ace..b9d57138efa 100644 --- a/app/assets/javascripts/serverless/store/actions.js +++ b/app/assets/javascripts/serverless/store/actions.js @@ -2,7 +2,7 @@ import * as types from './mutation_types'; import axios from '~/lib/utils/axios_utils'; import statusCodes from '~/lib/utils/http_status'; import { backOff } from '~/lib/utils/common_utils'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import { __ } from '~/locale'; import { MAX_REQUESTS, CHECKING_INSTALLED, TIMEOUT } from '../constants'; @@ -123,6 +123,3 @@ export const fetchMetrics = ({ dispatch }, { metricsPath, hasPrometheus }) => { createFlash(error); }); }; - -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; diff --git a/app/assets/javascripts/serverless/store/getters.js b/app/assets/javascripts/serverless/store/getters.js index 071f663d9d2..c9b1d22799a 100644 --- a/app/assets/javascripts/serverless/store/getters.js +++ b/app/assets/javascripts/serverless/store/getters.js @@ -5,6 +5,3 @@ export const hasPrometheusMissingData = state => state.hasPrometheus && !state.h // Convert the function list into a k/v grouping based on the environment scope export const getFunctions = state => translate(state.functions); - -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; diff --git a/app/assets/javascripts/serverless/store/index.js b/app/assets/javascripts/serverless/store/index.js index 5f72060633e..6f32d85201e 100644 --- a/app/assets/javascripts/serverless/store/index.js +++ b/app/assets/javascripts/serverless/store/index.js @@ -7,12 +7,12 @@ import createState from './state'; Vue.use(Vuex); -export const createStore = () => +export const createStore = (entryPointData = {}) => new Vuex.Store({ actions, getters, mutations, - state: createState(), + state: createState(entryPointData), }); -export default createStore(); +export default createStore; diff --git a/app/assets/javascripts/serverless/store/state.js b/app/assets/javascripts/serverless/store/state.js index fdd29299749..353bfcf3fed 100644 --- a/app/assets/javascripts/serverless/store/state.js +++ b/app/assets/javascripts/serverless/store/state.js @@ -1,14 +1,22 @@ -export default () => ({ +export default ( + initialState = { clustersPath: null, helpPath: null, emptyImagePath: null, statusPath: null }, +) => ({ + clustersPath: initialState.clustersPath, error: null, + helpPath: initialState.helpPath, installed: 'checking', isLoading: true, // functions functions: [], hasFunctionData: true, + statusPath: initialState.statusPath, // function_details hasPrometheus: true, hasPrometheusData: false, graphData: {}, + + // empty_state + emptyImagePath: initialState.emptyImagePath, }); diff --git a/app/assets/javascripts/serverless/survey_banner.vue b/app/assets/javascripts/serverless/survey_banner.vue index a0a90fa5e80..18ab8315840 100644 --- a/app/assets/javascripts/serverless/survey_banner.vue +++ b/app/assets/javascripts/serverless/survey_banner.vue @@ -1,7 +1,7 @@ <script> import Cookies from 'js-cookie'; -import { parseBoolean } from '~/lib/utils/common_utils'; import { GlBanner } from '@gitlab/ui'; +import { parseBoolean } from '~/lib/utils/common_utils'; export default { components: { diff --git a/app/assets/javascripts/serverless/utils.js b/app/assets/javascripts/serverless/utils.js index 8b9e96ce9aa..1bf03ea8d42 100644 --- a/app/assets/javascripts/serverless/utils.js +++ b/app/assets/javascripts/serverless/utils.js @@ -18,6 +18,3 @@ export const translate = functions => }), {}, ); - -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; |