Add Rollout status to kube config tool
This commit is contained in:
parent
6c494f4917
commit
d936d778da
5 changed files with 119 additions and 4 deletions
|
@ -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!
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
Reference in a new issue