Merge branch '38464-k8s-apps' of https://gitlab.com/gitlab-org/gitlab-ce into 38464-k8s-apps

2017-11-07 17:49:58 +09:00 · 2017-11-07 17:49:58 +09:00 · 8638cf66d9
commit 8638cf66d9
parent 09aec97d14 86d8531748
46 changed files with 1696 additions and 297 deletions
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@ -1,123 +0,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();
-    }
-  }
-}
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@ -0,0 +1,223 @@
+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();
+  }
+}
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@ -0,0 +1,185 @@
+<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>
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@ -0,0 +1,105 @@
+<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>
--- a/app/assets/javascripts/clusters/constants.js
+++ b/app/assets/javascripts/clusters/constants.js
@ -0,0 +1,12 @@
+// 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';
--- a/app/assets/javascripts/clusters/event_hub.js
+++ b/app/assets/javascripts/clusters/event_hub.js
@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
--- a/app/assets/javascripts/clusters/services/clusters_service.js
+++ b/app/assets/javascripts/clusters/services/clusters_service.js
@ -0,0 +1,24 @@
+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);
+  }
+}
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@ -0,0 +1,68 @@
+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,
+      };
+    });
+  }
+}
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@ -1,4 +1,5 @@
 /* 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]) {
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/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
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@ -294,6 +294,7 @@

 .btn-align-content {
  display: flex;
+  justify-content: center;
  align-items: center;
 }

--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/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;
+}
--- a/app/controllers/projects/clusters/applications_controller.rb
+++ b/app/controllers/projects/clusters/applications_controller.rb
@ -5,14 +5,12 @@ class Projects::Clusters::ApplicationsController < Projects::ApplicationControll
  before_action :authorize_create_cluster!, only: [:create]

  def create
-    scheduled = Clusters::Applications::ScheduleInstallationService.new(project, current_user,
-                                                                        application_class: @application_class,
-                                                                        cluster: @cluster).execute
-    if scheduled
-      head :no_content
-    else
-      head :bad_request
-    end
+    Clusters::Applications::ScheduleInstallationService.new(project, current_user,
+                                                            application_class: @application_class,
+                                                            cluster: @cluster).execute
+    head :no_content
+  rescue StandardError
+    head :bad_request
  end

  private
--- a/app/models/clusters/applications/helm.rb
+++ b/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
--- a/app/models/clusters/cluster.rb
+++ b/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
    }
--- a/app/models/clusters/concerns/application_status.rb
+++ b/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
@ -24,7 +25,7 @@ module Clusters
          end

          event :make_scheduled do
-            transition any - [:scheduled] => :scheduled
+            transition %i(installable errored) => :scheduled
          end

          before_transition any => [:scheduled] do |app_status, _|
--- a/app/models/clusters/platforms/kubernetes.rb
+++ b/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
--- a/app/serializers/cluster_application_entity.rb
+++ b/app/serializers/cluster_application_entity.rb
@ -1,4 +1,4 @@
-class ClusterAppEntity < Grape::Entity
+class ClusterApplicationEntity < Grape::Entity
  expose :name
  expose :status_name, as: :status
  expose :status_reason
--- a/app/serializers/cluster_entity.rb
+++ b/app/serializers/cluster_entity.rb
@ -3,5 +3,5 @@ class ClusterEntity < Grape::Entity

  expose :status_name, as: :status
  expose :status_reason
-  expose :applications, using: ClusterAppEntity
+  expose :applications, using: ClusterApplicationEntity
 end
--- a/app/services/clusters/applications/check_installation_progress_service.rb
+++ b/app/services/clusters/applications/check_installation_progress_service.rb
@ -6,7 +6,7 @@ module Clusters

        case installation_phase
        when Gitlab::Kubernetes::Pod::SUCCEEDED
-          on_succeeded
+          on_success
        when Gitlab::Kubernetes::Pod::FAILED
          on_failed
        else
@ -18,30 +18,39 @@ module Clusters

      private

-      def on_succeeded
-        if app.make_installed
-          finalize_installation
-        else
-          app.make_errored!("Failed to update app record; #{app.errors}")
-        end
+      def on_success
+        app.make_installed!
+      ensure
+        remove_installation_pod
      end

      def on_failed
-        app.make_errored!(log || 'Installation silently failed')
-        finalize_installation
+        app.make_errored!(installation_errors || 'Installation silently failed')
+      ensure
+        remove_installation_pod
      end

      def check_timeout
-        if Time.now.utc - app.updated_at.to_time.utc > ClusterWaitForAppInstallationWorker::TIMEOUT
-          app.make_errored!('App installation timeouted')
+        if timeouted?
+          begin
+            app.make_errored!('Installation timeouted')
+          ensure
+            remove_installation_pod
+          end
        else
          ClusterWaitForAppInstallationWorker.perform_in(
            ClusterWaitForAppInstallationWorker::INTERVAL, app.name, app.id)
        end
      end

-      def finalize_installation
-        FinalizeInstallationService.new(app).execute
+      def timeouted?
+        Time.now.utc - app.updated_at.to_time.utc > ClusterWaitForAppInstallationWorker::TIMEOUT
+      end
+
+      def remove_installation_pod
+        helm_api.delete_installation_pod!(app)
+      rescue
+        # no-op
      end

      def installation_phase
--- a/app/services/clusters/applications/finalize_installation_service.rb
+++ b/app/services/clusters/applications/finalize_installation_service.rb
@ -1,17 +0,0 @@
-module Clusters
-  module Applications
-    class FinalizeInstallationService < BaseHelmService
-      def execute
-        helm_api.delete_installation_pod!(app)
-
-        app.make_errored!('Installation aborted') if aborted?
-      end
-
-      private
-
-      def aborted?
-        app.installing? || app.scheduled?
-      end
-    end
-  end
-end
--- a/app/services/clusters/applications/install_service.rb
+++ b/app/services/clusters/applications/install_service.rb
@ -5,14 +5,11 @@ module Clusters
        return unless app.scheduled?

        begin
+          app.make_installing!
          helm_api.install(app)

-          if app.make_installing
-            ClusterWaitForAppInstallationWorker.perform_in(
-              ClusterWaitForAppInstallationWorker::INTERVAL, app.name, app.id)
-          else
-            app.make_errored!("Failed to update app record; #{app.errors}")
-          end
+          ClusterWaitForAppInstallationWorker.perform_in(
+            ClusterWaitForAppInstallationWorker::INTERVAL, app.name, app.id)
        rescue KubeException => ke
          app.make_errored!("Kubernetes error: #{ke.message}")
        rescue StandardError
--- a/app/services/clusters/applications/schedule_installation_service.rb
+++ b/app/services/clusters/applications/schedule_installation_service.rb
@ -2,15 +2,10 @@ module Clusters
  module Applications
    class ScheduleInstallationService < ::BaseService
      def execute
-        application = application_class.find_or_create_by!(cluster: cluster)
-
-        application.make_scheduled!
-        ClusterInstallAppWorker.perform_async(application.name, application.id)
-        true
-      rescue ActiveRecord::RecordInvalid
-        false
-      rescue StateMachines::InvalidTransition
-        false
+        application_class.find_or_create_by!(cluster: cluster).try do |application|
+          application.make_scheduled!
+          ClusterInstallAppWorker.perform_async(application.name, application.id)
+        end
      end

      private
--- a/app/views/projects/clusters/show.html.haml
+++ b/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 }
--- a/changelogs/unreleased/36629-35958-add-cluster-application-section.yml
+++ b/changelogs/unreleased/36629-35958-add-cluster-application-section.yml
@ -0,0 +1,6 @@
+---
+title: Add applications section to GKE clusters page to easily install Helm Tiller,
+  Ingress
+merge_request:
+author:
+type: added
--- a/db/schema.rb
+++ b/db/schema.rb
@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.

-ActiveRecord::Schema.define(version: 20171101134435) do
+ActiveRecord::Schema.define(version: 20171106101200) do

  # These are extensions that must be enabled in order to support this database
  enable_extension "plpgsql"
@ -474,8 +474,6 @@ ActiveRecord::Schema.define(version: 20171101134435) do
    t.string "encrypted_password_iv"
    t.text "encrypted_token"
    t.string "encrypted_token_iv"
-    t.datetime_with_timezone "created_at", null: false
-    t.datetime_with_timezone "updated_at", null: false
  end

  add_index "cluster_platforms_kubernetes", ["cluster_id"], name: "index_cluster_platforms_kubernetes_on_cluster_id", unique: true, using: :btree
@ -499,14 +497,11 @@ ActiveRecord::Schema.define(version: 20171101134435) do
    t.text "status_reason"
    t.string "gcp_project_id", null: false
    t.string "zone", null: false
-    t.integer "num_nodes", null: false
    t.string "machine_type"
    t.string "operation_id"
    t.string "endpoint"
    t.text "encrypted_access_token"
    t.string "encrypted_access_token_iv"
-    t.datetime_with_timezone "created_at", null: false
-    t.datetime_with_timezone "updated_at", null: false
  end

  add_index "cluster_providers_gcp", ["cluster_id"], name: "index_cluster_providers_gcp_on_cluster_id", unique: true, using: :btree
@ -519,12 +514,11 @@ ActiveRecord::Schema.define(version: 20171101134435) do
    t.datetime_with_timezone "updated_at", null: false
    t.boolean "enabled", default: true
    t.string "name", null: false
-    t.integer "provider_type"
-    t.integer "platform_type"
-    t.datetime_with_timezone "created_at", null: false
-    t.datetime_with_timezone "updated_at", null: false
  end

+  add_index "clusters", ["enabled"], name: "index_clusters_on_enabled", using: :btree
+  add_index "clusters", ["user_id"], name: "index_clusters_on_user_id", using: :btree
+
  create_table "clusters_applications_helm", force: :cascade do |t|
    t.integer "cluster_id", null: false
    t.datetime_with_timezone "created_at", null: false
--- a/doc/user/project/clusters/img/cluster-applications.png
+++ b/doc/user/project/clusters/img/cluster-applications.png
--- a/doc/user/project/clusters/index.md
+++ b/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)
--- a/lib/gitlab/import_export/import_export.yml
+++ b/lib/gitlab/import_export/import_export.yml
@ -54,7 +54,8 @@ project_tree:
  - :auto_devops
  - :triggers
  - :pipeline_schedules
-  - :cluster
+  - clusters:
+    - :application_helm
  - :services
  - :hooks
  - protected_branches:
--- a/lib/gitlab/import_export/relation_factory.rb
+++ b/lib/gitlab/import_export/relation_factory.rb
@ -8,8 +8,8 @@ module Gitlab
                    triggers: 'Ci::Trigger',
                    pipeline_schedules: 'Ci::PipelineSchedule',
                    builds: 'Ci::Build',
-                    cluster: 'Clusters::Cluster',
                    clusters: 'Clusters::Cluster',
+                    application_helm: 'Clusters::Applications::Helm',
                    hooks: 'ProjectHook',
                    merge_access_levels: 'ProtectedBranch::MergeAccessLevel',
                    push_access_levels: 'ProtectedBranch::PushAccessLevel',
--- a/spec/controllers/projects/clusters/applications_controller_spec.rb
+++ b/spec/controllers/projects/clusters/applications_controller_spec.rb
@ -49,6 +49,19 @@ describe Projects::Clusters::ApplicationsController do
          expect(response).to have_http_status(:not_found)
        end
      end
+
+      context 'when application is already installing' do
+        before do
+          other = current_application.new(cluster: cluster)
+          other.make_installing!
+        end
+
+        it 'returns 400' do
+          go
+
+          expect(response).to have_http_status(:bad_request)
+        end
+      end
    end

    describe 'security' do
--- a/spec/factories/clusters/applications/helm.rb
+++ b/spec/factories/clusters/applications/helm.rb
@ -31,5 +31,10 @@ FactoryGirl.define do
      status(-1)
      status_reason 'something went wrong'
    end
+
+    trait :timeouted do
+      installing
+      updated_at ClusterWaitForAppInstallationWorker::TIMEOUT.ago
+    end
  end
 end
--- a/spec/fixtures/api/schemas/cluster_status.json
+++ b/spec/fixtures/api/schemas/cluster_status.json
@ -1,42 +1,38 @@
 {
  "type": "object",
  "required" : [
-    "status"
+    "status",
+    "applications"
  ],
  "properties" : {
    "status": { "type": "string" },
    "status_reason": { "type": ["string", "null"] },
-    "applications": { "$ref": "#/definitions/applications" }
+    "applications": {
+      "type": "array",
+      "items": { "$ref": "#/definitions/application_status" }
+    }
  },
  "additionalProperties": false,
  "definitions": {
-    "applications": {
-      "type": "object",
-      "additionalProperties": false,
-      "properties" : {
-        "helm": { "$ref": "#/definitions/app_status" },
-        "runner": { "$ref": "#/definitions/app_status" },
-        "ingress": { "$ref": "#/definitions/app_status" },
-        "prometheus": { "$ref": "#/definitions/app_status" }
-      }
-    },
-    "app_status": {
+    "application_status": {
      "type": "object",
      "additionalProperties": false,
      "properties" : {
+        "name": { "type": "string" },
        "status": {
          "type": {
            "enum": [
              "installable",
+              "scheduled",
              "installing",
              "installed",
-              "error"
+              "errored"
            ]
          }
        },
        "status_reason": { "type": ["string", "null"] }
      },
-      "required" : [ "status" ]
+      "required" : [ "name", "status" ]
    }
  }
 }
--- a/spec/javascripts/clusters/clusters_bundle_spec.js
+++ b/spec/javascripts/clusters/clusters_bundle_spec.js
@ -0,0 +1,277 @@
+import Clusters from '~/clusters/clusters_bundle';
+import {
+  APPLICATION_INSTALLABLE,
+  APPLICATION_INSTALLING,
+  APPLICATION_INSTALLED,
+  REQUEST_LOADING,
+  REQUEST_SUCCESS,
+  REQUEST_FAILURE,
+} from '~/clusters/constants';
+import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper';
+
+describe('Clusters', () => {
+  let cluster;
+  preloadFixtures('clusters/show_cluster.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('clusters/show_cluster.html.raw');
+    cluster = new Clusters();
+  });
+
+  afterEach(() => {
+    cluster.destroy();
+  });
+
+  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('checkForNewInstalls', () => {
+    const INITIAL_APP_MAP = {
+      helm: { status: null, title: 'Helm Tiller' },
+      ingress: { status: null, title: 'Ingress' },
+      runner: { status: null, title: 'GitLab Runner' },
+    };
+
+    it('does not show alert when things transition from initial null state to something', () => {
+      cluster.checkForNewInstalls(INITIAL_APP_MAP, {
+        ...INITIAL_APP_MAP,
+        helm: { status: APPLICATION_INSTALLABLE, title: 'Helm Tiller' },
+      });
+
+      expect(document.querySelector('.js-cluster-application-notice.hidden')).toBeDefined();
+    });
+
+    it('shows an alert when something gets newly installed', () => {
+      cluster.checkForNewInstalls({
+        ...INITIAL_APP_MAP,
+        helm: { status: APPLICATION_INSTALLING, title: 'Helm Tiller' },
+      }, {
+        ...INITIAL_APP_MAP,
+        helm: { status: APPLICATION_INSTALLED, title: 'Helm Tiller' },
+      });
+
+      expect(document.querySelector('.js-cluster-application-notice:not(.hidden)')).toBeDefined();
+      expect(document.querySelector('.js-cluster-application-notice').textContent.trim()).toEqual('Helm Tiller was successfully installed on your cluster');
+    });
+
+    it('shows an alert when multiple things gets newly installed', () => {
+      cluster.checkForNewInstalls({
+        ...INITIAL_APP_MAP,
+        helm: { status: APPLICATION_INSTALLING, title: 'Helm Tiller' },
+        ingress: { status: APPLICATION_INSTALLABLE, title: 'Ingress' },
+      }, {
+        ...INITIAL_APP_MAP,
+        helm: { status: APPLICATION_INSTALLED, title: 'Helm Tiller' },
+        ingress: { status: APPLICATION_INSTALLED, title: 'Ingress' },
+      });
+
+      expect(document.querySelector('.js-cluster-application-notice:not(.hidden)')).toBeDefined();
+      expect(document.querySelector('.js-cluster-application-notice').textContent.trim()).toEqual('Helm Tiller, Ingress was successfully installed on your cluster');
+    });
+
+    it('hides existing alert when we call again and nothing is newly installed', () => {
+      const installedState = {
+        ...INITIAL_APP_MAP,
+        helm: { status: APPLICATION_INSTALLED, title: 'Helm Tiller' },
+      };
+
+      // Show the banner
+      cluster.checkForNewInstalls({
+        ...INITIAL_APP_MAP,
+        helm: { status: APPLICATION_INSTALLING, title: 'Helm Tiller' },
+      }, installedState);
+
+      expect(document.querySelector('.js-cluster-application-notice:not(.hidden)')).toBeDefined();
+
+      // Banner should go back hidden
+      cluster.checkForNewInstalls(installedState, installedState);
+
+      expect(document.querySelector('.js-cluster-application-notice.hidden')).toBeDefined();
+    });
+  });
+
+  describe('updateContainer', () => {
+    describe('when creating cluster', () => {
+      it('should show the creating container', () => {
+        cluster.updateContainer(null, 'creating');
+
+        expect(
+          cluster.creatingContainer.classList.contains('hidden'),
+        ).toBeFalsy();
+        expect(
+          cluster.successContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+        expect(
+          cluster.errorContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+      });
+
+      it('should continue to show `creating` banner with subsequent updates of the same status', () => {
+        cluster.updateContainer('creating', '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(null, 'created');
+
+        expect(
+          cluster.creatingContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+        expect(
+          cluster.successContainer.classList.contains('hidden'),
+        ).toBeFalsy();
+        expect(
+          cluster.errorContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+      });
+
+      it('should not show a banner when status is already `created`', () => {
+        cluster.updateContainer('created', 'created');
+
+        expect(
+          cluster.creatingContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+        expect(
+          cluster.successContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+        expect(
+          cluster.errorContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+      });
+    });
+
+    describe('when cluster has error', () => {
+      it('should show the error container', () => {
+        cluster.updateContainer(null, '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');
+      });
+
+      it('should show `error` banner when previously `creating`', () => {
+        cluster.updateContainer('creating', 'errored');
+
+        expect(
+          cluster.creatingContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+        expect(
+          cluster.successContainer.classList.contains('hidden'),
+        ).toBeTruthy();
+        expect(
+          cluster.errorContainer.classList.contains('hidden'),
+        ).toBeFalsy();
+      });
+    });
+  });
+
+  describe('installApplication', () => {
+    it('tries to install helm', (done) => {
+      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      expect(cluster.store.state.applications.helm.requestStatus).toEqual(null);
+
+      cluster.installApplication('helm');
+
+      expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_LOADING);
+      expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
+      expect(cluster.service.installApplication).toHaveBeenCalledWith('helm');
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_SUCCESS);
+          expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('tries to install ingress', (done) => {
+      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      expect(cluster.store.state.applications.ingress.requestStatus).toEqual(null);
+
+      cluster.installApplication('ingress');
+
+      expect(cluster.store.state.applications.ingress.requestStatus).toEqual(REQUEST_LOADING);
+      expect(cluster.store.state.applications.ingress.requestReason).toEqual(null);
+      expect(cluster.service.installApplication).toHaveBeenCalledWith('ingress');
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.ingress.requestStatus).toEqual(REQUEST_SUCCESS);
+          expect(cluster.store.state.applications.ingress.requestReason).toEqual(null);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('tries to install runner', (done) => {
+      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      expect(cluster.store.state.applications.runner.requestStatus).toEqual(null);
+
+      cluster.installApplication('runner');
+
+      expect(cluster.store.state.applications.runner.requestStatus).toEqual(REQUEST_LOADING);
+      expect(cluster.store.state.applications.runner.requestReason).toEqual(null);
+      expect(cluster.service.installApplication).toHaveBeenCalledWith('runner');
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.runner.requestStatus).toEqual(REQUEST_SUCCESS);
+          expect(cluster.store.state.applications.runner.requestReason).toEqual(null);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('sets error request status when the request fails', (done) => {
+      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.reject(new Error('STUBBED ERROR')));
+      expect(cluster.store.state.applications.helm.requestStatus).toEqual(null);
+
+      cluster.installApplication('helm');
+
+      expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_LOADING);
+      expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
+      expect(cluster.service.installApplication).toHaveBeenCalled();
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_FAILURE);
+          expect(cluster.store.state.applications.helm.requestReason).toBeDefined();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
--- a/spec/javascripts/clusters/components/application_row_spec.js
+++ b/spec/javascripts/clusters/components/application_row_spec.js
@ -0,0 +1,237 @@
+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);
+    });
+  });
+});
--- a/spec/javascripts/clusters/components/applications_spec.js
+++ b/spec/javascripts/clusters/components/applications_spec.js
@ -0,0 +1,42 @@
+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();
+    });
+    /* */
+  });
+});
--- a/spec/javascripts/clusters/services/mock_data.js
+++ b/spec/javascripts/clusters/services/mock_data.js
@ -0,0 +1,50 @@
+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,
+};
--- a/spec/javascripts/clusters/stores/clusters_store_spec.js
+++ b/spec/javascripts/clusters/stores/clusters_store_spec.js
@ -0,0 +1,89 @@
+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,
+          },
+        },
+      });
+    });
+  });
+});
--- a/spec/javascripts/clusters_spec.js
+++ b/spec/javascripts/clusters_spec.js
@ -1,79 +0,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');
-      });
-    });
-  });
-});
--- a/spec/lib/gitlab/import_export/all_models.yml
+++ b/spec/lib/gitlab/import_export/all_models.yml
@ -147,7 +147,8 @@ deploy_keys:
 - user
 - deploy_keys_projects
 - projects
-cluster:
+clusters:
+- application_helm
 - cluster_projects
 - projects
 - user
@ -160,6 +161,8 @@ provider_gcp:
 - cluster
 platform_kubernetes:
 - cluster
+application_helm:
+- cluster
 services:
 - project
 - service_hook
@ -191,6 +194,7 @@ project:
 - tags
 - chat_services
 - cluster
+- clusters
 - cluster_project
 - creator
 - group
@ -299,4 +303,4 @@ push_event_payload:
 - event
 issue_assignees:
 - issue
- assignee
+- assignee
--- a/spec/serializers/cluster_application_entity_spec.rb
+++ b/spec/serializers/cluster_application_entity_spec.rb
@ -0,0 +1,30 @@
+require 'spec_helper'
+
+describe ClusterApplicationEntity do
+  describe '#as_json' do
+    let(:application) { build(:applications_helm) }
+    subject { described_class.new(application).as_json }
+
+    it 'has name' do
+      expect(subject[:name]).to eq(application.name)
+    end
+
+    it 'has status' do
+      expect(subject[:status]).to eq(:installable)
+    end
+
+    it 'has no status_reason' do
+      expect(subject[:status_reason]).to be_nil
+    end
+
+    context 'when application is errored' do
+      let(:application) { build(:applications_helm, :errored) }
+
+      it 'has corresponded data' do
+        expect(subject[:status]).to eq(:errored)
+        expect(subject[:status_reason]).not_to be_nil
+        expect(subject[:status_reason]).to eq(application.status_reason)
+      end
+    end
+  end
+end
--- a/spec/serializers/cluster_entity_spec.rb
+++ b/spec/serializers/cluster_entity_spec.rb
@ -35,8 +35,17 @@ describe ClusterEntity do
      end
    end

-    it 'contains applications' do
-      expect(subject[:applications]).to eq({})
+    context 'when no application has been installed' do
+      let(:cluster) { create(:cluster) }
+      subject { described_class.new(cluster).as_json[:applications]}
+
+      it 'contains helm as installable' do
+        expect(subject).not_to be_empty
+
+        helm = subject[0]
+        expect(helm[:name]).to eq('helm')
+        expect(helm[:status]).to eq(:installable)
+      end
    end
  end
 end
--- a/spec/serializers/cluster_serializer_spec.rb
+++ b/spec/serializers/cluster_serializer_spec.rb
@ -9,7 +9,7 @@ describe ClusterSerializer do
      let(:provider) { create(:cluster_provider_gcp, :errored) }

      it 'serializes only status' do
-        expect(subject.keys).to contain_exactly(:status, :status_reason)
+        expect(subject.keys).to contain_exactly(:status, :status_reason, :applications)
      end
    end

--- a/spec/services/clusters/applications/check_installation_progress_service_spec.rb
+++ b/spec/services/clusters/applications/check_installation_progress_service_spec.rb
@ -0,0 +1,91 @@
+require 'spec_helper'
+
+describe Clusters::Applications::CheckInstallationProgressService do
+  RESCHEDULE_PHASES = Gitlab::Kubernetes::Pod::PHASES - [Gitlab::Kubernetes::Pod::SUCCEEDED, Gitlab::Kubernetes::Pod::FAILED].freeze
+
+  let(:application) { create(:applications_helm, :installing) }
+  let(:service) { described_class.new(application) }
+  let(:phase) { Gitlab::Kubernetes::Pod::UNKNOWN }
+  let(:errors) { nil }
+
+  shared_examples 'a terminated installation' do
+    it 'removes the installation POD' do
+      expect(service).to receive(:remove_installation_pod).once
+
+      service.execute
+    end
+  end
+
+  shared_examples 'a not yet terminated installation' do |a_phase|
+    let(:phase) { a_phase }
+
+    context "when phase is #{a_phase}" do
+      context 'when not timeouted' do
+        it 'reschedule a new check' do
+          expect(ClusterWaitForAppInstallationWorker).to receive(:perform_in).once
+          expect(service).not_to receive(:remove_installation_pod)
+
+          service.execute
+
+          expect(application).to be_installing
+          expect(application.status_reason).to be_nil
+        end
+      end
+
+      context 'when timeouted' do
+        let(:application) { create(:applications_helm, :timeouted) }
+
+        it_behaves_like 'a terminated installation'
+
+        it 'make the application errored' do
+          expect(ClusterWaitForAppInstallationWorker).not_to receive(:perform_in)
+
+          service.execute
+
+          expect(application).to be_errored
+          expect(application.status_reason).to match(/\btimeouted\b/)
+        end
+      end
+    end
+  end
+
+  before do
+    expect(service).to receive(:installation_phase).once.and_return(phase)
+
+    allow(service).to receive(:installation_errors).and_return(errors)
+    allow(service).to receive(:remove_installation_pod).and_return(nil)
+  end
+
+  describe '#execute' do
+    context 'when installation POD succeeded' do
+      let(:phase) { Gitlab::Kubernetes::Pod::SUCCEEDED }
+
+      it_behaves_like 'a terminated installation'
+
+      it 'make the application installed' do
+        expect(ClusterWaitForAppInstallationWorker).not_to receive(:perform_in)
+
+        service.execute
+
+        expect(application).to be_installed
+        expect(application.status_reason).to be_nil
+      end
+    end
+
+    context 'when installation POD failed' do
+      let(:phase) { Gitlab::Kubernetes::Pod::FAILED }
+      let(:errors) { 'test installation failed' }
+
+      it_behaves_like 'a terminated installation'
+
+      it 'make the application errored' do
+        service.execute
+
+        expect(application).to be_errored
+        expect(application.status_reason).to eq(errors)
+      end
+    end
+
+    RESCHEDULE_PHASES.each { |phase| it_behaves_like 'a not yet terminated installation', phase }
+  end
+end
--- a/spec/services/clusters/applications/install_service_spec.rb
+++ b/spec/services/clusters/applications/install_service_spec.rb
@ -0,0 +1,54 @@
+require 'spec_helper'
+
+describe Clusters::Applications::InstallService do
+  describe '#execute' do
+    let(:application) { create(:applications_helm, :scheduled) }
+    let(:service) { described_class.new(application) }
+
+    context 'when there are no errors' do
+      before do
+        expect_any_instance_of(Gitlab::Kubernetes::Helm).to receive(:install).with(application)
+        allow(ClusterWaitForAppInstallationWorker).to receive(:perform_in).and_return(nil)
+      end
+
+      it 'make the application installing' do
+        service.execute
+
+        expect(application).to be_installing
+      end
+
+      it 'schedule async installation status check' do
+        expect(ClusterWaitForAppInstallationWorker).to receive(:perform_in).once
+
+        service.execute
+      end
+    end
+
+    context 'when k8s cluster communication fails' do
+      before do
+        error = KubeException.new(500, 'system failure', nil)
+        expect_any_instance_of(Gitlab::Kubernetes::Helm).to receive(:install).with(application).and_raise(error)
+      end
+
+      it 'make the application errored' do
+        service.execute
+
+        expect(application).to be_errored
+        expect(application.status_reason).to match(/kubernetes error:/i)
+      end
+    end
+
+    context 'when application cannot be persisted' do
+      let(:application) { build(:applications_helm, :scheduled) }
+
+      it 'make the application errored' do
+        expect(application).to receive(:make_installing!).once.and_raise(ActiveRecord::RecordInvalid)
+        expect_any_instance_of(Gitlab::Kubernetes::Helm).not_to receive(:install)
+
+        service.execute
+
+        expect(application).to be_errored
+      end
+    end
+  end
+end
--- a/spec/services/clusters/applications/schedule_installation_service_spec.rb
+++ b/spec/services/clusters/applications/schedule_installation_service_spec.rb
@ -0,0 +1,55 @@
+require 'spec_helper'
+
+describe Clusters::Applications::ScheduleInstallationService do
+  def count_scheduled
+    application_class&.with_status(:scheduled)&.count || 0
+  end
+
+  shared_examples 'a failing service' do
+    it 'raise an exception' do
+      expect(ClusterInstallAppWorker).not_to receive(:perform_async)
+      count_before = count_scheduled
+
+      expect { service.execute }.to raise_error(StandardError)
+      expect(count_scheduled).to eq(count_before)
+    end
+  end
+
+  describe '#execute' do
+    let(:application_class) { Clusters::Applications::Helm }
+    let(:cluster) { create(:cluster, :project, :provided_by_gcp) }
+    let(:project) { cluster.project }
+    let(:service) { described_class.new(project, nil, cluster: cluster, application_class: application_class) }
+
+    it 'creates a new application' do
+      expect { service.execute }.to change { application_class.count }.by(1)
+    end
+
+    it 'make the application scheduled' do
+      expect(ClusterInstallAppWorker).to receive(:perform_async).with(application_class.application_name, kind_of(Numeric)).once
+
+      expect { service.execute }.to change { application_class.with_status(:scheduled).count }.by(1)
+    end
+
+    context 'when installation is already in progress' do
+      let(:application) { create(:applications_helm, :installing) }
+      let(:cluster) { application.cluster }
+
+      it_behaves_like 'a failing service'
+    end
+
+    context 'when application_class is nil' do
+      let(:application_class) { nil }
+
+      it_behaves_like 'a failing service'
+    end
+
+    context 'when application cannot be persisted' do
+      before do
+        expect_any_instance_of(application_class).to receive(:make_scheduled!).once.and_raise(ActiveRecord::RecordInvalid)
+      end
+
+      it_behaves_like 'a failing service'
+    end
+  end
+end