vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add config ability to rollback changes on kube

Browse source
This commit is contained in:
Sam Chow 2018-08-27 17:05:53 -04:00
parent 2b59432414
commit 9695c98e5f
15 changed files with 237 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

34
config_app/js/components/kube-deploy-modal/kube-deploy-modal.component.html
View file

@ -2,7 +2,7 @@
<div class="co-dialog modal fade initial-setup-modal in" id="setupModal" style="display: block;">
<div class="modal-backdrop fade in" style="height: 1000px;"></div>
<div class="modal-dialog fade in">
<div class="modal-content">
<div class="modal-content kube-deploy-modal">
<!-- Header -->
<div class="modal-header">
<span class="cor-step-bar">
@ -37,11 +37,13 @@
</div>
<div ng-if="$ctrl.state === 'cyclingDeployments'">
<div class="cor-loader"></div>
Cycling deployments...
<li class="kube-deploy-modal__list-item" ng-repeat="deployment in $ctrl.deploymentsStatus">
<i class="fa ci-k8s-logo"></i>
<code>{{deployment.name}}</code>: {{deployment.message || 'Waiting for deployment information...'}}
</li>
<span class="kube-deploy-modal__list-header">Cycling deployments...</span>
<ul class="kube-deploy-modal__list">
<li class="kube-deploy-modal__list-item" ng-repeat="deployment in $ctrl.deploymentsStatus">
<i class="fa ci-k8s-logo"></i>
<code>{{deployment.name}}</code>: {{deployment.message || 'Waiting for deployment information...'}}
</li>
</ul>
</div>
</div>
</div>
@ -50,12 +52,20 @@
<br>Note: The web interface of the Quay app may take a few minutes to come up.
</div>
<div ng-if="$ctrl.state === 'error'" class="modal-footer alert alert-danger">
{{ $ctrl.errorMessage }}
<div ng-if="$ctrl.offerRollback">
// todo
{{ $ctrl.errorMessage }}
<div ng-if="$ctrl.rollingBackStatus !== 'none'" class="rollback">
<button ng-if="$ctrl.rollingBackStatus === 'offer'" class="btn btn-default" ng-click="$ctrl.rollbackDeployments()">
<i class="fas fa-history" style="margin-right: 10px;"></i>
Rollback deployments
</button>
<div ng-if="$ctrl.rollingBackStatus === 'rolling'" class="cor-loader-inline"></div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div ng-if="$ctrl.state === 'rolledBackWarning'" class="modal-footer co-alert co-alert-warning">
Successfully rolled back changes. Please try deploying again with your configuration later.
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>

47
config_app/js/components/kube-deploy-modal/kube-deploy-modal.component.ts
View file

@ -1,5 +1,5 @@
import {Component, Inject, OnDestroy } from 'ng-metadata/core';
import {AngularPollChannel, PollHandle} from "../../services/services.types";
import { Input, Component, Inject, OnDestroy } from 'ng-metadata/core';
import { AngularPollChannel, PollHandle } from "../../services/services.types";
const templateUrl = require('./kube-deploy-modal.component.html');
const styleUrl = require('./kube-deploy-modal.css');
@ -24,22 +24,25 @@ const DEPLOYMENT_POLL_SLEEPTIME = 5000; /* 5 seconds */
styleUrls: [ styleUrl ],
})
export class KubeDeployModalComponent implements OnDestroy {
@Input('<') public loadedConfig;
private state
: 'loadingDeployments'
| 'readyToDeploy'
| 'deployingConfiguration'
| 'cyclingDeployments'
| 'deployed'
| 'error';
| 'error'
| 'rolledBackWarning' = 'loadingDeployments';
private errorMessage: string;
private offerRollback: boolean;
private deploymentsStatus: DeploymentStatus[] = [];
private deploymentsCycled: number = 0;
private onDestroyListeners: Function[] = [];
private rollingBackStatus
: 'none'
| 'offer'
| 'rolling' = 'none';
constructor(@Inject('ApiService') private ApiService, @Inject('AngularPollChannel') private AngularPollChannel: AngularPollChannel) {
this.state = 'loadingDeployments';
ApiService.scGetNumDeployments().then(resp => {
this.deploymentsStatus = resp.items.map(dep => ({ name: dep.metadata.name, numPods: dep.spec.replicas }));
this.state = 'readyToDeploy';
@ -80,7 +83,7 @@ export class KubeDeployModalComponent implements OnDestroy {
watchDeployments(): void {
this.deploymentsStatus.forEach(deployment => {
const pollChannel = this.AngularPollChannel.create( {
const pollChannel = this.AngularPollChannel.create({
// Have to mock the scope object for the poll channel since we're calling into angular1 code
// We register the onDestroy function to be called later when this object is destroyed
'$on': (_, onDestruction) => { this.onDestroyListeners.push(onDestruction) }
@ -113,14 +116,38 @@ export class KubeDeployModalComponent implements OnDestroy {
continue_callback(false);
deployment.message = deploymentRollout.message;
this.errorMessage = `Could not cycle deployments: ${deploymentRollout.message}`;
this.offerRollback = true;
// Only offer rollback if we loaded/populated a config. (Can't rollback an initial setup)
if (this.loadedConfig) {
this.rollingBackStatus = 'offer';
this.errorMessage = `Could not cycle deployments: ${deploymentRollout.message}`;
}
}
}).catch(err => {
continue_callback(false);
this.state = 'error';
this.errorMessage = `Could not cycle the deployments with the new configuration. Error: ${err.toString()}`;
this.offerRollback = true;
this.errorMessage = `Could not cycle the deployments with the new configuration. Error: ${err.toString()}\
Would you like to rollback the deployment to its previous state?`;
// Only offer rollback if we loaded/populated a config. (Can't rollback an initial setup)
if (this.loadedConfig) {
this.rollingBackStatus = 'offer';
this.errorMessage = `Could not get deployment information for: ${deployment}`;
}
});
}
}
rollbackDeployments(): void {
this.rollingBackStatus = 'rolling';
const deploymentNames: string[] = this.deploymentsStatus.map(dep => dep.name);
this.ApiService.scRollbackDeployments({ deploymentNames }).then(() => {
this.state = 'rolledBackWarning';
this.rollingBackStatus = 'none';
}).catch(err => {
this.rollingBackStatus = 'none';
this.state = 'error';
this.errorMessage = `Could not cycle the deployments back to their previous states. Please contact support: ${err.toString()}`;
})
}
}

15
config_app/js/components/kube-deploy-modal/kube-deploy-modal.css
View file

@ -29,3 +29,18 @@
margin-top: 20px;
margin-bottom: 10px;
}
.kube-deploy-modal .rollback {
margin-left: auto;
}
.kube-deploy-modal .co-alert.co-alert-warning {
padding: 25px;
display: flex;
margin-bottom: 0;
}
.kube-deploy-modal .co-alert.co-alert-warning:before {
position: static;
padding-right: 15px;
}