1 files changed, 70 insertions, 3 deletions

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 6e7b5eb5526..c1026d1273a 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -1,18 +1,19 @@
 <script>
 import _ from 'underscore';
-import helmInstallIllustration from '@gitlab-org/gitlab-svgs/dist/illustrations/kubernetes-installation.svg';
+import helmInstallIllustration from '@gitlab/svgs/dist/illustrations/kubernetes-installation.svg';
 import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png';
 import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
 import helmLogo from 'images/cluster_app_logos/helm.png';
 import jeagerLogo from 'images/cluster_app_logos/jeager.png';
 import jupyterhubLogo from 'images/cluster_app_logos/jupyterhub.png';
 import kubernetesLogo from 'images/cluster_app_logos/kubernetes.png';
+import knativeLogo from 'images/cluster_app_logos/knative.png';
 import meltanoLogo from 'images/cluster_app_logos/meltano.png';
 import prometheusLogo from 'images/cluster_app_logos/prometheus.png';
 import { s__, sprintf } from '../../locale';
 import applicationRow from './application_row.vue';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import { APPLICATION_STATUS, INGRESS } from '../constants';
+import { CLUSTER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
 
 export default {
   components: {
@@ -20,6 +21,11 @@ export default {
     clipboardButton,
   },
   props: {
+    type: {
+      type: String,
+      required: false,
+      default: CLUSTER_TYPE.PROJECT,
+    },
     applications: {
       type: Object,
       required: false,
@@ -53,10 +59,14 @@ export default {
     jeagerLogo,
     jupyterhubLogo,
     kubernetesLogo,
+    knativeLogo,
     meltanoLogo,
     prometheusLogo,
   }),
   computed: {
+    isProjectCluster() {
+      return this.type === CLUSTER_TYPE.PROJECT;
+    },
     helmInstalled() {
       return (
         this.applications.helm.status === APPLICATION_STATUS.INSTALLED ||
@@ -136,6 +146,9 @@ export default {
     jupyterHostname() {
       return this.applications.jupyter.hostname;
     },
+    knativeInstalled() {
+      return this.applications.knative.status === APPLICATION_STATUS.INSTALLED;
+    },
   },
   created() {
     this.helmInstallIllustration = helmInstallIllustration;
@@ -276,6 +289,7 @@ export default {
         </div>
       </application-row>
       <application-row
+        v-if="isProjectCluster"
         id="prometheus"
         :logo-url="prometheusLogo"
         :title="applications.prometheus.title"
@@ -294,6 +308,7 @@ export default {
         </div>
       </application-row>
       <application-row
+        v-if="isProjectCluster"
         id="runner"
         :logo-url="gitlabLogo"
         :title="applications.runner.title"
@@ -312,6 +327,7 @@ export default {
         </div>
       </application-row>
       <application-row
+        v-if="isProjectCluster"
         id="jupyter"
         :logo-url="jupyterhubLogo"
         :title="applications.jupyter.title"
@@ -321,7 +337,6 @@ export default {
         :request-reason="applications.jupyter.requestReason"
         :install-application-request-params="{ hostname: applications.jupyter.hostname }"
         :disabled="!helmInstalled"
-        class="hide-bottom-border rounded-bottom"
         title-link="https://jupyterhub.readthedocs.io/en/stable/"
       >
         <div slot="description">
@@ -371,6 +386,58 @@ export default {
           </template>
         </div>
       </application-row>
+      <application-row
+        id="knative"
+        :logo-url="knativeLogo"
+        :title="applications.knative.title"
+        :status="applications.knative.status"
+        :status-reason="applications.knative.statusReason"
+        :request-status="applications.knative.requestStatus"
+        :request-reason="applications.knative.requestReason"
+        :install-application-request-params="{ hostname: applications.knative.hostname}"
+        :disabled="!helmInstalled"
+        class="hide-bottom-border rounded-bottom"
+        title-link="https://github.com/knative/docs"
+      >
+        <div slot="description">
+          <p>
+            {{ s__(`ClusterIntegration|A Knative build extends Kubernetes
+              and utilizes existing Kubernetes primitives to provide you with
+              the ability to run on-cluster container builds from source.
+              For example, you can write a build that uses Kubernetes-native
+              resources to obtain your source code from a repository,
+              build it into container a image, and then run that image.`) }}
+          </p>
+
+          <template v-if="knativeInstalled">
+            <div class="form-group">
+              <label for="knative-domainname">
+                {{ s__('ClusterIntegration|Knative Domain Name:') }}
+              </label>
+              <input
+                id="knative-domainname"
+                v-model="applications.knative.hostname"
+                type="text"
+                class="form-control js-domainname"
+                readonly
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div class="form-group">
+              <label for="knative-domainname">
+                {{ s__('ClusterIntegration|Knative Domain Name:') }}
+              </label>
+              <input
+                id="knative-domainname"
+                v-model="applications.knative.hostname"
+                type="text"
+                class="form-control js-domainname"
+              />
+            </div>
+          </template>
+        </div>
+      </application-row>
     </div>
   </section>
 </template>