1 files changed, 150 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters/components/knative_domain_editor.vue b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
new file mode 100644
index 00000000000..480228619a5
--- /dev/null
+++ b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
@@ -0,0 +1,150 @@
+<script>
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import { APPLICATION_STATUS } from '~/clusters/constants';
+
+const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
+
+export default {
+  components: {
+    LoadingButton,
+    ClipboardButton,
+    GlLoadingIcon,
+  },
+  props: {
+    knative: {
+      type: Object,
+      required: true,
+    },
+    ingressDnsHelpPath: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    saveButtonDisabled() {
+      return [UNINSTALLING, UPDATING].includes(this.knative.status);
+    },
+    saving() {
+      return [UPDATING].includes(this.knative.status);
+    },
+    saveButtonLabel() {
+      return this.saving ? this.__('Saving') : this.__('Save changes');
+    },
+    knativeInstalled() {
+      return this.knative.installed;
+    },
+    knativeExternalEndpoint() {
+      return this.knative.externalIp || this.knative.externalHostname;
+    },
+    knativeUpdateSuccessful() {
+      return this.knative.updateSuccessful;
+    },
+    knativeHostname: {
+      get() {
+        return this.knative.hostname;
+      },
+      set(hostname) {
+        this.$emit('set', hostname);
+      },
+    },
+  },
+  watch: {
+    knativeUpdateSuccessful(updateSuccessful) {
+      if (updateSuccessful) {
+        this.$toast.show(s__('ClusterIntegration|Knative domain name was updated successfully.'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row">
+    <div
+      v-if="knative.updateFailed"
+      class="bs-callout bs-callout-danger cluster-application-banner col-12 mt-2 mb-2 js-cluster-knative-domain-name-failure-message"
+    >
+      {{ s__('ClusterIntegration|Something went wrong while updating Knative domain name.') }}
+    </div>
+
+    <template>
+      <div
+        :class="{ 'col-md-6': knativeInstalled, 'col-12': !knativeInstalled }"
+        class="form-group col-sm-12 mb-0"
+      >
+        <label for="knative-domainname">
+          <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
+        </label>
+        <input
+          id="knative-domainname"
+          v-model="knativeHostname"
+          type="text"
+          class="form-control js-knative-domainname"
+        />
+      </div>
+    </template>
+    <template v-if="knativeInstalled">
+      <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
+        <label for="knative-endpoint">
+          <strong>{{ s__('ClusterIntegration|Knative Endpoint:') }}</strong>
+        </label>
+        <div v-if="knativeExternalEndpoint" class="input-group">
+          <input
+            id="knative-endpoint"
+            :value="knativeExternalEndpoint"
+            type="text"
+            class="form-control js-knative-endpoint"
+            readonly
+          />
+          <span class="input-group-append">
+            <clipboard-button
+              :text="knativeExternalEndpoint"
+              :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
+              class="input-group-text js-knative-endpoint-clipboard-btn"
+            />
+          </span>
+        </div>
+        <div v-else class="input-group">
+          <input type="text" class="form-control js-endpoint" readonly />
+          <gl-loading-icon
+            class="position-absolute align-self-center ml-2 js-knative-ip-loading-icon"
+          />
+        </div>
+      </div>
+
+      <p class="form-text text-muted col-12">
+        {{
+          s__(
+            `ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint.`,
+          )
+        }}
+        <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+          {{ __('More information') }}
+        </a>
+      </p>
+
+      <p
+        v-if="!knativeExternalEndpoint"
+        class="settings-message js-no-knative-endpoint-message mt-2 mr-3 mb-0 ml-3"
+      >
+        {{
+          s__(`ClusterIntegration|The endpoint is in
+        the process of being assigned. Please check your Kubernetes
+        cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+        }}
+      </p>
+
+      <loading-button
+        class="btn-success js-knative-save-domain-button mt-3 ml-3"
+        :loading="saving"
+        :disabled="saveButtonDisabled"
+        :label="saveButtonLabel"
+        @click="$emit('save', knativeHostname)"
+      />
+    </template>
+  </div>
+</template>