Add Rollout status to kube config tool

This commit is contained in:
Sam Chow 2018-08-22 16:32:14 -04:00
parent 6c494f4917
commit d936d778da
5 changed files with 119 additions and 4 deletions

View file

@ -38,6 +38,10 @@
<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>
</div>
<div ng-if="$ctrl.state === 'deployed'">
Configuration successfully deployed!

View file

@ -1,7 +1,13 @@
import {Component, Inject} from 'ng-metadata/core';
import {Component, EventEmitter, Inject} from 'ng-metadata/core';
const templateUrl = require('./kube-deploy-modal.component.html');
const styleUrl = require('./kube-deploy-modal.css');
// The response from the API about deployment rollout status
type DeploymentRollout = {
status: 'available' | 'progressing' | 'failed',
message: string
};
@Component({
selector: 'kube-deploy-modal',
templateUrl,
@ -18,7 +24,8 @@ export class KubeDeployModalComponent {
private errorMessage: string;
private deploymentsStatus: { name: string, numPods: number }[] = [];
private deploymentsStatus: { name: string, numPods: number, message?: string }[] = [];
private deploymentsCycled: number = 0;
constructor(@Inject('ApiService') private ApiService) {
this.state = 'loadingDeployments';
@ -37,17 +44,52 @@ export class KubeDeployModalComponent {
deployConfiguration(): void {
this.ApiService.scDeployConfiguration().then(() => {
this.state = 'deployingConfiguration';
const deploymentNames: string[] = this.deploymentsStatus.map(dep => dep.name);
this.ApiService.scCycleQEDeployments({ deploymentNames }).then(() => {
this.state = 'deployed'
this.state = 'cyclingDeployments';
this.watchDeployments();
}).catch(err => {
this.state = 'error';
this.errorMessage = `Could cycle the deployments with the new configuration. Error: ${err.toString()}`;
this.errorMessage = `Could not cycle the deployments with the new configuration. Error: ${err.toString()}`;
})
}).catch(err => {
this.state = 'error';
this.errorMessage = `Could not deploy the configuration. Error: ${err.toString()}`;
})
}
watchDeployments(): void {
this.deploymentsStatus.forEach(deployment => {
// Query each deployment every 500ms, and stop polling once it's either available or failed
const id: number = window.setInterval(() => {
const params = {
'deployment': deployment.name
};
this.ApiService.scGetDeploymentRolloutStatus(null, params).then((deploymentRollout: DeploymentRollout) => {
if (deploymentRollout.status === 'available') {
window.clearInterval(id);
this.deploymentsCycled++;
if (this.deploymentsCycled === this.deploymentsStatus.length) {
this.state = 'deployed';
}
} else if (deploymentRollout.status === 'progressing') {
deployment.message = deploymentRollout.message;
} else { // deployment rollout failed
window.clearInterval(id);
deployment.message = deploymentRollout.message;
}
}).catch(err => {
window.clearInterval(id);
this.state = 'error';
this.errorMessage = `Could not cycle the deployments with the new configuration. Error: ${err.toString()}`;
});
}, 500);
});
}
}