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

Add cycling deployments and updating config

Browse source 
Add kube config with refactor to kube accessor

Add tests for k8s accessor, some styling changes
This commit is contained in:
Sam Chow 2018-08-09 16:43:11 -04:00
parent d387ba171f
commit eea5fe3391
23 changed files with 830 additions and 560 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,17 +18,34 @@
</div>
<!-- Body -->
<div class="modal-body">
<div class="cor-loader" ng-if="$ctrl.loading"></div>
The following deployments will be affected:
<li ng-repeat="deployment in $ctrl.deployments">
name: {{deployment}}
</li>
<button class="btn btn-lg" ng-click="$ctrl.deployConfiguration()">
<i class="far fa-paper-plane" style="margin-right: 10px;"></i>
Populate configuration to deployments
</button>
</div>
<div class="modal-footer">
<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...
</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 -->

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

@ -1,36 +1,53 @@
import {Component, Inject} from 'ng-metadata/core';
const templateUrl = require('./kube-deploy-modal.component.html');
const styleUrl = require('./kube-deploy-modal.css');
@Component({
selector: 'kube-deploy-modal',
templateUrl,
styleUrls: [ styleUrl ],
})
export class KubeDeployModalComponent {
private loading: boolean = true;
private deployments: [string];
private state
: 'loadingDeployments'
| 'readyToDeploy'
| 'deployingConfiguration'
| 'cyclingDeployments'
| 'deployed'
| 'error';
private errorMessage: string;
private deploymentsStatus: { name: string, numPods: number }[] = [];
constructor(@Inject('ApiService') private ApiService) {
this.state = 'loadingDeployments';
ApiService.scGetNumDeployments().then(resp => {
console.log(resp)
this.deployments = resp.items.map(dep => dep.metadata.name);
console.log(this.deployments);
this.loading = false;
this.deploymentsStatus = resp.items.map(dep => ({ name: dep.metadata.name, numPods: dep.status.replicas }));
this.state = 'readyToDeploy';
}).catch(err => {
this.loading = false;
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()}`;
})
}
deployConfiguration(): void {
console.log('calling deploy conf')
this.ApiService.scDeployConfiguration().then(resp => {
console.log('resp from deploy was', resp)
this.ApiService.scCycleQEDeployment().then(() => {
console.log('merp')
this.ApiService.scDeployConfiguration().then(() => {
const deploymentNames: string[]= this.deploymentsStatus.map(dep => dep.name);
this.ApiService.scCycleQEDeployments({ deploymentNames }).then(() => {
this.state = 'deployed'
}).catch(err => {
console.log(err)
this.state = 'error';
this.errorMessage = `Could cycle the deployments with the new configuration. Error: ${err.toString()}`;
})
}).catch(err => {
console.log(err)
this.state = 'error';
this.errorMessage = `Could not deploy the configuration. Error: ${err.toString()}`;
})
}
}

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

@ -0,0 +1,31 @@
.kube-deploy-modal__body {
display: flex;
flex-direction: column;
padding: 15px;
list-style: none;
}
.kube-deploy-modal__list {
padding-top: 10px;
padding-left: 15px;
margin-bottom: 15px;
list-style: none;
}
.kube-deploy-modal__list-header {
font-size: 16px;
}
.kube-deploy-modal__list-item {
padding-top: 5px;
}
.kube-deploy-modal__list-item i {
padding-right: 5px;
}
.kube-deploy-modal__body .btn {
align-self: center;
margin-top: 20px;
margin-bottom: 10px;
}