BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 14fcd394 by Kamil Trzciński
Options

Merge branch '36629-35958-add-cluster-application-section' into '38464-k8s-apps'

Add applications section to GKE clusters page See merge request gitlab-org/gitlab-ce!15064
parents f676f388 9c76c448
Showing with 1374 additions and 209 deletions
app/assets/javascripts/clusters.js deleted 100644 → 0
/* globals Flash */
import Visibility from 'visibilityjs';
import axios from 'axios';
import setAxiosCsrfToken from './lib/utils/axios_utils';
import Poll from './lib/utils/poll';
import { s__ } from './locale';
import initSettingsPanels from './settings_panels';
import Flash from './flash';
/**
* Cluster page has 2 separate parts:
* Toggle button
*
* - Polling status while creating or scheduled
* -- Update status area with the response result
*/
class ClusterService {
constructor(options = {}) {
this.options = options;
setAxiosCsrfToken();
}
fetchData() {
return axios.get(this.options.endpoint);
}
}
export default class Clusters {
constructor() {
initSettingsPanels();
const dataset = document.querySelector('.js-edit-cluster-form').dataset;
this.state = {
statusPath: dataset.statusPath,
clusterStatus: dataset.clusterStatus,
clusterStatusReason: dataset.clusterStatusReason,
toggleStatus: dataset.toggleStatus,
};
this.service = new ClusterService({ endpoint: this.state.statusPath });
this.toggleButton = document.querySelector('.js-toggle-cluster');
this.toggleInput = document.querySelector('.js-toggle-input');
this.errorContainer = document.querySelector('.js-cluster-error');
this.successContainer = document.querySelector('.js-cluster-success');
this.creatingContainer = document.querySelector('.js-cluster-creating');
this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason');
this.toggleButton.addEventListener('click', this.toggle.bind(this));
if (this.state.clusterStatus !== 'created') {
this.updateContainer(this.state.clusterStatus, this.state.clusterStatusReason);
}
if (this.state.statusPath) {
this.initPolling();
}
}
toggle() {
this.toggleButton.classList.toggle('checked');
this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
}
initPolling() {
this.poll = new Poll({
resource: this.service,
method: 'fetchData',
successCallback: data => this.handleSuccess(data),
errorCallback: () => Clusters.handleError(),
});
if (!Visibility.hidden()) {
this.poll.makeRequest();
} else {
this.service.fetchData()
.then(data => this.handleSuccess(data))
.catch(() => Clusters.handleError());
}
Visibility.change(() => {
if (!Visibility.hidden()) {
this.poll.restart();
} else {
this.poll.stop();
}
});
}
static handleError() {
Flash(s__('ClusterIntegration|Something went wrong on our end.'));
}
handleSuccess(data) {
const { status, status_reason } = data.data;
this.updateContainer(status, status_reason);
}
hideAll() {
this.errorContainer.classList.add('hidden');
this.successContainer.classList.add('hidden');
this.creatingContainer.classList.add('hidden');
}
updateContainer(status, error) {
this.hideAll();
switch (status) {
case 'created':
this.successContainer.classList.remove('hidden');
break;
case 'errored':
this.errorContainer.classList.remove('hidden');
this.errorReasonContainer.textContent = error;
break;
case 'scheduled':
case 'creating':
this.creatingContainer.classList.remove('hidden');
break;
default:
this.hideAll();
}
}
}
app/assets/javascripts/clusters/clusters_bundle.js 0 → 100644
import Visibility from 'visibilityjs';
import Vue from 'vue';
import { s__, sprintf } from '../locale';
import Flash from '../flash';
import Poll from '../lib/utils/poll';
import initSettingsPanels from '../settings_panels';
import eventHub from './event_hub';
import {
APPLICATION_INSTALLED,
REQUEST_LOADING,
REQUEST_SUCCESS,
REQUEST_FAILURE,
} from './constants';
import ClustersService from './services/clusters_service';
import ClustersStore from './stores/clusters_store';
import applications from './components/applications.vue';
/**
* Cluster page has 2 separate parts:
* Toggle button and applications section
*
* - Polling status while creating or scheduled
* - Update status area with the response result
*/
export default class Clusters {
constructor() {
const {
statusPath,
installHelmPath,
installIngressPath,
installRunnerPath,
clusterStatus,
clusterStatusReason,
helpPath,
} = document.querySelector('.js-edit-cluster-form').dataset;
this.store = new ClustersStore();
this.store.setHelpPath(helpPath);
this.store.updateStatus(clusterStatus);
this.store.updateStatusReason(clusterStatusReason);
this.service = new ClustersService({
endpoint: statusPath,
installHelmEndpoint: installHelmPath,
installIngresEndpoint: installIngressPath,
installRunnerEndpoint: installRunnerPath,
});
this.toggle = this.toggle.bind(this);
this.installApplication = this.installApplication.bind(this);
this.toggleButton = document.querySelector('.js-toggle-cluster');
this.toggleInput = document.querySelector('.js-toggle-input');
this.errorContainer = document.querySelector('.js-cluster-error');
this.successContainer = document.querySelector('.js-cluster-success');
this.creatingContainer = document.querySelector('.js-cluster-creating');
this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason');
this.successApplicationContainer = document.querySelector('.js-cluster-application-notice');
initSettingsPanels();
this.initApplications();
if (this.store.state.status !== 'created') {
this.updateContainer(null, this.store.state.status, this.store.state.statusReason);
}
this.addListeners();
if (statusPath) {
this.initPolling();
}
}
initApplications() {
const store = this.store;
const el = document.querySelector('#js-cluster-applications');
this.applications = new Vue({
el,
components: {
applications,
},
data() {
return {
state: store.state,
};
},
render(createElement) {
return createElement('applications', {
props: {
applications: this.state.applications,
helpPath: this.state.helpPath,
},
});
},
});
}
addListeners() {
this.toggleButton.addEventListener('click', this.toggle);
eventHub.$on('installApplication', this.installApplication);
}
removeListeners() {
this.toggleButton.removeEventListener('click', this.toggle);
eventHub.$off('installApplication', this.installApplication);
}
initPolling() {
this.poll = new Poll({
resource: this.service,
method: 'fetchData',
successCallback: data => this.handleSuccess(data),
errorCallback: () => Clusters.handleError(),
});
if (!Visibility.hidden()) {
this.poll.makeRequest();
} else {
this.service.fetchData()
.then(data => this.handleSuccess(data))
.catch(() => Clusters.handleError());
}
Visibility.change(() => {
if (!Visibility.hidden() && !this.destroyed) {
this.poll.restart();
} else {
this.poll.stop();
}
});
}
static handleError() {
Flash(s__('ClusterIntegration|Something went wrong on our end.'));
}
handleSuccess(data) {
const prevStatus = this.store.state.status;
const prevApplicationMap = Object.assign({}, this.store.state.applications);
this.store.updateStateFromServer(data.data);
this.checkForNewInstalls(prevApplicationMap, this.store.state.applications);
this.updateContainer(prevStatus, this.store.state.status, this.store.state.statusReason);
}
toggle() {
this.toggleButton.classList.toggle('checked');
this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
}
hideAll() {
this.errorContainer.classList.add('hidden');
this.successContainer.classList.add('hidden');
this.creatingContainer.classList.add('hidden');
}
checkForNewInstalls(prevApplicationMap, newApplicationMap) {
const appTitles = Object.keys(newApplicationMap)
.filter(appId => newApplicationMap[appId].status === APPLICATION_INSTALLED &&
prevApplicationMap[appId].status !== APPLICATION_INSTALLED &&
prevApplicationMap[appId].status !== null)
.map(appId => newApplicationMap[appId].title);
if (appTitles.length > 0) {
this.successApplicationContainer.textContent = sprintf(s__('ClusterIntegration|%{appList} was successfully installed on your cluster'), {
appList: appTitles.join(', '),
});
this.successApplicationContainer.classList.remove('hidden');
} else {
this.successApplicationContainer.classList.add('hidden');
}
}
updateContainer(prevStatus, status, error) {
this.hideAll();
// We poll all the time but only want the `created` banner to show when newly created
if (this.store.state.status !== 'created' || prevStatus !== this.store.state.status) {
switch (status) {
case 'created':
this.successContainer.classList.remove('hidden');
break;
case 'errored':
this.errorContainer.classList.remove('hidden');
this.errorReasonContainer.textContent = error;
break;
case 'scheduled':
case 'creating':
this.creatingContainer.classList.remove('hidden');
break;
default:
this.hideAll();
}
}
}
installApplication(appId) {
this.store.updateAppProperty(appId, 'requestStatus', REQUEST_LOADING);
this.store.updateAppProperty(appId, 'requestReason', null);
this.service.installApplication(appId)
.then(() => {
this.store.updateAppProperty(appId, 'requestStatus', REQUEST_SUCCESS);
})
.catch(() => {
this.store.updateAppProperty(appId, 'requestStatus', REQUEST_FAILURE);
this.store.updateAppProperty(appId, 'requestReason', s__('ClusterIntegration|Request to begin installing failed'));
});
}
destroy() {
this.destroyed = true;
this.removeListeners();
if (this.poll) {
this.poll.stop();
}
this.applications.$destroy();
}
}
app/assets/javascripts/clusters/components/application_row.vue 0 → 100644
<script>
import { s__, sprintf } from '../../locale';
import eventHub from '../event_hub';
import loadingButton from '../../vue_shared/components/loading_button.vue';
import {
APPLICATION_NOT_INSTALLABLE,
APPLICATION_SCHEDULED,
APPLICATION_INSTALLABLE,
APPLICATION_INSTALLING,
APPLICATION_INSTALLED,
APPLICATION_ERROR,
REQUEST_LOADING,
REQUEST_SUCCESS,
REQUEST_FAILURE,
} from '../constants';
export default {
props: {
id: {
type: String,
required: true,
},
title: {
type: String,
required: true,
},
titleLink: {
type: String,
required: false,
},
description: {
type: String,
required: true,
},
status: {
type: String,
required: false,
},
statusReason: {
type: String,
required: false,
},
requestStatus: {
type: String,
required: false,
},
requestReason: {
type: String,
required: false,
},
},
components: {
loadingButton,
},
computed: {
rowJsClass() {
return `js-cluster-application-row-${this.id}`;
},
installButtonLoading() {
return !this.status ||
this.status === APPLICATION_SCHEDULED ||
this.status === APPLICATION_INSTALLING ||
this.requestStatus === REQUEST_LOADING;
},
installButtonDisabled() {
// Avoid the potential for the real-time data to say APPLICATION_INSTALLABLE but
// we already made a request to install and are just waiting for the real-time
// to sync up.
return this.status !== APPLICATION_INSTALLABLE ||
this.requestStatus === REQUEST_LOADING ||
this.requestStatus === REQUEST_SUCCESS;
},
installButtonLabel() {
let label;
if (
this.status === APPLICATION_NOT_INSTALLABLE ||
this.status === APPLICATION_INSTALLABLE ||
this.status === APPLICATION_ERROR
) {
label = s__('ClusterIntegration|Install');
} else if (this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING) {
label = s__('ClusterIntegration|Installing');
} else if (this.status === APPLICATION_INSTALLED) {
label = s__('ClusterIntegration|Installed');
}
return label;
},
hasError() {
return this.status === APPLICATION_ERROR || this.requestStatus === REQUEST_FAILURE;
},
generalErrorDescription() {
return sprintf(
s__('ClusterIntegration|Something went wrong while installing %{title}'), {
title: this.title,
},
);
}
},
methods: {
installClicked() {
eventHub.$emit('installApplication', this.id);
},
},
};
</script>
<template>
<div
class="gl-responsive-table-row gl-responsive-table-row-col-span"
:class="rowJsClass"
>
<div
class="gl-responsive-table-row-layout"
role="row"
>
<a
v-if="titleLink"
:href="titleLink"
target="blank"
rel="noopener noreferrer"
role="gridcell"
class="table-section section-15 section-align-top js-cluster-application-title"
>
{{ title }}
</a>
<span
v-else
class="table-section section-15 section-align-top js-cluster-application-title"
>
{{ title }}
</span>
<div
class="table-section section-wrap"
role="gridcell"
>
<div v-html="description"></div>
</div>
<div
class="table-section table-button-footer section-15 section-align-top"
role="gridcell"
>
<div class="btn-group table-action-buttons">
<loading-button
class="js-cluster-application-install-button"
:loading="installButtonLoading"
:disabled="installButtonDisabled"
:label="installButtonLabel"
@click="installClicked"
/>
</div>
</div>
</div>
<div
v-if="hasError"
class="gl-responsive-table-row-layout"
role="row"
>
<div
class="alert alert-danger alert-block append-bottom-0 table-section section-100"
role="gridcell"
>
<div>
<p class="js-cluster-application-general-error-message">
{{ generalErrorDescription }}
</p>
<ul v-if="statusReason || requestReason">
<li
v-if="statusReason"
class="js-cluster-application-status-error-message"
>
{{ statusReason }}
</li>
<li
v-if="requestReason"
class="js-cluster-application-request-error-message"
>
{{ requestReason }}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
app/assets/javascripts/clusters/components/applications.vue 0 → 100644
<script>
import _ from 'underscore';
import { s__, sprintf } from '../../locale';
import applicationRow from './application_row.vue';
export default {
props: {
applications: {
type: Object,
required: false,
default: () => ({}),
},
helpPath: {
type: String,
required: false,
},
},
components: {
applicationRow,
},
computed: {
generalApplicationDescription() {
return sprintf(
_.escape(s__('ClusterIntegration|Install applications on your cluster. Read more about %{helpLink}')), {
helpLink: `<a href="${this.helpPath}">
${_.escape(s__('ClusterIntegration|installing applications'))}
</a>`,
},
false,
);
},
helmTillerDescription() {
return _.escape(s__(
`ClusterIntegration|Helm streamlines installing and managing Kubernets applications.
Tiller runs inside of your Kubernetes Cluster, and manages
releases of your charts.`,
));
},
ingressDescription() {
const descriptionParagraph = _.escape(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.`,
));
const extraCostParagraph = sprintf(
_.escape(s__('ClusterIntegration|%{boldNotice} This will add some extra resources like a load balancer, which incur additional costs. See %{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|GKE pricing'))}
</a>`,
},
false,
);
return `
<p>
${descriptionParagraph}
</p>
<p class="append-bottom-0">
${extraCostParagraph}
</p>
`;
},
gitlabRunnerDescription() {
return _.escape(s__(
`ClusterIntegration|GitLab Runner is the open source project that is used to run your jobs
and send the results back to GitLab.`,
));
},
},
};
</script>
<template>
<section 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/"
:description="helmTillerDescription"
:status="applications.helm.status"
:status-reason="applications.helm.statusReason"
:request-status="applications.helm.requestStatus"
:request-reason="applications.helm.requestReason"
/>
<!-- NOTE: Don't forget to update `clusters.scss` min-height for this block and uncomment `application_spec` tests -->
<!-- Add Ingress row, all other plumbing is complete -->
<!-- Add GitLab Runner row, all other plumbing is complete -->
</div>
</div>
</section>
</template>
app/assets/javascripts/clusters/constants.js 0 → 100644
// These need to match what is returned from the server
export const APPLICATION_NOT_INSTALLABLE = 'not_installable';
export const APPLICATION_INSTALLABLE = 'installable';
export const APPLICATION_SCHEDULED = 'scheduled';
export const APPLICATION_INSTALLING = 'installing';
export const APPLICATION_INSTALLED = 'installed';
export const APPLICATION_ERROR = 'errored';
// These are only used client-side
export const REQUEST_LOADING = 'request-loading';
export const REQUEST_SUCCESS = 'request-success';
export const REQUEST_FAILURE = 'request-failure';
app/assets/javascripts/clusters/event_hub.js 0 → 100644
import Vue from 'vue';
export default new Vue();
app/assets/javascripts/clusters/services/clusters_service.js 0 → 100644
import axios from 'axios';
import setAxiosCsrfToken from '../../lib/utils/axios_utils';
export default class ClusterService {
constructor(options = {}) {
setAxiosCsrfToken();
this.options = options;
this.appInstallEndpointMap = {
helm: this.options.installHelmEndpoint,
ingress: this.options.installIngressEndpoint,
runner: this.options.installRunnerEndpoint,
};
}
fetchData() {
return axios.get(this.options.endpoint);
}
installApplication(appId) {
const endpoint = this.appInstallEndpointMap[appId];
return axios.post(endpoint);
}
}
app/assets/javascripts/clusters/stores/clusters_store.js 0 → 100644
import { s__ } from '../../locale';
export default class ClusterStore {
constructor() {
this.state = {
helpPath: null,
status: null,
statusReason: null,
applications: {
helm: {
title: s__('ClusterIntegration|Helm Tiller'),
status: null,
statusReason: null,
requestStatus: null,
requestReason: null,
},
ingress: {
title: s__('ClusterIntegration|Ingress'),
status: null,
statusReason: null,
requestStatus: null,
requestReason: null,
},
runner: {
title: s__('ClusterIntegration|GitLab Runner'),
status: null,
statusReason: null,
requestStatus: null,
requestReason: null,
},
},
};
}
setHelpPath(helpPath) {
this.state.helpPath = helpPath;
}
updateStatus(status) {
this.state.status = status;
}
updateStatusReason(reason) {
this.state.statusReason = reason;
}
updateAppProperty(appId, prop, value) {
this.state.applications[appId][prop] = value;
}
updateStateFromServer(serverState = {}) {
this.state.status = serverState.status;
this.state.statusReason = serverState.status_reason;
serverState.applications.forEach((serverAppEntry) => {
const {
name: appId,
status,
status_reason: statusReason,
} = serverAppEntry;
this.state.applications[appId] = {
...(this.state.applications[appId] || {}),
status,
statusReason,
};
});
}
}
app/assets/javascripts/dispatcher.js
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
import { s__ } from './locale';
/* global ProjectSelect */
import IssuableIndex from './issuable_index';
/* global Milestone */
......@@ -32,6 +33,7 @@ import Labels from './labels';
import LabelManager from './label_manager';
/* global Sidebar */
import Flash from './flash';
import CommitsList from './commits';
import Issue from './issue';
import BindInOut from './behaviors/bind_in_out';
......@@ -543,9 +545,12 @@ import Diff from './diff';
new DueDateSelectors();
break;
case 'projects:clusters:show':
import(/* webpackChunkName: "clusters" */ './clusters')
import(/* webpackChunkName: "clusters" */ './clusters/clusters_bundle')
.then(cluster => new cluster.default()) // eslint-disable-line new-cap
.catch(() => {});
.catch((err) => {
Flash(s__('ClusterIntegration|Problem setting up the cluster JavaScript'));
throw err;
});
break;
}
switch (path[0]) {
......
app/assets/javascripts/vue_shared/components/loading_button.vue
......@@ -26,6 +26,11 @@ export default {
required: false,
default: false,
},
disabled: {
type: Boolean,
required: false,
default: false,
},
label: {
type: String,
required: false,
......@@ -47,7 +52,7 @@ export default {
class="btn btn-align-content"
@click="onClick"
type="button"
:disabled="loading"
:disabled="loading || disabled"
>
<transition name="fade">
<loading-icon
......
app/assets/stylesheets/framework/buttons.scss
......@@ -294,6 +294,7 @@
.btn-align-content {
display: flex;
justify-content: center;
align-items: center;
}
......
app/assets/stylesheets/pages/clusters.scss
......@@ -3,3 +3,8 @@
background-color: $white-light;
}
}
.cluster-applications-table {
// Wait for the Vue to kick-in and render the applications block
min-height: 179px;
}
app/models/clusters/applications/helm.rb
......@@ -11,10 +11,16 @@ module Clusters
validates :cluster, presence: true
after_initialize :set_initial_status
def self.application_name
self.to_s.demodulize.underscore
end
def set_initial_status
self.status = 0 unless cluster&.platform_kubernetes_active?
end
def name
self.class.application_name
end
......
app/models/clusters/cluster.rb
......@@ -37,6 +37,9 @@ module Clusters
delegate :on_creation?, to: :provider, allow_nil: true
delegate :update_kubernetes_integration!, to: :platform, allow_nil: true
delegate :active?, to: :platform_kubernetes, prefix: true, allow_nil: true
delegate :installed?, to: :application_helm, prefix: true, allow_nil: true
enum platform_type: {
kubernetes: 1
}
......
app/models/clusters/concerns/application_status.rb
......@@ -5,6 +5,7 @@ module Clusters
included do
state_machine :status, initial: :installable do
state :not_installable, value: -2
state :errored, value: -1
state :installable, value: 0
state :scheduled, value: 1
......
app/models/clusters/platforms/kubernetes.rb
......@@ -74,6 +74,10 @@ module Clusters
)
end
def active?
manages_kubernetes_service?
end
private
def enforce_namespace_to_lower_case
......
app/views/projects/clusters/show.html.haml
......@@ -4,11 +4,16 @@
- expanded = Rails.env.test?
- status_path = status_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster.id, format: :json) if can?(current_user, :admin_cluster, @cluster) && @cluster.on_creation?
- status_path = status_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster.id, format: :json) if can?(current_user, :admin_cluster, @cluster)
.edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path,
install_helm_path: install_applications_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster, :helm),
toggle_status: @cluster.enabled? ? 'true': 'false',
cluster_status: @cluster.status_name,
cluster_status_reason: @cluster.status_reason } }
cluster_status_reason: @cluster.status_reason,
help_path: help_page_path('user/project/clusters/index.md', anchor: 'installing-applications') } }
.hidden.js-cluster-application-notice.alert.alert-info.alert-block.append-bottom-10{ role: 'alert' }
%section.settings.no-animate.expanded
%h4= s_('ClusterIntegration|Enable cluster integration')
......@@ -49,7 +54,9 @@
.form-group
= field.submit _('Save'), class: 'btn btn-success'
%section.settings.no-animate#js-cluster-details{ class: ('expanded' if expanded) }
.cluster-applications-table#js-cluster-applications
%section.settings#js-cluster-details
.settings-header
%h4= s_('ClusterIntegration|Cluster details')
%button.btn.js-settings-toggle
......@@ -59,7 +66,7 @@
.settings-content
.form_group.append-bottom-20
%label.append-bottom-10{ for: 'cluter-name' }
%label.append-bottom-10{ for: 'cluster-name' }
= s_('ClusterIntegration|Cluster name')
.input-group
%input.form-control.cluster-name{ value: @cluster.name, disabled: true }
......
changelogs/unreleased/36629-35958-add-cluster-application-section.yml 0 → 100644
---
title: Add applications section to GKE clusters page to easily install Helm Tiller,
Ingress
merge_request:
author:
type: added
doc/user/project/clusters/index.md
......@@ -88,3 +88,12 @@ To remove the Cluster integration from your project, simply click on the
and [add a cluster](#adding-a-cluster) again.
[permissions]: ../../permissions.md
## Installing applications
GitLab provides a one-click install for
[Helm Tiller](https://docs.helm.sh/) and
[Ingress](https://kubernetes.io/docs/concepts/services-networking/ingress/)
which will be added directly to your configured cluster.
![Cluster application settings](img/cluster-applications.png)
spec/javascripts/clusters/components/application_row_spec.js 0 → 100644
import Vue from 'vue';
import eventHub from '~/clusters/event_hub';
import {
APPLICATION_NOT_INSTALLABLE,
APPLICATION_SCHEDULED,
APPLICATION_INSTALLABLE,
APPLICATION_INSTALLING,
APPLICATION_INSTALLED,
APPLICATION_ERROR,
REQUEST_LOADING,
REQUEST_SUCCESS,
REQUEST_FAILURE,
} from '~/clusters/constants';
import applicationRow from '~/clusters/components/application_row.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
describe('Application Row', () => {
let vm;
let ApplicationRow;
beforeEach(() => {
ApplicationRow = Vue.extend(applicationRow);
});
afterEach(() => {
vm.$destroy();
});
describe('Title', () => {
it('shows title', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
titleLink: null,
});
const title = vm.$el.querySelector('.js-cluster-application-title');
expect(title.tagName).toEqual('SPAN');
expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title);
});
it('shows title link', () => {
expect(DEFAULT_APPLICATION_STATE.titleLink).toBeDefined();
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
});
const title = vm.$el.querySelector('.js-cluster-application-title');
expect(title.tagName).toEqual('A');
expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title);
});
});
describe('Install button', () => {
it('has indeterminate state on page load', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: null,
});
expect(vm.installButtonLabel).toBeUndefined();
});
it('has disabled "Install" when APPLICATION_NOT_INSTALLABLE', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_NOT_INSTALLABLE,
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
});
it('has enabled "Install" when APPLICATION_INSTALLABLE', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLABLE,
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
});
it('has loading "Installing" when APPLICATION_SCHEDULED', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_SCHEDULED,
});
expect(vm.installButtonLabel).toEqual('Installing');
expect(vm.installButtonLoading).toEqual(true);
expect(vm.installButtonDisabled).toEqual(true);
});
it('has loading "Installing" when APPLICATION_INSTALLING', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLING,
});
expect(vm.installButtonLabel).toEqual('Installing');
expect(vm.installButtonLoading).toEqual(true);
expect(vm.installButtonDisabled).toEqual(true);
});
it('has disabled "Installed" when APPLICATION_INSTALLED', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLED,
});
expect(vm.installButtonLabel).toEqual('Installed');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
});
it('has disabled "Install" when APPLICATION_ERROR', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_ERROR,
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
});
it('has loading "Install" when REQUEST_LOADING', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLABLE,
requestStatus: REQUEST_LOADING,
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(true);
expect(vm.installButtonDisabled).toEqual(true);
});
it('has disabled "Install" when REQUEST_SUCCESS', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLABLE,
requestStatus: REQUEST_SUCCESS,
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(true);
});
it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLABLE,
requestStatus: REQUEST_FAILURE,
});
expect(vm.installButtonLabel).toEqual('Install');
expect(vm.installButtonLoading).toEqual(false);
expect(vm.installButtonDisabled).toEqual(false);
});
it('clicking install button emits event', () => {
spyOn(eventHub, '$emit');
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLABLE,
});
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
installButton.click();
expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', DEFAULT_APPLICATION_STATE.id);
});
it('clicking disabled install button emits nothing', () => {
spyOn(eventHub, '$emit');
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLING,
});
const installButton = vm.$el.querySelector('.js-cluster-application-install-button');
expect(vm.installButtonDisabled).toEqual(true);
installButton.click();
expect(eventHub.$emit).not.toHaveBeenCalled();
});
});
describe('Error block', () => {
it('does not show error block when there is no error', () => {
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: null,
requestStatus: null,
});
const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
expect(generalErrorMessage).toBeNull();
});
it('shows status reason when APPLICATION_ERROR', () => {
const statusReason = 'We broke it 0.0';
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_ERROR,
statusReason,
});
const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
const statusErrorMessage = vm.$el.querySelector('.js-cluster-application-status-error-message');
expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
expect(statusErrorMessage.textContent.trim()).toEqual(statusReason);
});
it('shows request reason when REQUEST_FAILURE', () => {
const requestReason = 'We broke thre request 0.0';
vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE,
status: APPLICATION_INSTALLABLE,
requestStatus: REQUEST_FAILURE,
requestReason,
});
const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
const requestErrorMessage = vm.$el.querySelector('.js-cluster-application-request-error-message');
expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
expect(requestErrorMessage.textContent.trim()).toEqual(requestReason);
});
});
});
spec/javascripts/clusters/components/applications_spec.js 0 → 100644
import Vue from 'vue';
import applications from '~/clusters/components/applications.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('Applications', () => {
let vm;
let Applications;
beforeEach(() => {
Applications = Vue.extend(applications);
});
afterEach(() => {
vm.$destroy();
});
describe('', () => {
beforeEach(() => {
vm = mountComponent(Applications, {
applications: {
helm: { title: 'Helm Tiller' },
ingress: { title: 'Ingress' },
runner: { title: 'GitLab Runner' },
},
});
});
it('renders a row for Helm Tiller', () => {
expect(vm.$el.querySelector('.js-cluster-application-row-helm')).toBeDefined();
});
/* * /
it('renders a row for Ingress', () => {
expect(vm.$el.querySelector('.js-cluster-application-row-ingress')).toBeDefined();
});
it('renders a row for GitLab Runner', () => {
expect(vm.$el.querySelector('.js-cluster-application-row-runner')).toBeDefined();
});
/* */
});
});
spec/javascripts/clusters/services/mock_data.js 0 → 100644
import {
APPLICATION_INSTALLABLE,
APPLICATION_INSTALLING,
APPLICATION_ERROR,
} from '~/clusters/constants';
const CLUSTERS_MOCK_DATA = {
GET: {
'/gitlab-org/gitlab-shell/clusters/1/status.json': {
data: {
status: 'errored',
status_reason: 'Failed to request to CloudPlatform.',
applications: [{
name: 'helm',
status: APPLICATION_INSTALLABLE,
status_reason: null,
}, {
name: 'ingress',
status: APPLICATION_ERROR,
status_reason: 'Cannot connect',
}, {
name: 'runner',
status: APPLICATION_INSTALLING,
status_reason: null,
}],
},
},
},
POST: {
'/gitlab-org/gitlab-shell/clusters/1/applications/helm': { },
'/gitlab-org/gitlab-shell/clusters/1/applications/ingress': { },
'/gitlab-org/gitlab-shell/clusters/1/applications/runner': { },
},
};
const DEFAULT_APPLICATION_STATE = {
id: 'some-app',
title: 'My App',
titleLink: 'https://about.gitlab.com/',
description: 'Some description about this interesting application!',
status: null,
statusReason: null,
requestStatus: null,
requestReason: null,
};
export {
CLUSTERS_MOCK_DATA,
DEFAULT_APPLICATION_STATE,
};
spec/javascripts/clusters/stores/clusters_store_spec.js 0 → 100644
import ClustersStore from '~/clusters/stores/clusters_store';
import { APPLICATION_INSTALLING } from '~/clusters/constants';
import { CLUSTERS_MOCK_DATA } from '../services/mock_data';
describe('Clusters Store', () => {
let store;
beforeEach(() => {
store = new ClustersStore();
});
describe('updateStatus', () => {
it('should store new status', () => {
expect(store.state.status).toEqual(null);
const newStatus = 'errored';
store.updateStatus(newStatus);
expect(store.state.status).toEqual(newStatus);
});
});
describe('updateStatusReason', () => {
it('should store new reason', () => {
expect(store.state.statusReason).toEqual(null);
const newReason = 'Something went wrong!';
store.updateStatusReason(newReason);
expect(store.state.statusReason).toEqual(newReason);
});
});
describe('updateAppProperty', () => {
it('should store new request status', () => {
expect(store.state.applications.helm.requestStatus).toEqual(null);
const newStatus = APPLICATION_INSTALLING;
store.updateAppProperty('helm', 'requestStatus', newStatus);
expect(store.state.applications.helm.requestStatus).toEqual(newStatus);
});
it('should store new request reason', () => {
expect(store.state.applications.helm.requestReason).toEqual(null);
const newReason = 'We broke it.';
store.updateAppProperty('helm', 'requestReason', newReason);
expect(store.state.applications.helm.requestReason).toEqual(newReason);
});
});
describe('updateStateFromServer', () => {
it('should store new polling data from server', () => {
const mockResponseData = CLUSTERS_MOCK_DATA.GET['/gitlab-org/gitlab-shell/clusters/1/status.json'].data;
store.updateStateFromServer(mockResponseData);
expect(store.state).toEqual({
helpPath: null,
status: mockResponseData.status,
statusReason: mockResponseData.status_reason,
applications: {
helm: {
title: 'Helm Tiller',
status: mockResponseData.applications[0].status,
statusReason: mockResponseData.applications[0].status_reason,
requestStatus: null,
requestReason: null,
},
ingress: {
title: 'Ingress',
status: mockResponseData.applications[1].status,
statusReason: mockResponseData.applications[1].status_reason,
requestStatus: null,
requestReason: null,
},
runner: {
title: 'GitLab Runner',
status: mockResponseData.applications[2].status,
statusReason: mockResponseData.applications[2].status_reason,
requestStatus: null,
requestReason: null,
},
},
});
});
});
});
spec/javascripts/clusters_spec.js deleted 100644 → 0
import Clusters from '~/clusters';
describe('Clusters', () => {
let cluster;
preloadFixtures('clusters/show_cluster.html.raw');
beforeEach(() => {
loadFixtures('clusters/show_cluster.html.raw');
cluster = new Clusters();
});
describe('toggle', () => {
it('should update the button and the input field on click', () => {
cluster.toggleButton.click();
expect(
cluster.toggleButton.classList,
).not.toContain('checked');
expect(
cluster.toggleInput.getAttribute('value'),
).toEqual('false');
});
});
describe('updateContainer', () => {
describe('when creating cluster', () => {
it('should show the creating container', () => {
cluster.updateContainer('creating');
expect(
cluster.creatingContainer.classList.contains('hidden'),
).toBeFalsy();
expect(
cluster.successContainer.classList.contains('hidden'),
).toBeTruthy();
expect(
cluster.errorContainer.classList.contains('hidden'),
).toBeTruthy();
});
});
describe('when cluster is created', () => {
it('should show the success container', () => {
cluster.updateContainer('created');
expect(
cluster.creatingContainer.classList.contains('hidden'),
).toBeTruthy();
expect(
cluster.successContainer.classList.contains('hidden'),
).toBeFalsy();
expect(
cluster.errorContainer.classList.contains('hidden'),
).toBeTruthy();
});
});
describe('when cluster has error', () => {
it('should show the error container', () => {
cluster.updateContainer('errored', 'this is an error');
expect(
cluster.creatingContainer.classList.contains('hidden'),
).toBeTruthy();
expect(
cluster.successContainer.classList.contains('hidden'),
).toBeTruthy();
expect(
cluster.errorContainer.classList.contains('hidden'),
).toBeFalsy();
expect(
cluster.errorReasonContainer.textContent,
).toContain('this is an error');
});
});
});
});
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