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

<div>
    <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">
                <!-- Header -->
                <div class="modal-header">
                    <span class="cor-step-bar">
                        <span class="cor-step active" title="Configure Database" text="1"></span>
                        <span class="cor-step active" title="Setup Database" icon="database"></span>
                        <span class="cor-step active" title="Create Superuser" text="2"></span>
                        <span class="cor-step active" title="Configure Registry" text="3"></span>
                        <span class="cor-step active" title="Validate Configuration" text="4"></span>
                        <span class="cor-step active" title="Setup Complete" icon="download"></span>
                        <span class="cor-step active" title="Deploy Complete" icon="paper-plane"></span>
                    </span>
                    <h4 class="modal-title"><span>Deploy configuration</span></h4>
                </div>
                <!-- Body -->
                <div class="modal-body">
                    <div class="cor-loader" ng-if="$ctrl.state === 'loadingDeployments'"></div>
                    <div class="kube-deploy-modal__body" ng-if="$ctrl.deploymentsStatus.length > 0">
                        <span class="kube-deploy-modal__list-header">The following deployments will be affected:</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> with {{deployment.numPods}} <b> {{ deployment.numPods === 1 ? ' pod' : ' pods' }}</b>
                            </li>
                        </ul>
                        <button ng-if="$ctrl.state === 'readyToDeploy'" class="btn btn-primary btn-lg" ng-click="$ctrl.deployConfiguration()">
                            <i class="far fa-paper-plane" style="margin-right: 10px;"></i>
                            Populate configuration to deployments
                        </button>
                        <div ng-if="$ctrl.state === 'deployingConfiguration'">
                            <div class="cor-loader"></div>
                            Deploying configuration...
                        </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>
                        </div>
                        <div ng-if="$ctrl.state === 'deployed'">
                            Configuration successfully deployed!
                        </div>
                    </div>
                    <div ng-if="$ctrl.state === 'error'">
                        {{ $ctrl.errorMessage }}
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>