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

18
config_app/js/components/config-setup-app/config-setup-app.component.html
View file

@ -1,4 +1,4 @@
<div ng-if="$ctrl.state === 'choice' && $ctrl.isKubernetes === false">
<div ng-if="$ctrl.state === 'choice' && $ctrl.kubeNamespace === false">
<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">
@ -22,14 +22,14 @@
</div><!-- /.modal-dialog -->
</div>
</div>
<div ng-if="$ctrl.state === 'choice' && $ctrl.isKubernetes === true">
<div ng-if="$ctrl.state === 'choice' && $ctrl.kubeNamespace !== false">
<div class="co-dialog modal fade initial-setup-modal in" id="kubeSetupModal" 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">
<h4 class="modal-title"><span>Choose an option</span></h4>
<h4 class="modal-title"><span>Choose an option for the <code>{{ $ctrl.kubeNamespace }}</code> namespace</span></h4>
</div>
<!-- Body -->
<div class="config-setup-wrapper">
@ -37,13 +37,13 @@
<i class="fas fa-edit fa-2x"></i>
<div>Start new configuration for this cluster</div>
</a>
<a class="config-setup_option" ng-click="$ctrl.chooseLoad()">
<i class="fas fa-upload fa-2x"></i>
<div>Modify configuration for this cluster</div>
</a>
<a class="config-setup_option" ng-click="$ctrl.choosePopulate()">
<i class="fas fa-cloud-download-alt fa-2x"></i>
<div>Populate this cluster with a saved configuration</div>
<div>Modify configuration for this cluster</div>
</a>
<a class="config-setup_option" ng-click="$ctrl.chooseLoad()">
<i class="fas fa-upload fa-2x"></i>
<div>Populate this cluster from a previously created configuration</div>
</a>
</div>
</div><!-- /.modal-content -->
@ -55,7 +55,7 @@
<download-tarball-modal
ng-if="$ctrl.state === 'download'"
loaded-config="$ctrl.loadedConfig"
is-kubernetes="$ctrl.isKubernetes"
is-kubernetes="$ctrl.kubeNamespace !== false"
choose-deploy="$ctrl.chooseDeploy()">
</download-tarball-modal>
<kube-deploy-modal ng-if="$ctrl.state === 'deploy'"></kube-deploy-modal>

6
config_app/js/components/config-setup-app/config-setup-app.component.ts
View file

@ -20,12 +20,12 @@ export class ConfigSetupAppComponent {
| 'deploy';
private loadedConfig = false;
private isKubernetes: boolean = false;
private kubeNamespace: string | boolean = false;
constructor(@Inject('ApiService') private apiService) {
this.state = 'choice';
if (window.__is_kubernetes) {
this.isKubernetes = true;
if (window.__kubernetes_namespace) {
this.kubeNamespace = window.__kubernetes_namespace;
}
}

6
config_app/js/components/download-tarball-modal/download-tarball-modal.component.html
View file

@ -23,7 +23,7 @@
see the docs.
</a>
<div class="modal__warning-box">
<div class="fas co-alert co-alert-warning">
<div class="co-alert co-alert-warning">
<strong>Warning: </strong>
Your configuration and certificates are kept <i>unencrypted</i>. Please keep this file secure.
</div>
@ -35,13 +35,13 @@
see the docs.
</a>
<div class="modal__warning-box">
<div class="fas co-alert co-alert-warning">
<div class="co-alert co-alert-warning">
<strong>Warning: </strong>
Your configuration and certificates are kept <i>unencrypted</i>. Please keep this file secure.
</div>
</div>
</div>
<button class="btn btn-lg download-button"
<button class="btn btn-default btn-lg download-button"
ng-click="$ctrl.downloadTarball()">
<i class="fa fa-download" style="margin-right: 10px;"></i>Download Configuration
</button>

5
config_app/js/components/download-tarball-modal/download-tarball-modal.css
View file

@ -11,3 +11,8 @@
.download-tarball-modal .download-button {
align-self: center;
}
.download-tarball-modal .download-button:hover {
background-color: #dddddd;
text-decoration: none;
}

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;
}