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

Add fetching of qe deployments in config tool

Browse source
This commit is contained in:
Sam Chow 2018-08-06 10:52:56 -04:00
parent 2c61c87712
commit 3d4e43c8d1
24 changed files with 484 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<div ng-if="$ctrl.state === 'choice'">
<div ng-if="$ctrl.state === 'choice' && $ctrl.isKubernetes === 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,6 +22,40 @@
</div><!-- /.modal-dialog -->
</div>
</div>
<div ng-if="$ctrl.state === 'choice' && $ctrl.isKubernetes === true">
<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>
</div>
<!-- Body -->
<div class="config-setup-wrapper">
<a class="config-setup_option" ng-click="$ctrl.chooseSetup()">
<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>
</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
<div ng-if="$ctrl.state === 'setup'" class="setup" setup-completed="$ctrl.setupCompleted()"></div>
<load-config ng-if="$ctrl.state === 'load'" config-loaded="$ctrl.configLoaded()"></load-config>
<download-tarball-modal ng-if="$ctrl.state === 'download'" loaded-config="$ctrl.loadedConfig"></download-tarball-modal>
<download-tarball-modal
ng-if="$ctrl.state === 'download'"
loaded-config="$ctrl.loadedConfig"
is-kubernetes="$ctrl.isKubernetes"
choose-deploy="$ctrl.chooseDeploy()">
</download-tarball-modal>
<kube-deploy-modal ng-if="$ctrl.state === 'deploy'"></kube-deploy-modal>

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

@ -1,6 +1,8 @@
import { Component, Inject } from 'ng-metadata/core';
const templateUrl = require('./config-setup-app.component.html');
declare var window: any;
/**
* Initial Screen and Choice in the Config App
*/
@ -13,12 +15,18 @@ export class ConfigSetupAppComponent {
: 'choice'
| 'setup'
| 'load'
| 'download';
| 'populate'
| 'download'
| 'deploy';
private loadedConfig = false;
private isKubernetes: boolean = false;
constructor(@Inject('ApiService') private apiService) {
this.state = 'choice';
if (window.__is_kubernetes) {
this.isKubernetes = true;
}
}
private chooseSetup(): void {
@ -36,6 +44,10 @@ export class ConfigSetupAppComponent {
this.loadedConfig = true;
}
private choosePopulate(): void {
this.state = 'populate';
}
private configLoaded(): void {
this.state = 'setup';
}
@ -43,4 +55,8 @@ export class ConfigSetupAppComponent {
private setupCompleted(): void {
this.state = 'download';
}
private chooseDeploy(): void {
this.state = 'deploy';
}
}

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

@ -41,13 +41,17 @@
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary"
<button class="btn btn-lg download-button"
ng-click="$ctrl.downloadTarball()">
<i class="fa fa-download" style="margin-right: 10px;"></i>Download Configuration
</button>
</div>
<div ng-if="$ctrl.isKubernetes" class="modal-footer">
<button class="btn btn-primary"
ng-click="$ctrl.goToDeploy()">
<i class="far fa-paper-plane" style="margin-right: 10px;"></i>Go to deployment rollout
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>

10
config_app/js/components/download-tarball-modal/download-tarball-modal.component.ts
View file

@ -1,4 +1,4 @@
import { Input, Component, Inject } from 'ng-metadata/core';
import {Input, Component, Inject, Output, EventEmitter} from 'ng-metadata/core';
const templateUrl = require('./download-tarball-modal.component.html');
const styleUrl = require('./download-tarball-modal.css');
@ -14,12 +14,14 @@ declare const FileSaver: any;
})
export class DownloadTarballModalComponent {
@Input('<') public loadedConfig;
@Input('<') public isKubernetes;
@Output() public chooseDeploy = new EventEmitter<any>();
constructor(@Inject('ApiService') private ApiService) {
}
private downloadTarball() {
private downloadTarball(): void {
const errorDisplay: Function = this.ApiService.errorDisplay(
'Could not save configuration. Please report this error.'
);
@ -31,4 +33,8 @@ export class DownloadTarballModalComponent {
FileSaver.saveAs(resp, 'quay-config.tar.gz');
}, errorDisplay);
}
private goToDeploy() {
this.chooseDeploy.emit({});
}
}

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

@ -1,7 +1,13 @@
.co-dialog .modal-body.download-tarball-modal {
padding: 15px;
display: flex;
flex-direction: column;
}
.modal__warning-box {
margin-top: 15px;
}
.download-tarball-modal .download-button {
align-self: center;
}

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

@ -0,0 +1,28 @@
<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">
<span>gotteeem</span>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>

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

@ -0,0 +1,20 @@
import {Component, Inject} from 'ng-metadata/core';
const templateUrl = require('./kube-deploy-modal.component.html');
@Component({
selector: 'kube-deploy-modal',
templateUrl,
})
export class KubeDeployModalComponent {
private loading: boolean = true;
private deployments: any;
constructor(@Inject('ApiService') private ApiService) {
ApiService.scGetNumDeployments().then(resp => {
console.log(resp)
this.loading = false;
}).catch(err => {
this.loading = false;
})
}
}