<script>
  import _ from 'underscore';
  import { s__, sprintf } from '../../locale';
  import applicationRow from './application_row.vue';
  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
  import {
    APPLICATION_INSTALLED,
    INGRESS,
  } from '../constants';

  export default {
    components: {
      applicationRow,
      clipboardButton,
    },
    props: {
      applications: {
        type: Object,
        required: false,
        default: () => ({}),
      },
      helpPath: {
        type: String,
        required: false,
        default: '',
      },
      ingressHelpPath: {
        type: String,
        required: false,
        default: '',
      },
      ingressDnsHelpPath: {
        type: String,
        required: false,
        default: '',
      },
      managePrometheusPath: {
        type: String,
        required: false,
        default: '',
      },
    },
    computed: {
      generalApplicationDescription() {
        return sprintf(
          _.escape(s__(
            `ClusterIntegration|Install applications on your Kubernetes cluster.
            Read more about %{helpLink}`,
          )), {
            helpLink: `<a href="${this.helpPath}">
              ${_.escape(s__('ClusterIntegration|installing applications'))}
            </a>`,
          },
          false,
        );
      },
      ingressId() {
        return INGRESS;
      },
      ingressInstalled() {
        return this.applications.ingress.status === APPLICATION_INSTALLED;
      },
      ingressExternalIp() {
        return this.applications.ingress.externalIp;
      },
      ingressDescription() {
        const extraCostParagraph = sprintf(
          _.escape(s__(
            `ClusterIntegration|%{boldNotice} This will add some extra resources
            like a load balancer, which may incur additional costs depending on
            the hosting provider your Kubernetes cluster is installed on. If you are using GKE,
            you can %{pricingLink}.`,
          )), {
            boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
            pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
              ${_.escape(s__('ClusterIntegration|check the pricing here'))}</a>`,
          },
          false,
        );

        const externalIpParagraph = sprintf(
          _.escape(s__(
            `ClusterIntegration|After installing Ingress, you will need to point your wildcard DNS
            at the generated external IP address in order to view your app after it is deployed. %{ingressHelpLink}`,
          )), {
            ingressHelpLink: `<a href="${this.ingressHelpPath}">
              ${_.escape(s__('ClusterIntegration|More information'))}
            </a>`,
          },
          false,
        );

        return `
          <p>
            ${extraCostParagraph}
          </p>
          <p class="settings-message append-bottom-0">
            ${externalIpParagraph}
          </p>
        `;
      },
      prometheusDescription() {
        return sprintf(
          _.escape(s__(
            `ClusterIntegration|Prometheus is an open-source monitoring system
            with %{gitlabIntegrationLink} to monitor deployed applications.`,
          )), {
            gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
              target="_blank" rel="noopener noreferrer">
              ${_.escape(s__('ClusterIntegration|GitLab Integration'))}</a>`,
          },
          false,
        );
      },
    },
  };
</script>

<template>
  <section
    id="cluster-applications"
    class="settings no-animate expanded"
  >
    <div class="settings-header">
      <h4>
        {{ s__('ClusterIntegration|Applications') }}
      </h4>
      <p
        class="append-bottom-0"
        v-html="generalApplicationDescription"
      >
      </p>
    </div>

    <div class="settings-content">
      <div class="append-bottom-20">
        <application-row
          id="helm"
          :title="applications.helm.title"
          title-link="https://docs.helm.sh/"
          :status="applications.helm.status"
          :status-reason="applications.helm.statusReason"
          :request-status="applications.helm.requestStatus"
          :request-reason="applications.helm.requestReason"
        >
          <div slot="description">
            {{ s__(`ClusterIntegration|Helm streamlines installing
              and managing Kubernetes applications.
              Tiller runs inside of your Kubernetes Cluster,
              and manages releases of your charts.`) }}
          </div>
        </application-row>
        <application-row
          :id="ingressId"
          :title="applications.ingress.title"
          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
          :status="applications.ingress.status"
          :status-reason="applications.ingress.statusReason"
          :request-status="applications.ingress.requestStatus"
          :request-reason="applications.ingress.requestReason"
        >
          <div slot="description">
            <p>
              {{ s__(`ClusterIntegration|Ingress gives you a way to route
                requests to services based on the request host or path,
                centralizing a number of services into a single entrypoint.`) }}
            </p>

            <template v-if="ingressInstalled">
              <div class="form-group">
                <label for="ingress-ip-address">
                  {{ s__('ClusterIntegration|Ingress IP Address') }}
                </label>
                <div
                  v-if="ingressExternalIp"
                  class="input-group"
                >
                  <input
                    type="text"
                    id="ingress-ip-address"
                    class="form-control js-ip-address"
                    :value="ingressExternalIp"
                    readonly
                  />
                  <span class="input-group-btn">
                    <clipboard-button
                      :text="ingressExternalIp"
                      :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
                      class="js-clipboard-btn"
                    />
                  </span>
                </div>
                <input
                  v-else
                  type="text"
                  class="form-control js-ip-address"
                  readonly
                  value="?"
                />
              </div>

              <p
                v-if="!ingressExternalIp"
                class="settings-message js-no-ip-message"
              >
                {{ s__(`ClusterIntegration|The IP address is in
                the process of being assigned. Please check your Kubernetes
                cluster or Quotas on GKE if it takes a long time.`) }}

                <a
                  :href="ingressHelpPath"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {{ __('More information') }}
                </a>
              </p>

              <p>
                {{ s__(`ClusterIntegration|Point a wildcard DNS to this
                generated IP address in order to access
                your application after it has been deployed.`) }}
                <a
                  :href="ingressDnsHelpPath"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {{ __('More information') }}
                </a>
              </p>

            </template>
            <div
              v-else
              v-html="ingressDescription"
            >
            </div>
          </div>
        </application-row>
        <application-row
          id="prometheus"
          :title="applications.prometheus.title"
          title-link="https://prometheus.io/docs/introduction/overview/"
          :manage-link="managePrometheusPath"
          :status="applications.prometheus.status"
          :status-reason="applications.prometheus.statusReason"
          :request-status="applications.prometheus.requestStatus"
          :request-reason="applications.prometheus.requestReason"
        >
          <div
            slot="description"
            v-html="prometheusDescription"
          >
          </div>
        </application-row>
        <application-row
          id="runner"
          :title="applications.runner.title"
          title-link="https://docs.gitlab.com/runner/"
          :status="applications.runner.status"
          :status-reason="applications.runner.statusReason"
          :request-status="applications.runner.requestStatus"
          :request-reason="applications.runner.requestReason"
        >
          <div slot="description">
            {{ s__(`ClusterIntegration|GitLab Runner connects to this
              project's repository and executes CI/CD jobs,
              pushing results back and deploying,
              applications to production.`) }}
          </div>
        </application-row>
        <!--
          NOTE: Don't forget to update `clusters.scss`
          min-height for this block and uncomment `application_spec` tests
        -->
        <!-- Add GitLab Runner row, all other plumbing is complete -->
      </div>
    </div>
  </section>
</template>
