From ab4bfee019348f51976062512f2586fdf6b915c9 Mon Sep 17 00:00:00 2001 From: Sam Chow Date: Tue, 3 Jul 2018 13:06:54 -0400 Subject: [PATCH] Add progress bar to other parts of the config app Hardcode active classes to modal step bars --- config_app/config_endpoints/common.py | 4 ++ .../config/TransientDirectoryProvider.py | 4 ++ .../cor-floating-bottom-bar.html | 3 ++ .../cor-floating-bottom-bar.js | 44 ++++++++++++++++++ .../cor-progress/cor-progress-components.js | 2 +- .../download-tarball-modal.component.html | 8 ++++ .../download-tarball-modal.css | 4 -- ...config.html => load-config.component.html} | 8 ++++ .../load-config/load-config.component.ts | 14 +++--- .../js/components/load-config/load-config.css | 0 .../registry-name/registry-name.html | 1 + .../components/registry-name/registry-name.js | 22 +++++++++ .../core-config-setup/config-setup-tool.html | 15 ++++-- config_app/js/setup/setup.component.js | 9 ---- config_app/js/setup/setup.html | 10 ++-- .../static/css/config-setup-app-component.css | 12 +++++ config_app/static/img/quay-logo.png | Bin 0 -> 36645 bytes config_app/templates/index.html | 3 +- 18 files changed, 131 insertions(+), 32 deletions(-) create mode 100644 config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.html create mode 100644 config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.js rename config_app/js/components/load-config/{load-config.html => load-config.component.html} (70%) delete mode 100644 config_app/js/components/load-config/load-config.css create mode 100644 config_app/js/components/registry-name/registry-name.html create mode 100644 config_app/js/components/registry-name/registry-name.js create mode 100644 config_app/static/img/quay-logo.png diff --git a/config_app/config_endpoints/common.py b/config_app/config_endpoints/common.py index 2cb1c2dc8..9551101b4 100644 --- a/config_app/config_endpoints/common.py +++ b/config_app/config_endpoints/common.py @@ -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) diff --git a/config_app/config_util/config/TransientDirectoryProvider.py b/config_app/config_util/config/TransientDirectoryProvider.py index 2e0509e74..3737ec732 100644 --- a/config_app/config_util/config/TransientDirectoryProvider.py +++ b/config_app/config_util/config/TransientDirectoryProvider.py @@ -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 diff --git a/config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.html b/config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.html new file mode 100644 index 000000000..11615e6a8 --- /dev/null +++ b/config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.js b/config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.js new file mode 100644 index 000000000..ae18dcae7 --- /dev/null +++ b/config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.js @@ -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; + }); diff --git a/config_app/js/components/cor-progress/cor-progress-components.js b/config_app/js/components/cor-progress/cor-progress-components.js index a8bc9b3b9..bbc955792 100644 --- a/config_app/js/components/cor-progress/cor-progress-components.js +++ b/config_app/js/components/cor-progress/cor-progress-components.js @@ -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) { diff --git a/config_app/js/components/download-tarball-modal/download-tarball-modal.component.html b/config_app/js/components/download-tarball-modal/download-tarball-modal.component.html index dfc95c578..faa206531 100644 --- a/config_app/js/components/download-tarball-modal/download-tarball-modal.component.html +++ b/config_app/js/components/download-tarball-modal/download-tarball-modal.component.html @@ -5,6 +5,14 @@
+ + + + + + + +

Download Configuration

diff --git a/config_app/js/components/download-tarball-modal/download-tarball-modal.css b/config_app/js/components/download-tarball-modal/download-tarball-modal.css index eada2902c..3a02be753 100644 --- a/config_app/js/components/download-tarball-modal/download-tarball-modal.css +++ b/config_app/js/components/download-tarball-modal/download-tarball-modal.css @@ -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; -} diff --git a/config_app/js/components/load-config/load-config.html b/config_app/js/components/load-config/load-config.component.html similarity index 70% rename from config_app/js/components/load-config/load-config.html rename to config_app/js/components/load-config/load-config.component.html index 1a4d101e6..cf2a75e4c 100644 --- a/config_app/js/components/load-config/load-config.html +++ b/config_app/js/components/load-config/load-config.component.html @@ -5,6 +5,14 @@
+ + + + + + + +

Load Config

diff --git a/config_app/js/components/load-config/load-config.component.ts b/config_app/js/components/load-config/load-config.component.ts index eb93b36cd..a5ffba50f 100644 --- a/config_app/js/components/load-config/load-config.component.ts +++ b/config_app/js/components/load-config/load-config.component.ts @@ -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 = new EventEmitter(); - private constructor(@Inject('ApiService') private apiService: any) { - } - private handleTarballSelected(files: File[], callback: Function) { this.readyToSubmit = true; callback(true) diff --git a/config_app/js/components/load-config/load-config.css b/config_app/js/components/load-config/load-config.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/config_app/js/components/registry-name/registry-name.html b/config_app/js/components/registry-name/registry-name.html new file mode 100644 index 000000000..d68e63ddb --- /dev/null +++ b/config_app/js/components/registry-name/registry-name.html @@ -0,0 +1 @@ +{{ name }} diff --git a/config_app/js/components/registry-name/registry-name.js b/config_app/js/components/registry-name/registry-name.js new file mode 100644 index 000000000..fd41ba8a7 --- /dev/null +++ b/config_app/js/components/registry-name/registry-name.js @@ -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; +}); + diff --git a/config_app/js/core-config-setup/config-setup-tool.html b/config_app/js/core-config-setup/config-setup-tool.html index 520e849d9..9671c4f25 100644 --- a/config_app/js/core-config-setup/config-setup-tool.html +++ b/config_app/js/core-config-setup/config-setup-tool.html @@ -932,7 +932,7 @@
If specified, the certificate (in PEM format) for the LDAP TLS connection. -
@@ -1578,6 +1578,7 @@
+ @@ -1605,9 +1606,17 @@
-

+ + + + + + + + +

Checking your settings -

+
diff --git a/config_app/js/setup/setup.component.js b/config_app/js/setup/setup.component.js index 1d13dc924..e3023d273 100644 --- a/config_app/js/setup/setup.component.js +++ b/config_app/js/setup/setup.component.js @@ -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) ]; }; diff --git a/config_app/js/setup/setup.html b/config_app/js/setup/setup.html index e3b2fed37..04f959770 100644 --- a/config_app/js/setup/setup.html +++ b/config_app/js/setup/setup.html @@ -12,12 +12,10 @@ - - - +
Almost done!
@@ -41,14 +39,12 @@ - - - + -

Setup

+

Setup

diff --git a/config_app/static/css/config-setup-app-component.css b/config_app/static/css/config-setup-app-component.css index 2b3ea6230..453a08019 100644 --- a/config_app/static/css/config-setup-app-component.css +++ b/config_app/static/css/config-setup-app-component.css @@ -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; +} diff --git a/config_app/static/img/quay-logo.png b/config_app/static/img/quay-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..4cf1219ed4a8a7632d40273dc66027db8994b2ff GIT binary patch literal 36645 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 @@ -28,7 +29,7 @@ {% endfor %} Config app - +