applications.vue 9.22 KB
Newer Older
1
<script>
2 3 4
  import _ from 'underscore';
  import { s__, sprintf } from '../../locale';
  import applicationRow from './application_row.vue';
5 6 7
  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
  import {
    APPLICATION_INSTALLED,
Filipa Lacerda's avatar
Filipa Lacerda committed
8
    INGRESS,
9
  } from '../constants';
10

11 12 13
  export default {
    components: {
      applicationRow,
14
      clipboardButton,
15
    },
16 17 18 19 20 21 22 23 24 25 26
    props: {
      applications: {
        type: Object,
        required: false,
        default: () => ({}),
      },
      helpPath: {
        type: String,
        required: false,
        default: '',
      },
27 28 29 30 31
      ingressHelpPath: {
        type: String,
        required: false,
        default: '',
      },
32 33 34 35 36
      ingressDnsHelpPath: {
        type: String,
        required: false,
        default: '',
      },
37 38 39 40
      managePrometheusPath: {
        type: String,
        required: false,
        default: '',
41
      },
42
    },
43 44 45
    computed: {
      generalApplicationDescription() {
        return sprintf(
46
          _.escape(s__(
47 48
            `ClusterIntegration|Install applications on your Kubernetes cluster.
            Read more about %{helpLink}`,
49
          )), {
50 51 52 53 54 55 56
            helpLink: `<a href="${this.helpPath}">
              ${_.escape(s__('ClusterIntegration|installing applications'))}
            </a>`,
          },
          false,
        );
      },
Filipa Lacerda's avatar
Filipa Lacerda committed
57 58 59
      ingressId() {
        return INGRESS;
      },
60 61
      ingressInstalled() {
        return this.applications.ingress.status === APPLICATION_INSTALLED;
62
      },
63 64 65
      ingressExternalIp() {
        return this.applications.ingress.externalIp;
      },
66 67
      ingressDescription() {
        const extraCostParagraph = sprintf(
68 69 70
          _.escape(s__(
            `ClusterIntegration|%{boldNotice} This will add some extra resources
            like a load balancer, which may incur additional costs depending on
71
            the hosting provider your Kubernetes cluster is installed on. If you are using GKE,
72 73
            you can %{pricingLink}.`,
          )), {
74 75
            boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
            pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
76
              ${_.escape(s__('ClusterIntegration|check the pricing here'))}</a>`,
77
          },
78 79
          false,
        );
80

81 82 83 84 85 86 87 88 89 90 91 92
        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,
        );

93
        return `
94
          <p>
95 96
            ${extraCostParagraph}
          </p>
97 98 99
          <p class="settings-message append-bottom-0">
            ${externalIpParagraph}
          </p>
100 101 102 103
        `;
      },
      prometheusDescription() {
        return sprintf(
104 105 106 107
          _.escape(s__(
            `ClusterIntegration|Prometheus is an open-source monitoring system
            with %{gitlabIntegrationLink} to monitor deployed applications.`,
          )), {
Filipa Lacerda's avatar
Filipa Lacerda committed
108
            gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
109
              target="_blank" rel="noopener noreferrer">
110
              ${_.escape(s__('ClusterIntegration|GitLab Integration'))}</a>`,
Filipa Lacerda's avatar
Filipa Lacerda committed
111
          },
112 113 114
          false,
        );
      },
115
    },
116
  };
117 118 119
</script>

<template>
120 121 122 123
  <section
    id="cluster-applications"
    class="settings no-animate expanded"
  >
124 125 126 127 128 129 130 131 132 133 134 135
    <div class="settings-header">
      <h4>
        {{ s__('ClusterIntegration|Applications') }}
      </h4>
      <p
        class="append-bottom-0"
        v-html="generalApplicationDescription"
      >
      </p>
    </div>

    <div class="settings-content">
136
      <div class="append-bottom-20">
137 138 139 140 141 142 143 144
        <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"
145 146
        >
          <div slot="description">
Filipa Lacerda's avatar
Filipa Lacerda committed
147 148 149 150
            {{ s__(`ClusterIntegration|Helm streamlines installing
              and managing Kubernetes applications.
              Tiller runs inside of your Kubernetes Cluster,
              and manages releases of your charts.`) }}
151 152
          </div>
        </application-row>
153
        <application-row
Filipa Lacerda's avatar
Filipa Lacerda committed
154
          :id="ingressId"
155 156 157 158 159 160
          :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"
161 162 163
        >
          <div slot="description">
            <p>
164
              {{ s__(`ClusterIntegration|Ingress gives you a way to route
165
                requests to services based on the request host or path,
166
                centralizing a number of services into a single entrypoint.`) }}
167 168 169 170
            </p>

            <template v-if="ingressInstalled">
              <div class="form-group">
Filipa Lacerda's avatar
Filipa Lacerda committed
171
                <label for="ingress-ip-address">
172
                  {{ s__('ClusterIntegration|Ingress IP Address') }}
173 174
                </label>
                <div
175
                  v-if="ingressExternalIp"
176 177 178 179
                  class="input-group"
                >
                  <input
                    type="text"
Filipa Lacerda's avatar
Filipa Lacerda committed
180
                    id="ingress-ip-address"
Filipa Lacerda's avatar
Filipa Lacerda committed
181
                    class="form-control js-ip-address"
182
                    :value="ingressExternalIp"
183 184 185 186
                    readonly
                  />
                  <span class="input-group-btn">
                    <clipboard-button
187
                      :text="ingressExternalIp"
188
                      :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
189
                      class="js-clipboard-btn"
190 191 192 193 194 195
                    />
                  </span>
                </div>
                <input
                  v-else
                  type="text"
Filipa Lacerda's avatar
Filipa Lacerda committed
196
                  class="form-control js-ip-address"
197
                  readonly
198
                  value="?"
199 200 201 202
                />
              </div>

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

210
                <a
211
                  :href="ingressHelpPath"
212 213 214
                  target="_blank"
                  rel="noopener noreferrer"
                >
Filipa Lacerda's avatar
Filipa Lacerda committed
215
                  {{ __('More information') }}
216 217 218 219 220 221 222 223
                </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
224
                  :href="ingressDnsHelpPath"
225 226 227
                  target="_blank"
                  rel="noopener noreferrer"
                >
Filipa Lacerda's avatar
Filipa Lacerda committed
228
                  {{ __('More information') }}
229 230 231 232
                </a>
              </p>

            </template>
Filipa Lacerda's avatar
Filipa Lacerda committed
233
            <div
234 235 236
              v-else
              v-html="ingressDescription"
            >
Filipa Lacerda's avatar
Filipa Lacerda committed
237
            </div>
238 239
          </div>
        </application-row>
240 241 242 243
        <application-row
          id="prometheus"
          :title="applications.prometheus.title"
          title-link="https://prometheus.io/docs/introduction/overview/"
244
          :manage-link="managePrometheusPath"
245 246 247 248
          :status="applications.prometheus.status"
          :status-reason="applications.prometheus.statusReason"
          :request-status="applications.prometheus.requestStatus"
          :request-reason="applications.prometheus.requestReason"
249 250 251 252 253 254 255
        >
          <div
            slot="description"
            v-html="prometheusDescription"
          >
          </div>
        </application-row>
256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271
        <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>
272 273 274 275
        <!--
          NOTE: Don't forget to update `clusters.scss`
          min-height for this block and uncomment `application_spec` tests
        -->
276 277 278 279 280
        <!-- Add GitLab Runner row, all other plumbing is complete -->
      </div>
    </div>
  </section>
</template>