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

Add progress bar to other parts of the config app

Browse source 
Hardcode active classes to modal step bars
This commit is contained in:
Sam Chow 2018-07-03 13:06:54 -04:00
parent 100d7eae81
commit ab4bfee019
18 changed files with 131 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
config_app/config_endpoints/common.py
View file

@ -5,6 +5,9 @@ import re
from flask import make_response, render_template
from flask_restful import reqparse
from config import frontend_visible_config
from config_app.c_app import app
from config_app._init_config import ROOT_DIR
@ -45,6 +48,7 @@ def render_page_template(name, route_data=None, js_bundle_name=DEFAULT_JS_BUNDLE
contents = render_template(name,
route_data=route_data,
main_scripts=main_scripts,
config_set=frontend_visible_config(app.config),
**kwargs)
resp = make_response(contents)

4
config_app/config_util/config/TransientDirectoryProvider.py
View file

@ -16,6 +16,10 @@ class TransientDirectoryProvider(FileConfigProvider):
self.temp_dir = temp_dir
super(TransientDirectoryProvider, self).__init__(temp_dir.name, yaml_filename, py_filename)
@property
def provider_id(self):
return 'transient'
def new_config_dir(self):
"""
Update the path with a new temporary directory, deleting the old one in the process

3
config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.html Normal file
View file

@ -0,0 +1,3 @@
<div class="co-floating-bottom-bar">
<span ng-transclude/>
</div>

44
config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.js Normal file
View file

@ -0,0 +1,44 @@
const templateUrl = require('./cor-floating-bottom-bar.html');
angular.module('quay-config')
.directive('corFloatingBottomBar', function() {
var directiveDefinitionObject = {
priority: 3,
templateUrl,
replace: true,
transclude: true,
restrict: 'C',
scope: {},
controller: function($rootScope, $scope, $element, $timeout, $interval) {
var handler = function() {
$element.removeClass('floating');
$element.css('width', $element[0].parentNode.clientWidth + 'px');
var windowHeight = $(window).height();
var rect = $element[0].getBoundingClientRect();
if (rect.bottom > windowHeight) {
$element.addClass('floating');
}
};
$(window).on("scroll", handler);
$(window).on("resize", handler);
var previousHeight = $element[0].parentNode.clientHeight;
var stop = $interval(function() {
var currentHeight = $element[0].parentNode.clientWidth;
if (previousHeight != currentHeight) {
currentHeight = previousHeight;
handler();
}
}, 100);
$scope.$on('$destroy', function() {
$(window).off("resize", handler);
$(window).off("scroll", handler);
$interval.cancel(stop);
});
}
};
return directiveDefinitionObject;
});

2
config_app/js/components/cor-progress/cor-progress-components.js
View file

@ -13,7 +13,7 @@ angular.module('quay-config')
transclude: true,
restrict: 'C',
scope: {
'progress': '=progress'
'progress': '=?progress'
},
controller: function($rootScope, $scope, $element) {
$scope.$watch('progress', function(progress) {

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

@ -5,6 +5,14 @@
<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>
<h4 class="modal-title"><span>Download Configuration</span></h4>
</div>
<!-- Body -->

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

@ -5,7 +5,3 @@
.modal__warning-box {
margin-top: 15px;
}
.modal__warning-box .co-alert.co-alert-warning::before {
font-family:Font Awesome\ 5 Free;
}

8
config_app/js/components/load-config/load-config.html → config_app/js/components/load-config/load-config.component.html
View file

@ -5,6 +5,14 @@
<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" title="Setup Database" icon="database"></span>
<span class="cor-step" title="Create Superuser" text="2"></span>
<span class="cor-step" title="Configure Registry" text="3"></span>
<span class="cor-step" title="Validate Configuration" text="4"></span>
<span class="cor-step" title="Setup Complete" icon="download"></span>
</span>
<h4 class="modal-title"><span>Load Config</span></h4>
</div>
<!-- Body -->

14
config_app/js/components/load-config/load-config.component.ts
View file

@ -1,22 +1,22 @@
import {Component, EventEmitter, Inject, Output} from 'ng-metadata/core';
const templateUrl = require('./load-config.html');
const styleUrl = require('./load-config.css');
import {
Component,
EventEmitter,
Inject,
Output,
} from 'ng-metadata/core';
const templateUrl = require('./load-config.component.html');
declare var bootbox: any;
@Component({
selector: 'load-config',
templateUrl,
styleUrls: [ styleUrl ],
})
export class LoadConfigComponent {
private readyToSubmit: boolean = false;
private uploadFunc: Function;
@Output() public configLoaded: EventEmitter<any> = new EventEmitter();
private constructor(@Inject('ApiService') private apiService: any) {
}
private handleTarballSelected(files: File[], callback: Function) {
this.readyToSubmit = true;
callback(true)

0
config_app/js/components/load-config/load-config.css
View file

1
config_app/js/components/registry-name/registry-name.html Normal file
View file

@ -0,0 +1 @@
<span class="registry-name-element">{{ name }}</span>

22
config_app/js/components/registry-name/registry-name.js Normal file
View file

@ -0,0 +1,22 @@
const templateUrl = require('./registry-name.html');
/**
* An element which displays the name of the registry (optionally the short name).
*/
angular.module('quay-config').directive('registryName', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl,
replace: false,
transclude: true,
restrict: 'C',
scope: {
'isShort': '=isShort'
},
controller: function($scope, $element, Config) {
$scope.name = $scope.isShort ? Config.REGISTRY_TITLE_SHORT : Config.REGISTRY_TITLE;
}
};
return directiveDefinitionObject;
});

15
config_app/js/core-config-setup/config-setup-tool.html
View file

@ -932,7 +932,7 @@
<span class="config-file-field" filename="ldap.crt" has-file="hasfile.LDAPTLSCert"></span>
<div class="help-text">
If specified, the certificate (in PEM format) for the LDAP TLS connection.
</div
</div>
</td>
</tr>
<tr ng-if="config.LDAP_URI.indexOf('ldaps://') == 0">
@ -1578,6 +1578,7 @@
</div>
</div> <!-- /GitLab Trigger -->
</div>
</form>
<!-- Save Bar -->
@ -1605,9 +1606,17 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<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" title="Setup Complete" icon="download"></span>
</span>
<h4 class="modal-title">
Checking your settings
</h4>
</h4>
</div>
<div class="modal-body">
<div class="service-verification">

9
config_app/js/setup/setup.component.js
View file

@ -69,9 +69,6 @@ const templateUrl = require('./setup.html');
// An error occurred when setting up the database.
'DB_SETUP_ERROR': 'setup-db-error',
// The container is being restarted for the database changes.
'DB_RESTARTING': 'setup-db-restarting',
// A superuser is being configured.
'CREATE_SUPERUSER': 'create-superuser',
@ -90,9 +87,6 @@ const templateUrl = require('./setup.html');
// The configuration is fully valid.
'VALID_CONFIG': 'valid-config',
// The container is being restarted for the configuration changes.
'CONFIG_RESTARTING': 'config-restarting',
// The product is ready for use.
'READY': 'ready'
}
@ -130,7 +124,6 @@ const templateUrl = require('./setup.html');
// Fall-through.
case $scope.States.CREATE_SUPERUSER:
case $scope.States.DB_RESTARTING:
case $scope.States.CONFIG_DB:
case $scope.States.VALID_CONFIG:
case $scope.States.READY:
@ -179,11 +172,9 @@ const templateUrl = require('./setup.html');
return [
isStepFamily(step, States.CONFIG_DB),
isStepFamily(step, States.DB_SETUP),
isStep(step, States.DB_RESTARTING),
isStepFamily(step, States.CREATE_SUPERUSER),
isStep(step, States.CONFIG),
isStep(step, States.VALID_CONFIG),
isStep(step, States.CONFIG_RESTARTING),
isStep(step, States.READY)
];
};

10
config_app/js/setup/setup.html
View file

@ -12,12 +12,10 @@
<span class="cor-step-bar" progress="stepProgress">
<span class="cor-step" title="Configure Database" text="1"></span>
<span class="cor-step" title="Setup Database" icon="database"></span>
<span class="cor-step" title="Container Restart" icon="sync"></span>
<span class="cor-step" title="Create Superuser" text="2"></span>
<span class="cor-step" title="Configure Registry" text="3"></span>
<span class="cor-step" title="Validate Configuration" text="4"></span>
<span class="cor-step" title="Container Restart" icon="sync"></span>
<span class="cor-step" title="Setup Complete" icon="check"></span>
<span class="cor-step" title="Setup Complete" icon="download"></span>
</span>
<div><strong>Almost done!</strong></div>
@ -41,14 +39,12 @@
<span class="cor-step-bar" progress="stepProgress">
<span class="cor-step" title="Configure Database" text="1"></span>
<span class="cor-step" title="Setup Database" icon="database"></span>
<span class="cor-step" title="Container Restart" icon="sync"></span>
<span class="cor-step" title="Create Superuser" text="2"></span>
<span class="cor-step" title="Configure Registry" text="3"></span>
<span class="cor-step" title="Validate Configuration" text="4"></span>
<span class="cor-step" title="Container Restart" icon="sync"></span>
<span class="cor-step" title="Setup Complete" icon="check"></span>
<span class="cor-step" title="Setup Complete" icon="download"></span>
</span>
<h4 class="modal-title">Setup</h4>
<h4 class="modal-title">Setup</h4>
</div>
<form id="superuserForm" name="superuserForm" ng-submit="createSuperUser()">

12
config_app/static/css/config-setup-app-component.css
View file

@ -22,3 +22,15 @@
background-color: #dddddd;
text-decoration: none;
}
/* Overrides for fixing old quay styles*/
/* Fixes the transition to font awesome 5 */
.quay-config-app .co-alert.co-alert-warning::before {
font-family: Font Awesome\ 5 Free;
}
.quay-config-app .co-alert.co-alert-info::before {
font-family: Font Awesome\ 5 Free;
}

BIN
config_app/static/img/quay-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

3
config_app/templates/index.html
View file

@ -3,6 +3,7 @@
<head>
<script type="text/javascript">
window.__endpoints = {{ route_data|tojson|safe }}.paths;
window.__config = {{ config_set|tojson|safe }};
</script>
@ -28,7 +29,7 @@
{% endfor %}
<title>Config app</title>
</head>
<body class="co-img-bg-network">
<body class="co-img-bg-network quay-config-app">
<config-setup-app></config-setup-app>
</body>
</html>