Knative support

5 files changed, 68 insertions, 1 deletions

diff --git a/app/assets/images/cluster_app_logos/knative.png b/app/assets/images/cluster_app_logos/knative.png
new file mode 100644
index 00000000000..0a2510c8549
--- /dev/null
+++ b/app/assets/images/cluster_app_logos/knative.png
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index ebf76af5966..02dfe1c7d6f 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -28,6 +28,7 @@ export default class Clusters {
       installIngressPath,
       installRunnerPath,
       installJupyterPath,
+      installKnativePath,
       installPrometheusPath,
       managePrometheusPath,
       clusterStatus,
@@ -49,6 +50,7 @@ export default class Clusters {
       installRunnerEndpoint: installRunnerPath,
       installPrometheusEndpoint: installPrometheusPath,
       installJupyterEndpoint: installJupyterPath,
+      installKnativeEndpoint: installKnativePath,
     });
 
     this.installApplication = this.installApplication.bind(this);
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 6e7b5eb5526..183d265851c 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -7,6 +7,7 @@ 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';
@@ -53,6 +54,7 @@ export default {
     jeagerLogo,
     jupyterhubLogo,
     kubernetesLogo,
+    knativeLogo,
     meltanoLogo,
     prometheusLogo,
   }),
@@ -136,6 +138,9 @@ export default {
     jupyterHostname() {
       return this.applications.jupyter.hostname;
     },
+    knativeInstalled() {
+      return this.applications.knative.status === APPLICATION_STATUS.INSTALLED;
+    },
   },
   created() {
     this.helmInstallIllustration = helmInstallIllustration;
@@ -321,7 +326,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 +375,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="{ domainname: applications.knative.domainname}"
+        :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.domainname"
+                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.domainname"
+                type="text"
+                class="form-control js-domainname"
+              />
+            </div>
+          </template>
+        </div>
+      </application-row>
     </div>
   </section>
 </template>
diff --git a/app/assets/javascripts/clusters/services/clusters_service.js b/app/assets/javascripts/clusters/services/clusters_service.js
index a7d82292ba9..da562b09ee5 100644
--- a/app/assets/javascripts/clusters/services/clusters_service.js
+++ b/app/assets/javascripts/clusters/services/clusters_service.js
@@ -9,6 +9,7 @@ export default class ClusterService {
       runner: this.options.installRunnerEndpoint,
       prometheus: this.options.installPrometheusEndpoint,
       jupyter: this.options.installJupyterEndpoint,
+      knative: this.options.installKnativeEndpoint,
     };
   }
 
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index d90db7b103c..c54a49eedd0 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -46,6 +46,14 @@ export default class ClusterStore {
           requestReason: null,
           hostname: null,
         },
+        knative: {
+          title: s__('ClusterIntegration|Knative'),
+          status: null,
+          statusReason: null,
+          requestStatus: null,
+          requestReason: null,
+          domainname: ''
+        },
       },
     };
   }