| ... | ... | @@ -15,11 +15,14 @@ import { s__, sprintf } from '../../locale'; |
|
|
|
import applicationRow from './application_row.vue';
|
|
|
|
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
|
|
|
|
import { CLUSTER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
|
|
|
|
import LoadingButton from '~/vue_shared/components/loading_button.vue';
|
|
|
|
import eventHub from '~/clusters/event_hub';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
applicationRow,
|
|
|
|
clipboardButton,
|
|
|
|
LoadingButton,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
type: {
|
| ... | ... | @@ -86,53 +89,26 @@ export default { |
|
|
|
ingressInstalled() {
|
|
|
|
return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
|
|
|
|
},
|
|
|
|
ingressExternalIp() {
|
|
|
|
return this.applications.ingress.externalIp;
|
|
|
|
ingressExternalEndpoint() {
|
|
|
|
return this.applications.ingress.externalIp || this.applications.ingress.externalHostname;
|
|
|
|
},
|
|
|
|
certManagerInstalled() {
|
|
|
|
return this.applications.cert_manager.status === APPLICATION_STATUS.INSTALLED;
|
|
|
|
},
|
|
|
|
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
|
|
|
|
Google Kubernetes Engine, 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(
|
|
|
|
return 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}`,
|
|
|
|
`ClusterIntegration|Installing Ingress may incur additional costs. Learn more about %{pricingLink}.`,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
{
|
|
|
|
ingressHelpLink: `<a href="${this.ingressHelpPath}">
|
|
|
|
${_.escape(s__('ClusterIntegration|More information'))}
|
|
|
|
</a>`,
|
|
|
|
pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
|
|
|
|
target="_blank" rel="noopener noreferrer">
|
|
|
|
${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
|
|
|
|
},
|
|
|
|
false,
|
|
|
|
);
|
|
|
|
|
|
|
|
return `
|
|
|
|
<p>
|
|
|
|
${extraCostParagraph}
|
|
|
|
</p>
|
|
|
|
<p class="settings-message append-bottom-0">
|
|
|
|
${externalIpParagraph}
|
|
|
|
</p>
|
|
|
|
`;
|
|
|
|
},
|
|
|
|
certManagerDescription() {
|
|
|
|
return sprintf(
|
| ... | ... | @@ -173,16 +149,70 @@ export default { |
|
|
|
jupyterHostname() {
|
|
|
|
return this.applications.jupyter.hostname;
|
|
|
|
},
|
|
|
|
knative() {
|
|
|
|
return this.applications.knative;
|
|
|
|
},
|
|
|
|
knativeInstalled() {
|
|
|
|
return this.applications.knative.status === APPLICATION_STATUS.INSTALLED;
|
|
|
|
return (
|
|
|
|
this.knative.status === APPLICATION_STATUS.INSTALLED ||
|
|
|
|
this.knativeUpgrading ||
|
|
|
|
this.knativeUpgradeFailed ||
|
|
|
|
this.knative.status === APPLICATION_STATUS.UPDATED
|
|
|
|
);
|
|
|
|
},
|
|
|
|
knativeUpgrading() {
|
|
|
|
return (
|
|
|
|
this.knative.status === APPLICATION_STATUS.UPDATING ||
|
|
|
|
this.knative.status === APPLICATION_STATUS.SCHEDULED
|
|
|
|
);
|
|
|
|
},
|
|
|
|
knativeUpgradeFailed() {
|
|
|
|
return this.knative.status === APPLICATION_STATUS.UPDATE_ERRORED;
|
|
|
|
},
|
|
|
|
knativeExternalEndpoint() {
|
|
|
|
return this.knative.externalIp || this.knative.externalHostname;
|
|
|
|
},
|
|
|
|
knativeDescription() {
|
|
|
|
return sprintf(
|
|
|
|
_.escape(
|
|
|
|
s__(
|
|
|
|
`ClusterIntegration|Installing Knative may incur additional costs. Learn more about %{pricingLink}.`,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
{
|
|
|
|
pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
|
|
|
|
target="_blank" rel="noopener noreferrer">
|
|
|
|
${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
|
|
|
|
},
|
|
|
|
false,
|
|
|
|
);
|
|
|
|
},
|
|
|
|
canUpdateKnativeEndpoint() {
|
|
|
|
return this.knativeExternalEndpoint && !this.knativeUpgradeFailed && !this.knativeUpgrading;
|
|
|
|
},
|
|
|
|
knativeHostname: {
|
|
|
|
get() {
|
|
|
|
return this.knative.hostname;
|
|
|
|
},
|
|
|
|
set(hostname) {
|
|
|
|
eventHub.$emit('setKnativeHostname', {
|
|
|
|
id: 'knative',
|
|
|
|
hostname,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
knativeExternalIp() {
|
|
|
|
return this.applications.knative.externalIp;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.helmInstallIllustration = helmInstallIllustration;
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
saveKnativeDomain() {
|
|
|
|
eventHub.$emit('saveKnativeDomain', {
|
|
|
|
id: 'knative',
|
|
|
|
params: { hostname: this.knative.hostname },
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
| ... | ... | @@ -247,30 +277,30 @@ export default { |
|
|
|
|
|
|
|
<template v-if="ingressInstalled">
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="ingress-ip-address">
|
|
|
|
{{ s__('ClusterIntegration|Ingress IP Address') }}
|
|
|
|
<label for="ingress-endpoint">
|
|
|
|
{{ s__('ClusterIntegration|Ingress Endpoint') }}
|
|
|
|
</label>
|
|
|
|
<div v-if="ingressExternalIp" class="input-group">
|
|
|
|
<div v-if="ingressExternalEndpoint" class="input-group">
|
|
|
|
<input
|
|
|
|
id="ingress-ip-address"
|
|
|
|
:value="ingressExternalIp"
|
|
|
|
id="ingress-endpoint"
|
|
|
|
:value="ingressExternalEndpoint"
|
|
|
|
type="text"
|
|
|
|
class="form-control js-ip-address"
|
|
|
|
class="form-control js-endpoint"
|
|
|
|
readonly
|
|
|
|
/>
|
|
|
|
<span class="input-group-append">
|
|
|
|
<clipboard-button
|
|
|
|
:text="ingressExternalIp"
|
|
|
|
:title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
|
|
|
|
:text="ingressExternalEndpoint"
|
|
|
|
:title="s__('ClusterIntegration|Copy Ingress Endpoint to clipboard')"
|
|
|
|
class="input-group-text js-clipboard-btn"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<input v-else type="text" class="form-control js-ip-address" readonly value="?" />
|
|
|
|
<input v-else type="text" class="form-control js-endpoint" readonly value="?" />
|
|
|
|
<p class="form-text text-muted">
|
|
|
|
{{
|
|
|
|
s__(`ClusterIntegration|Point a wildcard DNS to this
|
|
|
|
generated IP address in order to access
|
|
|
|
generated endpoint in order to access
|
|
|
|
your application after it has been deployed.`)
|
|
|
|
}}
|
|
|
|
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
|
| ... | ... | @@ -279,19 +309,21 @@ export default { |
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p v-if="!ingressExternalIp" class="settings-message js-no-ip-message">
|
|
|
|
<p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
|
|
|
|
{{
|
|
|
|
s__(`ClusterIntegration|The IP address is in
|
|
|
|
s__(`ClusterIntegration|The endpoint is in
|
|
|
|
the process of being assigned. Please check your Kubernetes
|
|
|
|
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
|
|
|
|
}}
|
|
|
|
|
|
|
|
<a :href="ingressHelpPath" target="_blank" rel="noopener noreferrer">
|
|
|
|
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
|
|
|
|
{{ __('More information') }}
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
</template>
|
|
|
|
<div v-html="ingressDescription"></div>
|
|
|
|
<template v-if="!ingressInstalled">
|
|
|
|
<div class="bs-callout bs-callout-info" v-html="ingressDescription"></div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</application-row>
|
|
|
|
<application-row
|
| ... | ... | @@ -401,7 +433,7 @@ export default { |
|
|
|
}}
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<template v-if="ingressExternalIp">
|
|
|
|
<template v-if="ingressExternalEndpoint">
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="jupyter-hostname">
|
|
|
|
{{ s__('ClusterIntegration|Jupyter Hostname') }}
|
| ... | ... | @@ -451,7 +483,7 @@ export default { |
|
|
|
>
|
|
|
|
<div slot="description">
|
|
|
|
<span v-if="!rbac">
|
|
|
|
<p v-if="!rbac" class="bs-callout bs-callout-info append-bottom-0">
|
|
|
|
<p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info append-bottom-0">
|
|
|
|
{{
|
|
|
|
s__(`ClusterIntegration|You must have an RBAC-enabled cluster
|
|
|
|
to install Knative.`)
|
| ... | ... | @@ -471,77 +503,89 @@ export default { |
|
|
|
}}
|
|
|
|
</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.hostname"
|
|
|
|
type="text"
|
|
|
|
class="form-control js-domainname"
|
|
|
|
readonly
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-else-if="helmInstalled && rbac">
|
|
|
|
<div class="form-group">
|
|
|
|
<div class="row">
|
|
|
|
<template v-if="knativeInstalled || (helmInstalled && rbac)">
|
|
|
|
<div
|
|
|
|
:class="{ 'col-md-6': knativeInstalled, 'col-12': helmInstalled && rbac }"
|
|
|
|
class="form-group col-sm-12 mb-0"
|
|
|
|
>
|
|
|
|
<label for="knative-domainname">
|
|
|
|
<strong>
|
|
|
|
{{ s__('ClusterIntegration|Knative Domain Name:') }}
|
|
|
|
</strong>
|
|
|
|
</label>
|
|
|
|
<input
|
|
|
|
id="knative-domainname"
|
|
|
|
v-model="applications.knative.hostname"
|
|
|
|
v-model="knativeHostname"
|
|
|
|
type="text"
|
|
|
|
class="form-control js-domainname"
|
|
|
|
class="form-control js-knative-domainname"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-if="knativeInstalled">
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="knative-ip-address">
|
|
|
|
{{ s__('ClusterIntegration|Knative IP Address:') }}
|
|
|
|
<div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
|
|
|
|
<label for="knative-endpoint">
|
|
|
|
<strong>
|
|
|
|
{{ s__('ClusterIntegration|Knative Endpoint:') }}
|
|
|
|
</strong>
|
|
|
|
</label>
|
|
|
|
<div v-if="knativeExternalIp" class="input-group">
|
|
|
|
<div v-if="knativeExternalEndpoint" class="input-group">
|
|
|
|
<input
|
|
|
|
id="knative-ip-address"
|
|
|
|
:value="knativeExternalIp"
|
|
|
|
id="knative-endpoint"
|
|
|
|
:value="knativeExternalEndpoint"
|
|
|
|
type="text"
|
|
|
|
class="form-control js-ip-address"
|
|
|
|
class="form-control js-knative-endpoint"
|
|
|
|
readonly
|
|
|
|
/>
|
|
|
|
<span class="input-group-append">
|
|
|
|
<clipboard-button
|
|
|
|
:text="knativeExternalIp"
|
|
|
|
:title="s__('ClusterIntegration|Copy Knative IP Address to clipboard')"
|
|
|
|
class="input-group-text js-clipboard-btn"
|
|
|
|
:text="knativeExternalEndpoint"
|
|
|
|
:title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
|
|
|
|
class="input-group-text js-knative-endpoint-clipboard-btn"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<input v-else type="text" class="form-control js-ip-address" readonly value="?" />
|
|
|
|
<input
|
|
|
|
v-else
|
|
|
|
type="text"
|
|
|
|
class="form-control js-knative-endpoint"
|
|
|
|
readonly
|
|
|
|
value="?"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p v-if="!knativeExternalIp" class="settings-message js-no-ip-message">
|
|
|
|
<p class="form-text text-muted col-12">
|
|
|
|
{{
|
|
|
|
s__(`ClusterIntegration|The IP address is in
|
|
|
|
the process of being assigned. Please check your Kubernetes
|
|
|
|
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
|
|
|
|
s__(
|
|
|
|
`ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint.`,
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
|
|
|
|
{{ __('More information') }}
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
<p
|
|
|
|
v-if="!knativeExternalEndpoint"
|
|
|
|
class="settings-message js-no-knative-endpoint-message mt-2 mr-3 mb-0 ml-3"
|
|
|
|
>
|
|
|
|
{{
|
|
|
|
s__(`ClusterIntegration|Point a wildcard DNS to this
|
|
|
|
generated IP address in order to access
|
|
|
|
your application after it has been deployed.`)
|
|
|
|
s__(`ClusterIntegration|The endpoint is in
|
|
|
|
the process of being assigned. Please check your Kubernetes
|
|
|
|
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
|
|
|
|
}}
|
|
|
|
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
|
|
|
|
{{ __('More information') }}
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<button
|
|
|
|
v-if="canUpdateKnativeEndpoint"
|
|
|
|
class="btn btn-success js-knative-save-domain-button mt-3 ml-3"
|
|
|
|
@click="saveKnativeDomain"
|
|
|
|
>
|
|
|
|
{{ s__('ClusterIntegration|Save changes') }}
|
|
|
|
</button>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</application-row>
|
|
|
|
</div>
|
|
|
|
</section>
|
| ... | ... | |
| ... | ... | |