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

Create download modal following setup completion

Browse source
This commit is contained in:
Sam Chow 2018-06-27 13:49:54 -04:00
parent aa93d698b2
commit 2d0a599aab
12 changed files with 142 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,5 +22,6 @@
</div><!-- /.modal-dialog -->
</div>
</div>
<div ng-if="$ctrl.state === 'setup'" class="setup"></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>

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

@ -1,4 +1,4 @@
import { Input, Component, Inject } from 'ng-metadata/core';
import { Component } from 'ng-metadata/core';
const templateUrl = require('./config-setup-app.component.html');
/**
@ -9,7 +9,13 @@ const templateUrl = require('./config-setup-app.component.html');
templateUrl: templateUrl,
})
export class ConfigSetupAppComponent {
private state: 'choice' | 'setup' | 'load';
private state
: 'choice'
| 'setup'
| 'load'
| 'download';
private loadedConfig = false;
constructor() {
this.state = 'choice';
@ -21,9 +27,14 @@ export class ConfigSetupAppComponent {
private chooseLoad(): void {
this.state = 'load';
this.loadedConfig = true;
}
private configLoaded(): void {
this.state = 'setup';
}
private setupCompleted(): void {
this.state = 'download';
}
}

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

@ -0,0 +1,42 @@
<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">
<h4 class="modal-title"><span>Download Configuration</span></h4>
</div>
<!-- Body -->
<div class="modal-body">
<div ng-if="$ctrl.loadedConfig">
Please download your updated configuration. To deploy these changes to your Quay Enterprise instances, please
<a target="_blank" href="https://coreos.com/quay-enterprise/docs/latest/initial-setup.html">
see the docs.
</a>
<div class="modal__warning-box">
<i class="fas fa-exclamation-triangle" style="margin-right: 10px;"></i><strong>Warning:</strong>
Your configuration and certificates are kept <i>unencrypted</i>. Please keep this file secure.
</div>
</div>
<div ng-if="!$ctrl.loadedConfig">
Please download your new configuration. For more information, and next steps, please
<a target="_blank" href="https://coreos.com/quay-enterprise/docs/latest/initial-setup.html">
see the docs.
</a>
<div class="modal__warning-box">
<i class="fas fa-exclamation-triangle" style="margin-right: 10px;"></i><strong>Warning: </strong>
Your configuration and certificates are kept <i>unencrypted</i>. Please keep this file secure.
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary"
ng-click="$ctrl.downloadTarball()">
<i class="fa fa-download" style="margin-right: 10px;"></i>Download Configuration
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>

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

@ -0,0 +1,34 @@
import { Input, Component, Inject } from 'ng-metadata/core';
const templateUrl = require('./download-tarball-modal.component.html');
const styleUrl = require('./download-tarball-modal.css');
declare const FileSaver: any;
/**
* Initial Screen and Choice in the Config App
*/
@Component({
selector: 'download-tarball-modal',
templateUrl: templateUrl,
styleUrls: [ styleUrl ],
})
export class DownloadTarballModalComponent {
@Input('<') public loadedConfig;
constructor(@Inject('ApiService') private ApiService) {
}
private downloadTarball() {
const errorDisplay: Function = this.ApiService.errorDisplay(
'Could not save configuration. Please report this error.'
);
// We need to set the response type to 'blob', to ensure it's never encoded as a string
// (string encoded binary data can be difficult to transform with js)
// and to make it easier to save (FileSaver expects a blob)
this.ApiService.scGetConfigTarball(null, null, null, null, true).then(function(resp) {
FileSaver.saveAs(resp, 'quay-config.tar.gz');
}, errorDisplay);
}
}

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

@ -0,0 +1,6 @@
.modal__warning-box {
background-color: #ddd;
padding: 15px;
border-radius: 5px;
margin-top: 15px;
}