280 lines
9.2 KiB
Vue
280 lines
9.2 KiB
Vue
<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>
|