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,77 +513,89 @@ export default { ...@@ -471,77 +513,89 @@ 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"
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">
<label for="knative-domainname"> <label for="knative-domainname">
<strong>
{{ s__('ClusterIntegration|Knative Domain Name:') }} {{ s__('ClusterIntegration|Knative Domain Name:') }}
</strong>
</label> </label>
<input <input
id="knative-domainname" id="knative-domainname"
v-model="applications.knative.hostname" v-model="knativeHostname"
type="text" type="text"
class="form-control js-domainname" class="form-control js-knative-domainname"
/> />
</div> </div>
</template> </template>
<template v-if="knativeInstalled"> <template v-if="knativeInstalled">
<div class="form-group"> <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
<label for="knative-ip-address"> <label for="knative-ip-address">
{{ s__('ClusterIntegration|Knative IP Address:') }} <strong>
{{ s__('ClusterIntegration|Knative Endpoint:') }}
</strong>
</label> </label>
<div v-if="knativeExternalIp" class="input-group"> <div v-if="knativeExternalIp" class="input-group">
<input <input
id="knative-ip-address" id="knative-ip-address"
:value="knativeExternalIp" :value="knativeExternalIp"
type="text" type="text"
class="form-control js-ip-address" class="form-control js-knative-ip-address"
readonly readonly
/> />
<span class="input-group-append"> <span class="input-group-append">
<clipboard-button <clipboard-button
:text="knativeExternalIp" :text="knativeExternalIp"
:title="s__('ClusterIntegration|Copy Knative IP Address to clipboard')" :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
class="input-group-text js-clipboard-btn" class="input-group-text js-knative-ip-clipboard-btn"
/> />
</span> </span>
</div> </div>
<input v-else type="text" class="form-control js-ip-address" readonly value="?" /> <input
v-else
type="text"
class="form-control js-knative-ip-address"
readonly
value="?"
/>
</div> </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.`) )
}} }}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p> </p>
<p> <p
v-if="!knativeExternalIp"
class="settings-message js-no-knative-ip-message mt-2 mr-3 mb-0 ml-3 "
>
{{ {{
s__(`ClusterIntegration|Point a wildcard DNS to this s__(`ClusterIntegration|The IP address is in
generated IP address in order to access the process of being assigned. Please check your Kubernetes
your application after it has been deployed.`) 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> </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> </template>
</div> </div>
</div>
</application-row> </application-row>
</div> </div>
</section> </section>
......
...@@ -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) {
if (!this.state.applications.knative.isEditingHostName) {
this.state.applications.knative.hostname = this.state.applications.knative.hostname =
serverAppEntry.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.',
); );
}); });
}); });
......
import Vue from 'vue'; import Vue from 'vue';
import applications from '~/clusters/components/applications.vue'; import applications from '~/clusters/components/applications.vue';
import { CLUSTER_TYPE } from '~/clusters/constants'; import { CLUSTER_TYPE } from '~/clusters/constants';
import eventHub from '~/clusters/event_hub';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { APPLICATIONS_MOCK_STATE } from '../services/mock_data';
describe('Applications', () => { describe('Applications', () => {
let vm; let vm;
...@@ -18,16 +20,8 @@ describe('Applications', () => { ...@@ -18,16 +20,8 @@ describe('Applications', () => {
describe('Project cluster applications', () => { describe('Project cluster applications', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: APPLICATIONS_MOCK_STATE,
type: CLUSTER_TYPE.PROJECT, type: CLUSTER_TYPE.PROJECT,
applications: {
helm: { title: 'Helm Tiller' },
ingress: { title: 'Ingress' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub' },
knative: { title: 'Knative' },
},
}); });
}); });
...@@ -64,15 +58,7 @@ describe('Applications', () => { ...@@ -64,15 +58,7 @@ describe('Applications', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
type: CLUSTER_TYPE.GROUP, type: CLUSTER_TYPE.GROUP,
applications: { applications: APPLICATIONS_MOCK_STATE,
helm: { title: 'Helm Tiller' },
ingress: { title: 'Ingress' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub' },
knative: { title: 'Knative' },
},
}); });
}); });
...@@ -111,17 +97,12 @@ describe('Applications', () => { ...@@ -111,17 +97,12 @@ describe('Applications', () => {
it('renders ip address with a clipboard button', () => { it('renders ip address with a clipboard button', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
...APPLICATIONS_MOCK_STATE,
ingress: { ingress: {
title: 'Ingress', title: 'Ingress',
status: 'installed', status: 'installed',
externalIp: '0.0.0.0', externalIp: '0.0.0.0',
}, },
helm: { title: 'Helm Tiller' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', hostname: '' },
knative: { title: 'Knative', hostname: '' },
}, },
}); });
...@@ -137,16 +118,11 @@ describe('Applications', () => { ...@@ -137,16 +118,11 @@ describe('Applications', () => {
it('renders an input text with a question mark and an alert text', () => { it('renders an input text with a question mark and an alert text', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
...APPLICATIONS_MOCK_STATE,
ingress: { ingress: {
title: 'Ingress', title: 'Ingress',
status: 'installed', status: 'installed',
}, },
helm: { title: 'Helm Tiller' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', hostname: '' },
knative: { title: 'Knative', hostname: '' },
}, },
}); });
...@@ -160,15 +136,7 @@ describe('Applications', () => { ...@@ -160,15 +136,7 @@ describe('Applications', () => {
describe('before installing', () => { describe('before installing', () => {
it('does not render the IP address', () => { it('does not render the IP address', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: APPLICATIONS_MOCK_STATE,
helm: { title: 'Helm Tiller' },
ingress: { title: 'Ingress' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', hostname: '' },
knative: { title: 'Knative', hostname: '' },
},
}); });
expect(vm.$el.textContent).not.toContain('Ingress IP Address'); expect(vm.$el.textContent).not.toContain('Ingress IP Address');
...@@ -181,17 +149,12 @@ describe('Applications', () => { ...@@ -181,17 +149,12 @@ describe('Applications', () => {
it('renders email & allows editing', () => { it('renders email & allows editing', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
helm: { title: 'Helm Tiller', status: 'installed' }, ...APPLICATIONS_MOCK_STATE,
ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' },
cert_manager: { cert_manager: {
title: 'Cert-Manager', title: 'Cert-Manager',
email: 'before@example.com', email: 'before@example.com',
status: 'installable', status: 'installable',
}, },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', hostname: '', status: 'installable' },
knative: { title: 'Knative', hostname: '', status: 'installable' },
}, },
}); });
...@@ -204,17 +167,12 @@ describe('Applications', () => { ...@@ -204,17 +167,12 @@ describe('Applications', () => {
it('renders email in readonly', () => { it('renders email in readonly', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
helm: { title: 'Helm Tiller', status: 'installed' }, ...APPLICATIONS_MOCK_STATE,
ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' },
cert_manager: { cert_manager: {
title: 'Cert-Manager', title: 'Cert-Manager',
email: 'after@example.com', email: 'after@example.com',
status: 'installed', status: 'installed',
}, },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', hostname: '', status: 'installable' },
knative: { title: 'Knative', hostname: '', status: 'installable' },
}, },
}); });
...@@ -229,13 +187,12 @@ describe('Applications', () => { ...@@ -229,13 +187,12 @@ describe('Applications', () => {
it('renders hostname active input', () => { it('renders hostname active input', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
helm: { title: 'Helm Tiller', status: 'installed' }, ...APPLICATIONS_MOCK_STATE,
ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' }, ingress: {
cert_manager: { title: 'Cert-Manager' }, title: 'Ingress',
runner: { title: 'GitLab Runner' }, status: 'installed',
prometheus: { title: 'Prometheus' }, externalIp: '1.1.1.1',
jupyter: { title: 'JupyterHub', hostname: '', status: 'installable' }, },
knative: { title: 'Knative', hostname: '', status: 'installable' },
}, },
}); });
...@@ -247,13 +204,8 @@ describe('Applications', () => { ...@@ -247,13 +204,8 @@ describe('Applications', () => {
it('does not render hostname input', () => { it('does not render hostname input', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
helm: { title: 'Helm Tiller', status: 'installed' }, ...APPLICATIONS_MOCK_STATE,
ingress: { title: 'Ingress', status: 'installed' }, ingress: { title: 'Ingress', status: 'installed' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', hostname: '', status: 'installable' },
knative: { title: 'Knative', hostname: '', status: 'installable' },
}, },
}); });
...@@ -265,13 +217,9 @@ describe('Applications', () => { ...@@ -265,13 +217,9 @@ describe('Applications', () => {
it('renders readonly input', () => { it('renders readonly input', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
helm: { title: 'Helm Tiller', status: 'installed' }, ...APPLICATIONS_MOCK_STATE,
ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' }, ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' }, jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' },
knative: { title: 'Knative', status: 'installed', hostname: '' },
}, },
}); });
...@@ -282,15 +230,7 @@ describe('Applications', () => { ...@@ -282,15 +230,7 @@ describe('Applications', () => {
describe('without ingress installed', () => { describe('without ingress installed', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: APPLICATIONS_MOCK_STATE,
helm: { title: 'Helm Tiller' },
ingress: { title: 'Ingress' },
cert_manager: { title: 'Cert-Manager' },
runner: { title: 'GitLab Runner' },
prometheus: { title: 'Prometheus' },
jupyter: { title: 'JupyterHub', status: 'not_installable' },
knative: { title: 'Knative' },
},
}); });
}); });
...@@ -310,4 +250,77 @@ describe('Applications', () => { ...@@ -310,4 +250,77 @@ describe('Applications', () => {
}); });
}); });
}); });
describe('Knative application', () => {
describe('when installed', () => {
describe('with ip address', () => {
const props = {
applications: {
...APPLICATIONS_MOCK_STATE,
knative: {
title: 'Knative',
hostname: 'example.com',
status: 'installed',
externalIp: '1.1.1.1',
},
},
};
it('renders ip address with a clipboard button', () => {
vm = mountComponent(Applications, props);
expect(vm.$el.querySelector('.js-knative-ip-address').value).toEqual('1.1.1.1');
expect(
vm.$el
.querySelector('.js-knative-ip-clipboard-btn')
.getAttribute('data-clipboard-text'),
).toEqual('1.1.1.1');
});
it('renders domain & allows editing', () => {
expect(vm.$el.querySelector('.js-knative-domainname').value).toEqual('example.com');
expect(vm.$el.querySelector('.js-knative-domainname').getAttribute('readonly')).toBe(
null,
);
});
it('renders an update/save Knative domain button', () => {
expect(vm.$el.querySelector('.js-knative-save-domain-button')).not.toBe(null);
});
it('emits event when clicking Save changes button', () => {
spyOn(eventHub, '$emit');
vm = mountComponent(Applications, props);
const saveButton = vm.$el.querySelector('.js-knative-save-domain-button');
saveButton.click();
expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
id: 'knative',
params: { hostname: 'example.com' },
});
});
});
describe('without ip address', () => {
it('renders an input text with a question mark and an alert text', () => {
vm = mountComponent(Applications, {
applications: {
...APPLICATIONS_MOCK_STATE,
knative: {
title: 'Knative',
hostname: 'example.com',
status: 'installed',
},
},
});
expect(vm.$el.querySelector('.js-knative-ip-address').value).toEqual('?');
expect(vm.$el.querySelector('.js-no-knative-ip-message')).not.toBe(null);
});
});
});
});
}); });
...@@ -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