quay/config_app/js/components/kube-deploy-modal/kube-deploy-modal.component.ts

import {Component, EventEmitter, 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');

// The response from the API about deployment rollout status
type DeploymentRollout = {
    status: 'available' | 'progressing' | 'failed',
    message: string
};

type DeploymentStatus = {
    name: string,
    numPods: number,
    message?: string,
    pollHandler?: PollHandle,
}

@Component({
    selector: 'kube-deploy-modal',
    templateUrl,
    styleUrls: [ styleUrl ],
})
export class KubeDeployModalComponent implements OnDestroy {
    private state
        : 'loadingDeployments'
        | 'readyToDeploy'
        | 'deployingConfiguration'
        | 'cyclingDeployments'
        | 'deployed'
        | 'error';
    private errorMessage: string;
    private offerRollback: boolean;
    private deploymentsStatus: DeploymentStatus[] = [];
    private deploymentsCycled: number = 0;
    private onDestroyListeners: Function[] = [];

    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';
        }).catch(err => {
            this.state = 'error';
            this.errorMessage = `There are no Quay deployments active in this namespace. \
                                Please check that you are running this \
                                tool in the same namespace as the Quay Enterprise application\
                                Associated error message: ${err.toString()}`;
        })
    }

    // Call all listeners of the onDestroy
    ngOnDestroy(): any {
        this.onDestroyListeners.forEach(fn => {
            fn()
        });
    }


    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 = 'cyclingDeployments';
                this.watchDeployments();
            }).catch(err => {
                this.state = 'error';
                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 => {
            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) }
            }, this.getDeploymentStatus(deployment), 5000 /* 5 seconds */)
                .start();
        });
    }

    // Query each deployment every 5s, and stop polling once it's either available or failed
    getDeploymentStatus(deployment: DeploymentStatus): (boolean) => void {
        return (continue_callback: (shouldContinue: boolean) => void) => {
            const params = {
                'deployment': deployment.name
            };

            this.ApiService.scGetDeploymentRolloutStatus(null, params).then((deploymentRollout: DeploymentRollout) => {
                if (deploymentRollout.status === 'available') {
                    continue_callback(false);

                    this.deploymentsCycled++;
                    if (this.deploymentsCycled === this.deploymentsStatus.length) {
                        this.state = 'deployed';
                    }
                } else if (deploymentRollout.status === 'progressing') {
                    continue_callback(true);
                    deployment.message = deploymentRollout.message;
                } else { // deployment rollout failed
                    this.state = 'error';
                    continue_callback(false);
                    deployment.message = deploymentRollout.message;
                    this.errorMessage = `Could not cycle deployments: ${deploymentRollout.message}`;
                    this.offerRollback = true;
                }
            }).catch(err => {
                continue_callback(false);
                this.state = 'error';
                this.errorMessage = `Could not cycle the deployments with the new configuration. Error: ${err.toString()}`;
            });
        }
    }
}