diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 16:16:36 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 16:16:36 +0300 |
commit | 311b0269b4eb9839fa63f80c8d7a58f32b8138a0 (patch) | |
tree | 07e7870bca8aed6d61fdcc810731c50d2c40af47 /app/assets/javascripts/google_cloud | |
parent | 27909cef6c4170ed9205afa7426b8d3de47cbb0c (diff) |
Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42
Diffstat (limited to 'app/assets/javascripts/google_cloud')
4 files changed, 170 insertions, 0 deletions
diff --git a/app/assets/javascripts/google_cloud/components/app.vue b/app/assets/javascripts/google_cloud/components/app.vue new file mode 100644 index 00000000000..1e5be9df019 --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/app.vue @@ -0,0 +1,50 @@ +<script> +import { GlTab, GlTabs } from '@gitlab/ui'; +import IncubationBanner from './incubation_banner.vue'; +import ServiceAccounts from './service_accounts.vue'; + +export default { + components: { GlTab, GlTabs, IncubationBanner, ServiceAccounts }, + props: { + serviceAccounts: { + type: Array, + required: true, + }, + createServiceAccountUrl: { + type: String, + required: true, + }, + emptyIllustrationUrl: { + type: String, + required: true, + }, + }, + methods: { + feedbackUrl(template) { + return `https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/meta/-/issues/new?issuable_template=${template}`; + }, + }, +}; +</script> + +<template> + <div> + <incubation-banner + :share-feedback-url="feedbackUrl('general_feedback')" + :report-bug-url="feedbackUrl('report_bug')" + :feature-request-url="feedbackUrl('feature_request')" + /> + <gl-tabs> + <gl-tab :title="__('Configuration')"> + <service-accounts + class="gl-mx-3" + :list="serviceAccounts" + :create-url="createServiceAccountUrl" + :empty-illustration-url="emptyIllustrationUrl" + /> + </gl-tab> + <gl-tab :title="__('Deployments')" disabled /> + <gl-tab :title="__('Services')" disabled /> + </gl-tabs> + </div> +</template> diff --git a/app/assets/javascripts/google_cloud/components/incubation_banner.vue b/app/assets/javascripts/google_cloud/components/incubation_banner.vue new file mode 100644 index 00000000000..652b8c1aecb --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/incubation_banner.vue @@ -0,0 +1,44 @@ +<script> +import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; + +export default { + components: { GlAlert, GlLink, GlSprintf }, + props: { + shareFeedbackUrl: { + required: true, + type: String, + }, + reportBugUrl: { + required: true, + type: String, + }, + featureRequestUrl: { + required: true, + type: String, + }, + }, +}; +</script> + +<template> + <gl-alert :dismissible="false" variant="info"> + {{ __('This is an experimental feature developed by GitLab Incubation Engineering.') }} + <gl-sprintf + :message=" + __( + 'We invite you to %{featureLinkStart}request a feature%{featureLinkEnd}, %{bugLinkStart}report a bug%{bugLinkEnd} or %{feedbackLinkStart}share feedback%{feedbackLinkEnd}', + ) + " + > + <template #featureLink="{ content }"> + <gl-link :href="featureRequestUrl">{{ content }}</gl-link> + </template> + <template #bugLink="{ content }"> + <gl-link :href="reportBugUrl">{{ content }}</gl-link> + </template> + <template #feedbackLink="{ content }"> + <gl-link :href="shareFeedbackUrl">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> +</template> diff --git a/app/assets/javascripts/google_cloud/components/service_accounts.vue b/app/assets/javascripts/google_cloud/components/service_accounts.vue new file mode 100644 index 00000000000..b70b25a5dc3 --- /dev/null +++ b/app/assets/javascripts/google_cloud/components/service_accounts.vue @@ -0,0 +1,65 @@ +<script> +import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { GlButton, GlEmptyState, GlTable }, + props: { + list: { + type: Array, + required: true, + }, + createUrl: { + type: String, + required: true, + }, + emptyIllustrationUrl: { + type: String, + required: true, + }, + }, + data() { + return { + tableFields: [ + { key: 'environment', label: __('Environment'), sortable: true }, + { key: 'gcp_project', label: __('Google Cloud Project'), sortable: true }, + { key: 'service_account_exists', label: __('Service Account'), sortable: true }, + { key: 'service_account_key_exists', label: __('Service Account Key'), sortable: true }, + ], + }; + }, +}; +</script> + +<template> + <div> + <gl-empty-state + v-if="list.length === 0" + :title="__('No service accounts')" + :description=" + __('Service Accounts keys authorize GitLab to deploy your Google Cloud project') + " + :primary-button-link="createUrl" + :primary-button-text="__('Create service account')" + :svg-path="emptyIllustrationUrl" + /> + + <div v-else> + <h2 class="gl-font-size-h2">{{ __('Service Accounts') }}</h2> + <p>{{ __('Service Accounts keys authorize GitLab to deploy your Google Cloud project') }}</p> + + <gl-table :items="list" :fields="tableFields"> + <template #cell(service_account_exists)="{ value }"> + {{ value ? '✔' : __('Not found') }} + </template> + <template #cell(service_account_key_exists)="{ value }"> + {{ value ? '✔' : __('Not found') }} + </template> + </gl-table> + + <gl-button :href="createUrl" category="primary" variant="info"> + {{ __('Create service account') }} + </gl-button> + </div> + </div> +</template> diff --git a/app/assets/javascripts/google_cloud/index.js b/app/assets/javascripts/google_cloud/index.js new file mode 100644 index 00000000000..a156a632e9a --- /dev/null +++ b/app/assets/javascripts/google_cloud/index.js @@ -0,0 +1,11 @@ +import Vue from 'vue'; +import App from './components/app.vue'; + +const elementRenderer = (element, props = {}) => (createElement) => + createElement(element, { props }); + +export default () => { + const root = document.querySelector('#js-google-cloud'); + const props = JSON.parse(root.getAttribute('data')); + return new Vue({ el: root, render: elementRenderer(App, props) }); +}; |