applications.vue 25.9 KB
Newer Older
1
<script>
2
import _ from 'underscore';
3
import helmInstallIllustration from '@gitlab/svgs/dist/illustrations/kubernetes-installation.svg';
4
import { GlLoadingIcon } from '@gitlab/ui';
5 6 7 8 9 10
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';
Amit Rathi's avatar
Amit Rathi committed
11
import certManagerLogo from 'images/cluster_app_logos/cert_manager.png';
12
import crossplaneLogo from 'images/cluster_app_logos/crossplane.png';
Chris Baumbauer's avatar
Chris Baumbauer committed
13
import knativeLogo from 'images/cluster_app_logos/knative.png';
14 15
import meltanoLogo from 'images/cluster_app_logos/meltano.png';
import prometheusLogo from 'images/cluster_app_logos/prometheus.png';
16
import elasticStackLogo from 'images/cluster_app_logos/elastic_stack.png';
17 18 19
import { s__, sprintf } from '../../locale';
import applicationRow from './application_row.vue';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
20
import KnativeDomainEditor from './knative_domain_editor.vue';
21
import { CLUSTER_TYPE, PROVIDER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
22
import eventHub from '~/clusters/event_hub';
23
import CrossplaneProviderStack from './crossplane_provider_stack.vue';
24

25 26 27 28
export default {
  components: {
    applicationRow,
    clipboardButton,
29
    GlLoadingIcon,
30
    KnativeDomainEditor,
31
    CrossplaneProviderStack,
32 33
  },
  props: {
34 35 36
    type: {
      type: String,
      required: false,
37
      default: CLUSTER_TYPE.PROJECT,
38
    },
39 40 41 42
    applications: {
      type: Object,
      required: false,
      default: () => ({}),
43
    },
44 45 46 47
    helpPath: {
      type: String,
      required: false,
      default: '',
48
    },
49 50 51 52 53 54 55 56 57 58
    ingressHelpPath: {
      type: String,
      required: false,
      default: '',
    },
    ingressDnsHelpPath: {
      type: String,
      required: false,
      default: '',
    },
59 60 61 62 63
    ingressModSecurityHelpPath: {
      type: String,
      required: false,
      default: '',
    },
64 65 66 67 68
    cloudRunHelpPath: {
      type: String,
      required: false,
      default: '',
    },
69 70 71 72 73
    managePrometheusPath: {
      type: String,
      required: false,
      default: '',
    },
74 75 76 77 78 79 80 81 82 83
    providerType: {
      type: String,
      required: false,
      default: '',
    },
    preInstalledKnative: {
      type: Boolean,
      required: false,
      default: false,
    },
84 85 86 87 88
    rbac: {
      type: Boolean,
      required: false,
      default: false,
    },
89
  },
90 91 92 93 94 95 96
  data: () => ({
    elasticsearchLogo,
    gitlabLogo,
    helmLogo,
    jeagerLogo,
    jupyterhubLogo,
    kubernetesLogo,
Amit Rathi's avatar
Amit Rathi committed
97
    certManagerLogo,
98
    crossplaneLogo,
Chris Baumbauer's avatar
Chris Baumbauer committed
99
    knativeLogo,
100 101
    meltanoLogo,
    prometheusLogo,
102
    elasticStackLogo,
103
  }),
104
  computed: {
105
    isProjectCluster() {
106
      return this.type === CLUSTER_TYPE.PROJECT;
107
    },
108 109 110 111
    helmInstalled() {
      return (
        this.applications.helm.status === APPLICATION_STATUS.INSTALLED ||
        this.applications.helm.status === APPLICATION_STATUS.UPDATED
112 113 114 115 116 117
      );
    },
    ingressId() {
      return INGRESS;
    },
    ingressInstalled() {
118
      return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
119
    },
120 121 122
    ingressEnableModsecurity() {
      return this.applications.ingress.modsecurity_enabled;
    },
123 124
    ingressExternalEndpoint() {
      return this.applications.ingress.externalIp || this.applications.ingress.externalHostname;
125
    },
126 127 128
    certManagerInstalled() {
      return this.applications.cert_manager.status === APPLICATION_STATUS.INSTALLED;
    },
129 130 131
    crossplaneInstalled() {
      return this.applications.crossplane.status === APPLICATION_STATUS.INSTALLED;
    },
132 133 134 135 136 137 138 139 140 141 142 143
    ingressModSecurityDescription() {
      const escapedUrl = _.escape(this.ingressModSecurityHelpPath);

      return sprintf(
        s__('ClusterIntegration|Learn more about %{startLink}ModSecurity%{endLink}'),
        {
          startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
          endLink: '</a>',
        },
        false,
      );
    },
144
    ingressDescription() {
145
      return sprintf(
146 147
        _.escape(
          s__(
148
            `ClusterIntegration|Installing Ingress may incur additional costs. Learn more about %{pricingLink}.`,
149 150 151
          ),
        ),
        {
152
          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb"
153
              target="_blank" rel="noopener noreferrer">
154
              ${_.escape(s__('ClusterIntegration|pricing'))}</a>`,
155 156 157 158
        },
        false,
      );
    },
159 160 161 162
    certManagerDescription() {
      return sprintf(
        _.escape(
          s__(
163 164 165
            `ClusterIntegration|Cert-Manager is a native Kubernetes certificate management controller that helps with issuing certificates.
            Installing Cert-Manager on your cluster will issue a certificate by %{letsEncrypt} and ensure that certificates
            are valid and up-to-date.`,
166 167 168 169 170
          ),
        ),
        {
          letsEncrypt: `<a href="https://letsencrypt.org/"
              target="_blank" rel="noopener noreferrer">
Amit Rathi's avatar
Amit Rathi committed
171
              ${_.escape(s__("ClusterIntegration|Let's Encrypt"))}</a>`,
172 173 174 175
        },
        false,
      );
    },
176 177 178 179 180 181 182 183 184
    crossplaneDescription() {
      return sprintf(
        _.escape(
          s__(
            `ClusterIntegration|Crossplane enables declarative provisioning of managed services from your cloud of choice using %{kubectl} or %{gitlabIntegrationLink}.
Crossplane runs inside your Kubernetes cluster and supports secure connectivity and secrets management between app containers and the cloud services they depend on.`,
          ),
        ),
        {
185
          gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ee/user/clusters/applications.html#crossplane"
186 187 188 189 190 191 192 193
          target="_blank" rel="noopener noreferrer">
          ${_.escape(s__('ClusterIntegration|Gitlab Integration'))}</a>`,
          kubectl: `<code>kubectl</code>`,
        },
        false,
      );
    },

194 195 196 197
    prometheusDescription() {
      return sprintf(
        _.escape(
          s__(
198 199
            `ClusterIntegration|Prometheus is an open-source monitoring system
            with %{gitlabIntegrationLink} to monitor deployed applications.`,
200 201 202 203
          ),
        ),
        {
          gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
204
              target="_blank" rel="noopener noreferrer">
205
              ${_.escape(s__('ClusterIntegration|GitLab Integration'))}</a>`,
206 207 208
        },
        false,
      );
209
    },
210
    jupyterInstalled() {
211
      return this.applications.jupyter.status === APPLICATION_STATUS.INSTALLED;
212 213 214 215
    },
    jupyterHostname() {
      return this.applications.jupyter.hostname;
    },
216 217 218
    elasticStackInstalled() {
      return this.applications.elastic_stack.status === APPLICATION_STATUS.INSTALLED;
    },
219 220 221
    knative() {
      return this.applications.knative;
    },
222 223 224
    crossplane() {
      return this.applications.crossplane;
    },
225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243
    cloudRun() {
      return this.providerType === PROVIDER_TYPE.GCP && this.preInstalledKnative;
    },
    installedVia() {
      if (this.cloudRun) {
        return sprintf(
          _.escape(s__(`ClusterIntegration|installed via %{installed_via}`)),
          {
            installed_via: `<a href="${
              this.cloudRunHelpPath
            }" target="_blank" rel="noopener noreferrer">${_.escape(
              s__('ClusterIntegration|Cloud Run'),
            )}</a>`,
          },
          false,
        );
      }
      return null;
    },
244
  },
245 246 247
  created() {
    this.helmInstallIllustration = helmInstallIllustration;
  },
248
  methods: {
249
    saveKnativeDomain(hostname) {
250 251
      eventHub.$emit('saveKnativeDomain', {
        id: 'knative',
252 253 254 255 256 257 258
        params: { hostname },
      });
    },
    setKnativeHostname(hostname) {
      eventHub.$emit('setKnativeHostname', {
        id: 'knative',
        hostname,
259 260
      });
    },
261 262 263 264 265 266
    setCrossplaneProviderStack(stack) {
      eventHub.$emit('setCrossplaneProviderStack', {
        id: 'crossplane',
        stack,
      });
    },
267
  },
268
};
269 270 271
</script>

<template>
272
  <section id="cluster-applications">
Mike Greiling's avatar
Mike Greiling committed
273
    <h4>{{ s__('ClusterIntegration|Applications') }}</h4>
274
    <p class="append-bottom-0">
Mike Greiling's avatar
Mike Greiling committed
275 276
      {{
        s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
277
            Helm Tiller is required to install any of the following applications.`)
Mike Greiling's avatar
Mike Greiling committed
278
      }}
279
      <a :href="helpPath">{{ __('More information') }}</a>
280
    </p>
281

282 283 284 285 286 287 288 289 290
    <div class="cluster-application-list prepend-top-10">
      <application-row
        id="helm"
        :logo-url="helmLogo"
        :title="applications.helm.title"
        :status="applications.helm.status"
        :status-reason="applications.helm.statusReason"
        :request-status="applications.helm.requestStatus"
        :request-reason="applications.helm.requestReason"
291
        :installed="applications.helm.installed"
292
        :install-failed="applications.helm.installFailed"
293 294 295
        :uninstallable="applications.helm.uninstallable"
        :uninstall-successful="applications.helm.uninstallSuccessful"
        :uninstall-failed="applications.helm.uninstallFailed"
296 297 298 299
        class="rounded-top"
        title-link="https://docs.helm.sh/"
      >
        <div slot="description">
Mike Greiling's avatar
Mike Greiling committed
300 301
          {{
            s__(`ClusterIntegration|Helm streamlines installing
302 303 304
                    and managing Kubernetes applications.
                    Tiller runs inside of your Kubernetes Cluster,
                    and manages releases of your charts.`)
Mike Greiling's avatar
Mike Greiling committed
305
          }}
306 307
        </div>
      </application-row>
Mike Greiling's avatar
Mike Greiling committed
308 309 310 311
      <div v-show="!helmInstalled" class="cluster-application-warning">
        <div class="svg-container" v-html="helmInstallIllustration"></div>
        {{
          s__(`ClusterIntegration|You must first install Helm Tiller before
312
                installing the applications below`)
Mike Greiling's avatar
Mike Greiling committed
313
        }}
314 315 316 317 318 319 320 321 322
      </div>
      <application-row
        :id="ingressId"
        :logo-url="kubernetesLogo"
        :title="applications.ingress.title"
        :status="applications.ingress.status"
        :status-reason="applications.ingress.statusReason"
        :request-status="applications.ingress.requestStatus"
        :request-reason="applications.ingress.requestReason"
323
        :installed="applications.ingress.installed"
324
        :install-failed="applications.ingress.installFailed"
325 326 327
        :install-application-request-params="{
          modsecurity_enabled: applications.ingress.modsecurity_enabled,
        }"
328 329 330
        :uninstallable="applications.ingress.uninstallable"
        :uninstall-successful="applications.ingress.uninstallSuccessful"
        :uninstall-failed="applications.ingress.uninstallFailed"
331 332 333 334 335
        :disabled="!helmInstalled"
        title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
      >
        <div slot="description">
          <p>
Mike Greiling's avatar
Mike Greiling committed
336 337
            {{
              s__(`ClusterIntegration|Ingress gives you a way to route
338 339
                        requests to services based on the request host or path,
                        centralizing a number of services into a single entrypoint.`)
Mike Greiling's avatar
Mike Greiling committed
340
            }}
341
          </p>
342

343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362
          <template>
            <div class="form-group">
              <div class="form-check form-check-inline">
                <input
                  v-model="applications.ingress.modsecurity_enabled"
                  :disabled="ingressInstalled"
                  type="checkbox"
                  autocomplete="off"
                  class="form-check-input"
                />
                <label class="form-check-label label-bold" for="ingress-enable-modsecurity">
                  {{ s__('ClusterIntegration|Enable Web Application Firewall') }}
                </label>
              </div>
              <p class="form-text text-muted">
                <strong v-html="ingressModSecurityDescription"></strong>
              </p>
            </div>
          </template>

363 364
          <template v-if="ingressInstalled">
            <div class="form-group">
365
              <label for="ingress-endpoint">{{ s__('ClusterIntegration|Ingress Endpoint') }}</label>
366
              <div v-if="ingressExternalEndpoint" class="input-group">
367
                <input
368 369
                  id="ingress-endpoint"
                  :value="ingressExternalEndpoint"
370
                  type="text"
371
                  class="form-control js-endpoint"
372 373
                  readonly
                />
374 375
                <span class="input-group-append">
                  <clipboard-button
376
                    :text="ingressExternalEndpoint"
377
                    :title="s__('ClusterIntegration|Copy Ingress Endpoint')"
378 379 380
                    class="input-group-text js-clipboard-btn"
                  />
                </span>
381
              </div>
382 383 384 385 386 387
              <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-ingress-ip-loading-icon"
                />
              </div>
388 389 390
              <p class="form-text text-muted">
                {{
                  s__(`ClusterIntegration|Point a wildcard DNS to this
391 392
                                generated endpoint in order to access
                                your application after it has been deployed.`)
393
                }}
394 395 396
                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                  {{ __('More information') }}
                </a>
397
              </p>
398
            </div>
399

400
            <p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
Mike Greiling's avatar
Mike Greiling committed
401
              {{
402
                s__(`ClusterIntegration|The endpoint is in
403 404
                            the process of being assigned. Please check your Kubernetes
                            cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
Mike Greiling's avatar
Mike Greiling committed
405
              }}
406 407 408
              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                {{ __('More information') }}
              </a>
409 410
            </p>
          </template>
411
          <template v-if="!ingressInstalled">
412 413 414
            <div class="bs-callout bs-callout-info">
              <strong v-html="ingressDescription"></strong>
            </div>
415
          </template>
416 417
        </div>
      </application-row>
Amit Rathi's avatar
Amit Rathi committed
418 419 420 421 422 423 424 425
      <application-row
        id="cert_manager"
        :logo-url="certManagerLogo"
        :title="applications.cert_manager.title"
        :status="applications.cert_manager.status"
        :status-reason="applications.cert_manager.statusReason"
        :request-status="applications.cert_manager.requestStatus"
        :request-reason="applications.cert_manager.requestReason"
426
        :installed="applications.cert_manager.installed"
427
        :install-failed="applications.cert_manager.installFailed"
428
        :install-application-request-params="{ email: applications.cert_manager.email }"
429 430 431
        :uninstallable="applications.cert_manager.uninstallable"
        :uninstall-successful="applications.cert_manager.uninstallSuccessful"
        :uninstall-failed="applications.cert_manager.uninstallFailed"
Amit Rathi's avatar
Amit Rathi committed
432 433 434
        :disabled="!helmInstalled"
        title-link="https://cert-manager.readthedocs.io/en/latest/#"
      >
435 436 437 438
        <template>
          <div slot="description">
            <p v-html="certManagerDescription"></p>
            <div class="form-group">
439 440 441
              <label for="cert-manager-issuer-email">
                {{ s__('ClusterIntegration|Issuer Email') }}
              </label>
442 443 444 445 446 447 448 449 450 451 452
              <div class="input-group">
                <input
                  v-model="applications.cert_manager.email"
                  :readonly="certManagerInstalled"
                  type="text"
                  class="form-control js-email"
                />
              </div>
              <p class="form-text text-muted">
                {{
                  s__(`ClusterIntegration|Issuers represent a certificate authority.
453
                                You must provide an email address for your Issuer. `)
454 455 456 457 458
                }}
                <a
                  href="http://docs.cert-manager.io/en/latest/reference/issuers.html?highlight=email"
                  target="_blank"
                  rel="noopener noreferrer"
459
                  >{{ __('More information') }}</a
460 461 462 463 464
                >
              </p>
            </div>
          </div>
        </template>
Amit Rathi's avatar
Amit Rathi committed
465
      </application-row>
466 467 468 469 470 471 472 473 474
      <application-row
        id="prometheus"
        :logo-url="prometheusLogo"
        :title="applications.prometheus.title"
        :manage-link="managePrometheusPath"
        :status="applications.prometheus.status"
        :status-reason="applications.prometheus.statusReason"
        :request-status="applications.prometheus.requestStatus"
        :request-reason="applications.prometheus.requestReason"
475
        :installed="applications.prometheus.installed"
476
        :install-failed="applications.prometheus.installFailed"
477 478 479
        :uninstallable="applications.prometheus.uninstallable"
        :uninstall-successful="applications.prometheus.uninstallSuccessful"
        :uninstall-failed="applications.prometheus.uninstallFailed"
480 481 482
        :disabled="!helmInstalled"
        title-link="https://prometheus.io/docs/introduction/overview/"
      >
Mike Greiling's avatar
Mike Greiling committed
483
        <div slot="description" v-html="prometheusDescription"></div>
484 485 486 487 488 489 490 491 492
      </application-row>
      <application-row
        id="runner"
        :logo-url="gitlabLogo"
        :title="applications.runner.title"
        :status="applications.runner.status"
        :status-reason="applications.runner.statusReason"
        :request-status="applications.runner.requestStatus"
        :request-reason="applications.runner.requestReason"
493 494
        :version="applications.runner.version"
        :chart-repo="applications.runner.chartRepo"
495
        :update-available="applications.runner.updateAvailable"
496
        :installed="applications.runner.installed"
497 498 499
        :install-failed="applications.runner.installFailed"
        :update-successful="applications.runner.updateSuccessful"
        :update-failed="applications.runner.updateFailed"
500 501 502
        :uninstallable="applications.runner.uninstallable"
        :uninstall-successful="applications.runner.uninstallSuccessful"
        :uninstall-failed="applications.runner.uninstallFailed"
503 504 505 506
        :disabled="!helmInstalled"
        title-link="https://docs.gitlab.com/runner/"
      >
        <div slot="description">
Mike Greiling's avatar
Mike Greiling committed
507
          {{
508
            s__(`ClusterIntegration|GitLab Runner connects to the
509 510 511
                    repository and executes CI/CD jobs,
                    pushing results back and deploying
                    applications to production.`)
Mike Greiling's avatar
Mike Greiling committed
512
          }}
513 514
        </div>
      </application-row>
515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541
      <application-row
        id="crossplane"
        :logo-url="crossplaneLogo"
        :title="applications.crossplane.title"
        :status="applications.crossplane.status"
        :status-reason="applications.crossplane.statusReason"
        :request-status="applications.crossplane.requestStatus"
        :request-reason="applications.crossplane.requestReason"
        :installed="applications.crossplane.installed"
        :install-failed="applications.crossplane.installFailed"
        :uninstallable="applications.crossplane.uninstallable"
        :uninstall-successful="applications.crossplane.uninstallSuccessful"
        :uninstall-failed="applications.crossplane.uninstallFailed"
        :install-application-request-params="{ stack: applications.crossplane.stack }"
        :disabled="!helmInstalled"
        title-link="https://crossplane.io"
      >
        <template>
          <div slot="description">
            <p v-html="crossplaneDescription"></p>
            <div class="form-group">
              <CrossplaneProviderStack :crossplane="crossplane" @set="setCrossplaneProviderStack" />
            </div>
          </div>
        </template>
      </application-row>

542 543 544 545 546 547 548 549
      <application-row
        id="jupyter"
        :logo-url="jupyterhubLogo"
        :title="applications.jupyter.title"
        :status="applications.jupyter.status"
        :status-reason="applications.jupyter.statusReason"
        :request-status="applications.jupyter.requestStatus"
        :request-reason="applications.jupyter.requestReason"
550
        :installed="applications.jupyter.installed"
551
        :install-failed="applications.jupyter.installFailed"
552 553 554
        :uninstallable="applications.jupyter.uninstallable"
        :uninstall-successful="applications.jupyter.uninstallSuccessful"
        :uninstall-failed="applications.jupyter.uninstallFailed"
555 556 557 558 559 560
        :install-application-request-params="{ hostname: applications.jupyter.hostname }"
        :disabled="!helmInstalled"
        title-link="https://jupyterhub.readthedocs.io/en/stable/"
      >
        <div slot="description">
          <p>
Mike Greiling's avatar
Mike Greiling committed
561 562
            {{
              s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
563 564 565 566
                        manages, and proxies multiple instances of the single-user
                        Jupyter notebook server. JupyterHub can be used to serve
                        notebooks to a class of students, a corporate data science group,
                        or a scientific research group.`)
Mike Greiling's avatar
Mike Greiling committed
567
            }}
568
          </p>
569

570
          <template v-if="ingressExternalEndpoint">
571
            <div class="form-group">
572
              <label for="jupyter-hostname">{{ s__('ClusterIntegration|Jupyter Hostname') }}</label>
573

574 575 576 577 578 579 580
              <div class="input-group">
                <input
                  v-model="applications.jupyter.hostname"
                  :readonly="jupyterInstalled"
                  type="text"
                  class="form-control js-hostname"
                />
Mike Greiling's avatar
Mike Greiling committed
581
                <span class="input-group-btn">
582 583
                  <clipboard-button
                    :text="jupyterHostname"
584
                    :title="s__('ClusterIntegration|Copy Jupyter Hostname')"
585
                    class="js-clipboard-btn"
586
                  />
587
                </span>
588
              </div>
589 590 591 592

              <p v-if="ingressInstalled" class="form-text text-muted">
                {{
                  s__(`ClusterIntegration|Replace this with your own hostname if you want.
593
                                If you do so, point hostname to Ingress IP Address from above.`)
594
                }}
595 596 597
                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                  {{ __('More information') }}
                </a>
598
              </p>
599 600 601 602
            </div>
          </template>
        </div>
      </application-row>
Chris Baumbauer's avatar
Chris Baumbauer committed
603 604 605 606 607 608 609 610
      <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"
611
        :installed="applications.knative.installed"
612
        :install-failed="applications.knative.installFailed"
Mike Greiling's avatar
Mike Greiling committed
613
        :install-application-request-params="{ hostname: applications.knative.hostname }"
614
        :installed-via="installedVia"
615 616 617
        :uninstallable="applications.knative.uninstallable"
        :uninstall-successful="applications.knative.uninstallSuccessful"
        :uninstall-failed="applications.knative.uninstallFailed"
618
        :updateable="false"
Chris Baumbauer's avatar
Chris Baumbauer committed
619
        :disabled="!helmInstalled"
620
        v-bind="applications.knative"
Chris Baumbauer's avatar
Chris Baumbauer committed
621 622 623
        title-link="https://github.com/knative/docs"
      >
        <div slot="description">
624
          <span v-if="!rbac">
625
            <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info append-bottom-0">
626 627
              {{
                s__(`ClusterIntegration|You must have an RBAC-enabled cluster
628
              to install Knative.`)
629
              }}
630 631 632
              <a :href="helpPath" target="_blank" rel="noopener noreferrer">
                {{ __('More information') }}
              </a>
633 634 635
            </p>
            <br />
          </span>
Chris Baumbauer's avatar
Chris Baumbauer committed
636
          <p>
Mike Greiling's avatar
Mike Greiling committed
637
            {{
638
              s__(`ClusterIntegration|Knative extends Kubernetes to provide
639 640 641
                        a set of middleware components that are essential to build modern,
                        source-centric, and container-based applications that can run
                        anywhere: on premises, in the cloud, or even in a third-party data center.`)
Mike Greiling's avatar
Mike Greiling committed
642
            }}
Chris Baumbauer's avatar
Chris Baumbauer committed
643 644
          </p>

645
          <knative-domain-editor
646
            v-if="(knative.installed || (helmInstalled && rbac)) && !preInstalledKnative"
647 648 649 650 651
            :knative="knative"
            :ingress-dns-help-path="ingressDnsHelpPath"
            @save="saveKnativeDomain"
            @set="setKnativeHostname"
          />
Chris Baumbauer's avatar
Chris Baumbauer committed
652 653
        </div>
      </application-row>
654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684
      <application-row
        id="elastic_stack"
        :logo-url="elasticStackLogo"
        :title="applications.elastic_stack.title"
        :status="applications.elastic_stack.status"
        :status-reason="applications.elastic_stack.statusReason"
        :request-status="applications.elastic_stack.requestStatus"
        :request-reason="applications.elastic_stack.requestReason"
        :version="applications.elastic_stack.version"
        :chart-repo="applications.elastic_stack.chartRepo"
        :update-available="applications.elastic_stack.updateAvailable"
        :installed="applications.elastic_stack.installed"
        :install-failed="applications.elastic_stack.installFailed"
        :update-successful="applications.elastic_stack.updateSuccessful"
        :update-failed="applications.elastic_stack.updateFailed"
        :uninstallable="applications.elastic_stack.uninstallable"
        :uninstall-successful="applications.elastic_stack.uninstallSuccessful"
        :uninstall-failed="applications.elastic_stack.uninstallFailed"
        :disabled="!helmInstalled"
        title-link="https://github.com/helm/charts/tree/master/stable/elastic-stack"
      >
        <div slot="description">
          <p>
            {{
              s__(
                `ClusterIntegration|The elastic stack collects logs from all pods in your cluster`,
              )
            }}
          </p>
        </div>
      </application-row>
685 686 687
    </div>
  </section>
</template>