Commit 583cc364 authored by Mike Greiling's avatar Mike Greiling Committed by Clement Ho

Improve cluster apps installation flow

parent 187b8e74
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
/* eslint-disable vue/require-default-prop */ /* eslint-disable vue/require-default-prop */
import { s__, sprintf } from '../../locale'; import { s__, sprintf } from '../../locale';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import identicon from '../../vue_shared/components/identicon.vue';
import loadingButton from '../../vue_shared/components/loading_button.vue'; import loadingButton from '../../vue_shared/components/loading_button.vue';
import { import {
APPLICATION_STATUS, APPLICATION_STATUS,
...@@ -13,6 +14,7 @@ ...@@ -13,6 +14,7 @@
export default { export default {
components: { components: {
loadingButton, loadingButton,
identicon,
}, },
props: { props: {
id: { id: {
...@@ -31,6 +33,16 @@ ...@@ -31,6 +33,16 @@
type: String, type: String,
required: false, required: false,
}, },
logoUrl: {
type: String,
required: false,
default: null,
},
disabled: {
type: Boolean,
required: false,
default: false,
},
status: { status: {
type: String, type: String,
required: false, required: false,
...@@ -60,6 +72,18 @@ ...@@ -60,6 +72,18 @@
isKnownStatus() { isKnownStatus() {
return Object.values(APPLICATION_STATUS).includes(this.status); return Object.values(APPLICATION_STATUS).includes(this.status);
}, },
isInstalled() {
return (
this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED
);
},
hasLogo() {
return !!this.logoUrl;
},
identiconId() {
// generate a deterministic integer id for the identicon background
return this.id.charCodeAt(0);
},
rowJsClass() { rowJsClass() {
return `js-cluster-application-row-${this.id}`; return `js-cluster-application-row-${this.id}`;
}, },
...@@ -128,37 +152,81 @@ ...@@ -128,37 +152,81 @@
<template> <template>
<div <div
:class="rowJsClass" :class="[
class="gl-responsive-table-row gl-responsive-table-row-col-span" rowJsClass,
isInstalled && 'cluster-application-installed',
disabled && 'cluster-application-disabled'
]"
class="cluster-application-row gl-responsive-table-row gl-responsive-table-row-col-span"
> >
<div <div
class="gl-responsive-table-row-layout" class="gl-responsive-table-row-layout"
role="row" role="row"
> >
<a <div
v-if="titleLink" class="table-section append-right-8 section-align-top"
:href="titleLink"
target="blank"
rel="noopener noreferrer"
role="gridcell" role="gridcell"
class="table-section section-15 section-align-top js-cluster-application-title"
> >
{{ title }} <img
</a> v-if="hasLogo"
<span :src="logoUrl"
v-else :alt="`${title} logo`"
class="table-section section-15 section-align-top js-cluster-application-title" class="cluster-application-logo avatar s40"
> />
{{ title }} <identicon
</span> v-else
:entity-id="identiconId"
:entity-name="title"
size-class="s40"
/>
</div>
<div <div
class="table-section section-wrap" class="table-section cluster-application-description section-wrap"
role="gridcell" role="gridcell"
> >
<strong>
<a
v-if="titleLink"
:href="titleLink"
target="blank"
rel="noopener noreferrer"
class="js-cluster-application-title"
>
{{ title }}
</a>
<span
v-else
class="js-cluster-application-title"
>
{{ title }}
</span>
</strong>
<slot name="description"></slot> <slot name="description"></slot>
<div
v-if="hasError || isUnknownStatus"
class="cluster-application-error text-danger prepend-top-10"
>
<p class="js-cluster-application-general-error-message append-bottom-0">
{{ 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 <div
:class="{ 'section-20': showManageButton, 'section-15': !showManageButton }" :class="{ 'section-25': showManageButton, 'section-15': !showManageButton }"
class="table-section table-button-footer section-align-top" class="table-section table-button-footer section-align-top"
role="gridcell" role="gridcell"
> >
...@@ -168,6 +236,7 @@ ...@@ -168,6 +236,7 @@
> >
<a <a
:href="manageLink" :href="manageLink"
:class="{ disabled: disabled }"
class="btn" class="btn"
> >
{{ manageButtonLabel }} {{ manageButtonLabel }}
...@@ -176,7 +245,7 @@ ...@@ -176,7 +245,7 @@
<div class="btn-group table-action-buttons"> <div class="btn-group table-action-buttons">
<loading-button <loading-button
:loading="installButtonLoading" :loading="installButtonLoading"
:disabled="installButtonDisabled" :disabled="disabled || installButtonDisabled"
:label="installButtonLabel" :label="installButtonLabel"
class="js-cluster-application-install-button" class="js-cluster-application-install-button"
@click="installClicked" @click="installClicked"
...@@ -184,35 +253,5 @@ ...@@ -184,35 +253,5 @@
</div> </div>
</div> </div>
</div> </div>
<div
v-if="hasError || isUnknownStatus"
class="gl-responsive-table-row-layout"
role="row"
>
<div
class="alert alert-danger alert-block append-bottom-0 clusters-error-alert"
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> </div>
</template> </template>
...@@ -4,9 +4,60 @@ ...@@ -4,9 +4,60 @@
} }
} }
.cluster-applications-table { .cluster-application-row {
// Wait for the Vue to kick-in and render the applications block background: $gray-lighter;
min-height: 628px;
&.cluster-application-installed {
background: none;
}
.settings-message {
padding: $gl-vert-padding $gl-padding-8;
}
}
@media (min-width: map-get($grid-breakpoints, md)) {
.cluster-application-list {
border: 1px solid $border-color;
border-radius: $border-radius-default;
}
.cluster-application-row {
border-bottom: 1px solid $border-color;
padding: $gl-padding;
}
}
.cluster-application-logo {
border: 3px solid $white-light;
box-shadow: 0 0 0 1px $gray-normal;
&.avatar:hover {
border-color: $white-light;
}
}
.cluster-application-warning {
font-weight: bold;
text-align: center;
padding: $gl-padding;
border-bottom: 1px solid $white-normal;
.svg-container {
display: inline-block;
vertical-align: middle;
margin-right: $gl-padding-8;
width: 40px;
height: 40px;
}
}
.cluster-application-description {
flex: 1;
}
.cluster-application-disabled {
opacity: 0.5;
} }
.clusters-dropdown-menu { .clusters-dropdown-menu {
......
---
title: Improve install flow of Kubernetes cluster apps
merge_request: 21567
author:
type: changed
...@@ -1353,6 +1353,9 @@ msgstr "" ...@@ -1353,6 +1353,9 @@ msgstr ""
msgid "ClusterIntegration|Certificate Authority bundle (PEM format)" msgid "ClusterIntegration|Certificate Authority bundle (PEM format)"
msgstr "" msgstr ""
msgid "ClusterIntegration|Choose which applications to install on your Kubernetes cluster. Helm Tiller is required to install any of the following applications."
msgstr ""
msgid "ClusterIntegration|Choose which of your environments will use this cluster." msgid "ClusterIntegration|Choose which of your environments will use this cluster."
msgstr "" msgstr ""
...@@ -1443,9 +1446,6 @@ msgstr "" ...@@ -1443,9 +1446,6 @@ msgstr ""
msgid "ClusterIntegration|Install" msgid "ClusterIntegration|Install"
msgstr "" msgstr ""
msgid "ClusterIntegration|Install applications on your Kubernetes cluster. Read more about %{helpLink}"
msgstr ""
msgid "ClusterIntegration|Installed" msgid "ClusterIntegration|Installed"
msgstr "" msgstr ""
...@@ -1653,6 +1653,9 @@ msgstr "" ...@@ -1653,6 +1653,9 @@ msgstr ""
msgid "ClusterIntegration|With a Kubernetes cluster associated to this project, you can use review apps, deploy your applications, run your pipelines, and much more in an easy way." msgid "ClusterIntegration|With a Kubernetes cluster associated to this project, you can use review apps, deploy your applications, run your pipelines, and much more in an easy way."
msgstr "" msgstr ""
msgid "ClusterIntegration|You must first install Helm Tiller before installing the applications below"
msgstr ""
msgid "ClusterIntegration|Your account must have %{link_to_kubernetes_engine}" msgid "ClusterIntegration|Your account must have %{link_to_kubernetes_engine}"
msgstr "" msgstr ""
...@@ -1671,9 +1674,6 @@ msgstr "" ...@@ -1671,9 +1674,6 @@ msgstr ""
msgid "ClusterIntegration|help page" msgid "ClusterIntegration|help page"
msgstr "" msgstr ""
msgid "ClusterIntegration|installing applications"
msgstr ""
msgid "ClusterIntegration|meets the requirements" msgid "ClusterIntegration|meets the requirements"
msgstr "" msgstr ""
......
...@@ -86,7 +86,6 @@ describe 'User Cluster', :js do ...@@ -86,7 +86,6 @@ describe 'User Cluster', :js do
context 'when user disables the cluster' do context 'when user disables the cluster' do
before do before do
page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click
fill_in 'cluster_name', with: 'dev-cluster'
page.within('#cluster-integration') { click_button 'Save changes' } page.within('#cluster-integration') { click_button 'Save changes' }
end end
......
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