Commit cf1b85dd authored by jerasmus's avatar jerasmus

Add ability to edit Knative domain

Added the functionality to edit the Knative domain
parent fd50ba42
...@@ -36,6 +36,7 @@ export default class Clusters { ...@@ -36,6 +36,7 @@ export default class Clusters {
installRunnerPath, installRunnerPath,
installJupyterPath, installJupyterPath,
installKnativePath, installKnativePath,
updateKnativePath,
installPrometheusPath, installPrometheusPath,
managePrometheusPath, managePrometheusPath,
hasRbac, hasRbac,
...@@ -62,6 +63,7 @@ export default class Clusters { ...@@ -62,6 +63,7 @@ export default class Clusters {
installPrometheusEndpoint: installPrometheusPath, installPrometheusEndpoint: installPrometheusPath,
installJupyterEndpoint: installJupyterPath, installJupyterEndpoint: installJupyterPath,
installKnativeEndpoint: installKnativePath, installKnativeEndpoint: installKnativePath,
updateKnativeEndpoint: updateKnativePath,
}); });
this.installApplication = this.installApplication.bind(this); this.installApplication = this.installApplication.bind(this);
...@@ -129,6 +131,8 @@ export default class Clusters { ...@@ -129,6 +131,8 @@ export default class Clusters {
eventHub.$on('upgradeApplication', data => this.upgradeApplication(data)); eventHub.$on('upgradeApplication', data => this.upgradeApplication(data));
eventHub.$on('upgradeFailed', appId => this.upgradeFailed(appId)); eventHub.$on('upgradeFailed', appId => this.upgradeFailed(appId));
eventHub.$on('dismissUpgradeSuccess', appId => this.dismissUpgradeSuccess(appId)); eventHub.$on('dismissUpgradeSuccess', appId => this.dismissUpgradeSuccess(appId));
eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data));
eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data));
} }
removeListeners() { removeListeners() {
...@@ -137,6 +141,8 @@ export default class Clusters { ...@@ -137,6 +141,8 @@ export default class Clusters {
eventHub.$off('upgradeApplication', this.upgradeApplication); eventHub.$off('upgradeApplication', this.upgradeApplication);
eventHub.$off('upgradeFailed', this.upgradeFailed); eventHub.$off('upgradeFailed', this.upgradeFailed);
eventHub.$off('dismissUpgradeSuccess', this.dismissUpgradeSuccess); eventHub.$off('dismissUpgradeSuccess', this.dismissUpgradeSuccess);
eventHub.$off('saveKnativeDomain');
eventHub.$off('setKnativeHostname');
} }
initPolling() { initPolling() {
...@@ -272,6 +278,18 @@ export default class Clusters { ...@@ -272,6 +278,18 @@ export default class Clusters {
this.store.updateAppProperty(appId, 'requestStatus', null); this.store.updateAppProperty(appId, 'requestStatus', null);
} }
saveKnativeDomain(data) {
const appId = data.id;
this.store.updateAppProperty(appId, 'status', APPLICATION_STATUS.UPDATING);
this.service.updateApplication(appId, data.params);
}
setKnativeHostname(data) {
const appId = data.id;
this.store.updateAppProperty(appId, 'isEditingHostName', true);
this.store.updateAppProperty(appId, 'hostname', data.hostname);
}
destroy() { destroy() {
this.destroyed = true; this.destroyed = true;
......
...@@ -191,14 +191,7 @@ export default { ...@@ -191,14 +191,7 @@ export default {
return this.status === APPLICATION_STATUS.UPDATE_ERRORED; return this.status === APPLICATION_STATUS.UPDATE_ERRORED;
}, },
upgradeFailureDescription() { upgradeFailureDescription() {
return sprintf( return s__('ClusterIntegration|Update failed. Please check the logs and try again.');
s__(
'ClusterIntegration|Something went wrong when upgrading %{title}. Please check the logs and try again.',
),
{
title: this.title,
},
);
}, },
upgradeSuccessDescription() { upgradeSuccessDescription() {
return sprintf(s__('ClusterIntegration|%{title} upgraded successfully.'), { return sprintf(s__('ClusterIntegration|%{title} upgraded successfully.'), {
...@@ -210,9 +203,9 @@ export default { ...@@ -210,9 +203,9 @@ export default {
if (this.upgradeAvailable && !this.upgradeFailed && !this.isUpgrading) { if (this.upgradeAvailable && !this.upgradeFailed && !this.isUpgrading) {
label = s__('ClusterIntegration|Upgrade'); label = s__('ClusterIntegration|Upgrade');
} else if (this.isUpgrading) { } else if (this.isUpgrading) {
label = s__('ClusterIntegration|Upgrading'); label = s__('ClusterIntegration|Updating');
} else if (this.upgradeFailed) { } else if (this.upgradeFailed) {
label = s__('ClusterIntegration|Retry upgrade'); label = s__('ClusterIntegration|Retry update');
} }
return label; return label;
...@@ -224,6 +217,14 @@ export default { ...@@ -224,6 +217,14 @@ export default {
(this.upgradeRequested && !this.upgradeSuccessful) (this.upgradeRequested && !this.upgradeSuccessful)
); );
}, },
shouldShowUpgradeDetails() {
// This method only returns true when;
// Upgrade was successful OR Upgrade failed
// AND new upgrade is unavailable AND version information is present.
return (
(this.upgradeSuccessful || this.upgradeFailed) && !this.upgradeAvailable && this.version
);
},
}, },
watch: { watch: {
status() { status() {
...@@ -303,7 +304,7 @@ export default { ...@@ -303,7 +304,7 @@ export default {
</div> </div>
<div <div
v-if="(upgradeSuccessful || upgradeFailed) && !upgradeAvailable" v-if="shouldShowUpgradeDetails"
class="form-text text-muted label p-0 js-cluster-application-upgrade-details" class="form-text text-muted label p-0 js-cluster-application-upgrade-details"
> >
{{ versionLabel }} {{ versionLabel }}
......
...@@ -15,11 +15,14 @@ import { s__, sprintf } from '../../locale'; ...@@ -15,11 +15,14 @@ import { s__, sprintf } from '../../locale';
import applicationRow from './application_row.vue'; import applicationRow from './application_row.vue';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import { CLUSTER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants'; 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 { export default {
components: { components: {
applicationRow, applicationRow,
clipboardButton, clipboardButton,
LoadingButton,
}, },
props: { props: {
type: { type: {
...@@ -173,16 +176,55 @@ export default { ...@@ -173,16 +176,55 @@ export default {
jupyterHostname() { jupyterHostname() {
return this.applications.jupyter.hostname; return this.applications.jupyter.hostname;
}, },
knative() {
return this.applications.knative;
},
knativeInstalled() { 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;
}, },
knativeExternalIp() { knativeExternalIp() {
return this.applications.knative.externalIp; return this.knative.externalIp;
},
canUpdateKnativeEndpoint() {
return this.knativeExternalIp && !this.knativeUpgradeFailed && !this.knativeUpgrading;
},
knativeHostname: {
get() {
return this.knative.hostname;
},
set(hostname) {
eventHub.$emit('setKnativeHostname', {
id: 'knative',
hostname,
});
},
}, },
}, },
created() { created() {
this.helmInstallIllustration = helmInstallIllustration; this.helmInstallIllustration = helmInstallIllustration;
}, },
methods: {
saveKnativeDomain() {
eventHub.$emit('saveKnativeDomain', {
id: 'knative',
params: { hostname: this.knative.hostname },
});
},
},
}; };
</script> </script>
...@@ -471,76 +513,88 @@ export default { ...@@ -471,76 +513,88 @@ export default {
}} }}
</p> </p>
<template v-if="knativeInstalled"> <div class="row">
<div class="form-group"> <template v-if="knativeInstalled || (helmInstalled && rbac)">
<label for="knative-domainname"> <div
{{ s__('ClusterIntegration|Knative Domain Name:') }} :class="{ 'col-md-6': knativeInstalled, 'col-12': helmInstalled && rbac }"
</label> class="form-group col-sm-12 mb-0"
<input >
id="knative-domainname" <label for="knative-domainname">
v-model="applications.knative.hostname" <strong>
type="text" {{ s__('ClusterIntegration|Knative Domain Name:') }}
class="form-control js-domainname" </strong>
readonly </label>
/>
</div>
</template>
<template v-else-if="helmInstalled && rbac">
<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"
/>
</div>
</template>
<template v-if="knativeInstalled">
<div class="form-group">
<label for="knative-ip-address">
{{ s__('ClusterIntegration|Knative IP Address:') }}
</label>
<div v-if="knativeExternalIp" class="input-group">
<input <input
id="knative-ip-address" id="knative-domainname"
:value="knativeExternalIp" v-model="knativeHostname"
type="text" type="text"
class="form-control js-ip-address" class="form-control js-knative-domainname"
readonly
/> />
<span class="input-group-append"> </div>
<clipboard-button </template>
:text="knativeExternalIp" <template v-if="knativeInstalled">
:title="s__('ClusterIntegration|Copy Knative IP Address to clipboard')" <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
class="input-group-text js-clipboard-btn" <label for="knative-ip-address">
<strong>
{{ s__('ClusterIntegration|Knative Endpoint:') }}
</strong>
</label>
<div v-if="knativeExternalIp" class="input-group">
<input
id="knative-ip-address"
:value="knativeExternalIp"
type="text"
class="form-control js-knative-ip-address"
readonly
/> />
</span> <span class="input-group-append">
<clipboard-button
:text="knativeExternalIp"
:title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
class="input-group-text js-knative-ip-clipboard-btn"
/>
</span>
</div>
<input
v-else
type="text"
class="form-control js-knative-ip-address"
readonly
value="?"
/>
</div> </div>
<input v-else type="text" class="form-control js-ip-address" 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 s__(
the process of being assigned. Please check your Kubernetes `ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint.`,
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`) )
}} }}
</p> <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
<p> <p
{{ v-if="!knativeExternalIp"
s__(`ClusterIntegration|Point a wildcard DNS to this class="settings-message js-no-knative-ip-message mt-2 mr-3 mb-0 ml-3 "
generated IP address in order to access >
your application after it has been deployed.`) {{
}} s__(`ClusterIntegration|The IP address is in
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer"> the process of being assigned. Please check your Kubernetes
{{ __('More information') }} cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
</a> }}
</p> </p>
</template>
<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> </div>
</application-row> </application-row>
</div> </div>
......
...@@ -12,6 +12,9 @@ export default class ClusterService { ...@@ -12,6 +12,9 @@ export default class ClusterService {
jupyter: this.options.installJupyterEndpoint, jupyter: this.options.installJupyterEndpoint,
knative: this.options.installKnativeEndpoint, knative: this.options.installKnativeEndpoint,
}; };
this.appUpdateEndpointMap = {
knative: this.options.updateKnativeEndpoint,
};
} }
fetchData() { fetchData() {
...@@ -22,6 +25,10 @@ export default class ClusterService { ...@@ -22,6 +25,10 @@ export default class ClusterService {
return axios.post(this.appInstallEndpointMap[appId], params); return axios.post(this.appInstallEndpointMap[appId], params);
} }
updateApplication(appId, params) {
return axios.patch(this.appUpdateEndpointMap[appId], params);
}
static updateCluster(endpoint, data) { static updateCluster(endpoint, data) {
return axios.put(endpoint, data); return axios.put(endpoint, data);
} }
......
...@@ -66,6 +66,7 @@ export default class ClusterStore { ...@@ -66,6 +66,7 @@ export default class ClusterStore {
requestStatus: null, requestStatus: null,
requestReason: null, requestReason: null,
hostname: null, hostname: null,
isEditingHostName: false,
externalIp: null, externalIp: null,
}, },
}, },
...@@ -129,8 +130,10 @@ export default class ClusterStore { ...@@ -129,8 +130,10 @@ export default class ClusterStore {
? `jupyter.${this.state.applications.ingress.externalIp}.nip.io` ? `jupyter.${this.state.applications.ingress.externalIp}.nip.io`
: ''); : '');
} else if (appId === KNATIVE) { } else if (appId === KNATIVE) {
this.state.applications.knative.hostname = if (!this.state.applications.knative.isEditingHostName) {
serverAppEntry.hostname || this.state.applications.knative.hostname; this.state.applications.knative.hostname =
serverAppEntry.hostname || this.state.applications.knative.hostname;
}
this.state.applications.knative.externalIp = this.state.applications.knative.externalIp =
serverAppEntry.external_ip || this.state.applications.knative.externalIp; serverAppEntry.external_ip || this.state.applications.knative.externalIp;
} else if (appId === RUNNER) { } else if (appId === RUNNER) {
......
---
title: Edit Knative domain after it has been deployed
merge_request: 25386
author:
type: added
...@@ -1683,7 +1683,7 @@ msgstr "" ...@@ -1683,7 +1683,7 @@ msgstr ""
msgid "ClusterIntegration|Copy Jupyter Hostname to clipboard" msgid "ClusterIntegration|Copy Jupyter Hostname to clipboard"
msgstr "" msgstr ""
msgid "ClusterIntegration|Copy Knative IP Address to clipboard" msgid "ClusterIntegration|Copy Knative Endpoint to clipboard"
msgstr "" msgstr ""
msgid "ClusterIntegration|Copy Kubernetes cluster name" msgid "ClusterIntegration|Copy Kubernetes cluster name"
...@@ -1806,7 +1806,7 @@ msgstr "" ...@@ -1806,7 +1806,7 @@ msgstr ""
msgid "ClusterIntegration|Knative Domain Name:" msgid "ClusterIntegration|Knative Domain Name:"
msgstr "" msgstr ""
msgid "ClusterIntegration|Knative IP Address:" msgid "ClusterIntegration|Knative Endpoint:"
msgstr "" msgstr ""
msgid "ClusterIntegration|Knative extends Kubernetes to provide 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." msgid "ClusterIntegration|Knative extends Kubernetes to provide 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."
...@@ -1926,7 +1926,7 @@ msgstr "" ...@@ -1926,7 +1926,7 @@ msgstr ""
msgid "ClusterIntegration|Request to begin installing failed" msgid "ClusterIntegration|Request to begin installing failed"
msgstr "" msgstr ""
msgid "ClusterIntegration|Retry upgrade" msgid "ClusterIntegration|Retry update"
msgstr "" msgstr ""
msgid "ClusterIntegration|Save changes" msgid "ClusterIntegration|Save changes"
...@@ -1971,9 +1971,6 @@ msgstr "" ...@@ -1971,9 +1971,6 @@ msgstr ""
msgid "ClusterIntegration|Something went wrong on our end." msgid "ClusterIntegration|Something went wrong on our end."
msgstr "" msgstr ""
msgid "ClusterIntegration|Something went wrong when upgrading %{title}. Please check the logs and try again."
msgstr ""
msgid "ClusterIntegration|Something went wrong while creating your Kubernetes cluster on Google Kubernetes Engine" msgid "ClusterIntegration|Something went wrong while creating your Kubernetes cluster on Google Kubernetes Engine"
msgstr "" msgstr ""
...@@ -1992,12 +1989,21 @@ msgstr "" ...@@ -1992,12 +1989,21 @@ msgstr ""
msgid "ClusterIntegration|This option will allow you to install applications on RBAC clusters." msgid "ClusterIntegration|This option will allow you to install applications on RBAC clusters."
msgstr "" msgstr ""
msgid "ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint."
msgstr ""
msgid "ClusterIntegration|Toggle Kubernetes cluster" msgid "ClusterIntegration|Toggle Kubernetes cluster"
msgstr "" msgstr ""
msgid "ClusterIntegration|Token" msgid "ClusterIntegration|Token"
msgstr "" msgstr ""
msgid "ClusterIntegration|Update failed. Please check the logs and try again."
msgstr ""
msgid "ClusterIntegration|Updating"
msgstr ""
msgid "ClusterIntegration|Upgrade" msgid "ClusterIntegration|Upgrade"
msgstr "" msgstr ""
......
...@@ -230,7 +230,7 @@ describe('Application Row', () => { ...@@ -230,7 +230,7 @@ describe('Application Row', () => {
expect(upgradeBtn.innerHTML).toContain('Upgrade'); expect(upgradeBtn.innerHTML).toContain('Upgrade');
}); });
it('has enabled "Retry upgrade" when APPLICATION_STATUS.UPDATE_ERRORED', () => { it('has enabled "Retry update" when APPLICATION_STATUS.UPDATE_ERRORED', () => {
vm = mountComponent(ApplicationRow, { vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE, ...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.UPDATE_ERRORED, status: APPLICATION_STATUS.UPDATE_ERRORED,
...@@ -239,10 +239,10 @@ describe('Application Row', () => { ...@@ -239,10 +239,10 @@ describe('Application Row', () => {
expect(upgradeBtn).not.toBe(null); expect(upgradeBtn).not.toBe(null);
expect(vm.upgradeFailed).toBe(true); expect(vm.upgradeFailed).toBe(true);
expect(upgradeBtn.innerHTML).toContain('Retry upgrade'); expect(upgradeBtn.innerHTML).toContain('Retry update');
}); });
it('has disabled "Retry upgrade" when APPLICATION_STATUS.UPDATING', () => { it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => {
vm = mountComponent(ApplicationRow, { vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE, ...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.UPDATING, status: APPLICATION_STATUS.UPDATING,
...@@ -251,7 +251,7 @@ describe('Application Row', () => { ...@@ -251,7 +251,7 @@ describe('Application Row', () => {
expect(upgradeBtn).not.toBe(null); expect(upgradeBtn).not.toBe(null);
expect(vm.isUpgrading).toBe(true); expect(vm.isUpgrading).toBe(true);
expect(upgradeBtn.innerHTML).toContain('Upgrading'); expect(upgradeBtn.innerHTML).toContain('Updating');
}); });
it('clicking upgrade button emits event', () => { it('clicking upgrade button emits event', () => {
...@@ -295,7 +295,7 @@ describe('Application Row', () => { ...@@ -295,7 +295,7 @@ describe('Application Row', () => {
expect(failureMessage).not.toBe(null); expect(failureMessage).not.toBe(null);
expect(failureMessage.innerHTML).toContain( expect(failureMessage.innerHTML).toContain(
'Something went wrong when upgrading GitLab Runner. Please check the logs and try again.', 'Update failed. Please check the logs and try again.',
); );
}); });
}); });
......
...@@ -115,4 +115,14 @@ const DEFAULT_APPLICATION_STATE = { ...@@ -115,4 +115,14 @@ const DEFAULT_APPLICATION_STATE = {
requestReason: null, requestReason: null,
}; };
export { CLUSTERS_MOCK_DATA, DEFAULT_APPLICATION_STATE }; const APPLICATIONS_MOCK_STATE = {
helm: { title: 'Helm Tiller', status: 'installable' },
ingress: { title: 'Ingress', status: 'installable' },
cert_manager: { title: 'Cert-Manager', status: 'installable' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', status: 'installable', hostname: '' },
knative: { title: 'Knative ', status: 'installable', hostname: '' },
};
export { CLUSTERS_MOCK_DATA, DEFAULT_APPLICATION_STATE, APPLICATIONS_MOCK_STATE };
...@@ -111,6 +111,7 @@ describe('Clusters Store', () => { ...@@ -111,6 +111,7 @@ describe('Clusters Store', () => {
requestStatus: null, requestStatus: null,
requestReason: null, requestReason: null,
hostname: null, hostname: null,
isEditingHostName: false,
externalIp: null, externalIp: null,
}, },
cert_manager: { cert_manager: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment