From 9d578e25759351a231b1c6f62ebb54293031f793 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 26 Nov 2018 17:11:02 +0700 Subject: [PATCH 01/32] IGNITE-10239 Update top menu, navigation and footer. --- .../web-console/frontend/app/app.config.js | 7 + modules/web-console/frontend/app/app.js | 8 +- .../connected-clusters-badge/style.scss | 34 ++-- .../connected-clusters-badge/template.pug | 5 +- .../page-configure/{index.js => index.ts} | 25 ++- .../app/components/page-configure/states.js | 2 +- .../components/page-forgot-password/run.js | 2 +- .../page-forgot-password/template.pug | 8 +- .../app/components/page-landing/index.js | 2 +- .../app/components/page-landing/style.scss | 5 + .../app/components/page-landing/template.pug | 11 +- .../page-password-changed/controller.js | 2 +- .../components/page-password-changed/index.js | 2 +- .../page-password-reset/controller.js | 4 +- .../components/page-password-reset/index.js | 6 +- .../page-password-reset/template.pug | 6 - .../page-queries/{index.js => index.ts} | 10 ++ .../app/components/page-signin/run.ts | 4 +- .../app/components/page-signin/template.pug | 74 ++++---- .../app/components/page-signup/run.js | 2 +- .../app/components/page-signup/template.pug | 8 +- .../permanent-notifications/component.ts | 25 +++ .../permanent-notifications/controller.ts | 29 +++ .../permanent-notifications/index.ts | 21 +++ .../permanent-notifications/style.scss | 54 ++++++ .../permanent-notifications/template.pug | 23 +++ .../components/timed-redirection/style.scss | 1 + .../web-console-footer/component.js | 4 +- .../web-console-footer/controller.ts | 27 +++ .../components/web-console-footer/index.js | 4 +- .../components/web-console-footer/style.scss | 43 +---- .../web-console-footer/template.pug | 10 +- .../{component.js => component.ts} | 25 +-- .../component.ts} | 6 +- .../components/demo-mode-button/controller.ts | 46 +++++ .../components/demo-mode-button}/template.pug | 5 +- .../components/user-menu/component.ts} | 4 +- .../components/user-menu/controller.ts} | 56 +++--- .../components/user-menu}/style.scss | 23 ++- .../components/user-menu/template.pug} | 12 +- .../web-console-header-content/component.ts | 25 +++ .../web-console-header-content/controller.ts | 53 ++++++ .../web-console-header-content/style.scss} | 48 +++-- .../template.pug | 13 ++ .../components/web-console-header/index.js | 8 +- .../components/web-console-header/style.scss | 167 +++--------------- .../web-console-header/template.pug | 28 ++- .../web-console-sidebar/component.ts | 25 +++ .../web-console-sidebar/controller.ts | 30 ++++ .../web-console-sidebar/index.ts} | 20 +-- .../components/web-console-sidebar/style.scss | 36 ++++ .../web-console-sidebar/template.pug} | 4 +- .../component.ts | 28 +++ .../controller.ts | 24 +++ .../web-console-sidebar-navigation/style.scss | 88 +++++++++ .../template.pug} | 35 ++-- modules/web-console/frontend/app/data/i18n.js | 2 +- modules/web-console/frontend/app/index.ts | 0 .../app/modules/branding/branding.module.js | 10 +- .../app/modules/branding/branding.service.js | 4 - .../frontend/app/modules/demo/Demo.module.js | 28 --- .../app/modules/navbar/navbar.module.js | 9 +- .../frontend/app/modules/user/Auth.service.ts | 4 +- .../frontend/app/services/store.ts | 75 ++++++++ .../frontend/app/store/actions/ui.ts | 36 ++++ .../actions/user.ts} | 16 +- .../effects/ui.ts} | 31 ++-- .../index.ts} | 54 +++--- .../web-console/frontend/app/store/ofType.ts | 26 +++ .../frontend/app/store/reducers/ui.ts | 50 ++++++ .../frontend/app/store/reduxDebug.ts | 45 +++++ .../selectors/ui.ts} | 30 ++-- .../web-console/frontend/app/types/index.ts | 30 ++++ .../public/images/icons/cluster.icon.svg | 10 ++ .../frontend/public/images/icons/index.js | 3 + .../public/images/icons/menu.icon.svg | 7 + .../frontend/public/images/icons/sql.icon.svg | 3 + .../frontend/public/stylesheets/style.scss | 41 +++-- modules/web-console/frontend/views/base.pug | 11 +- .../frontend/views/includes/header-left.pug | 42 ----- 80 files changed, 1213 insertions(+), 631 deletions(-) rename modules/web-console/frontend/app/components/page-configure/{index.js => index.ts} (92%) rename modules/web-console/frontend/app/components/page-queries/{index.js => index.ts} (91%) create mode 100644 modules/web-console/frontend/app/components/permanent-notifications/component.ts create mode 100644 modules/web-console/frontend/app/components/permanent-notifications/controller.ts create mode 100644 modules/web-console/frontend/app/components/permanent-notifications/index.ts create mode 100644 modules/web-console/frontend/app/components/permanent-notifications/style.scss create mode 100644 modules/web-console/frontend/app/components/permanent-notifications/template.pug create mode 100644 modules/web-console/frontend/app/components/web-console-footer/controller.ts rename modules/web-console/frontend/app/components/web-console-header/{component.js => component.ts} (66%) rename modules/web-console/frontend/app/components/web-console-header/components/{web-console-header-extension/component.js => demo-mode-button/component.ts} (87%) create mode 100644 modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/controller.ts rename modules/web-console/frontend/app/components/{web-console-footer/components/web-console-footer-links => web-console-header/components/demo-mode-button}/template.pug (90%) rename modules/web-console/frontend/app/components/{web-console-footer/components/web-console-footer-links/component.js => web-console-header/components/user-menu/component.ts} (92%) rename modules/web-console/frontend/app/{modules/navbar/userbar.directive.js => components/web-console-header/components/user-menu/controller.ts} (50%) rename modules/web-console/frontend/app/components/{web-console-footer/components/web-console-footer-links => web-console-header/components/user-menu}/style.scss (76%) rename modules/web-console/frontend/app/{modules/branding/powered-by-apache.pug => components/web-console-header/components/user-menu/template.pug} (72%) create mode 100644 modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/component.ts create mode 100644 modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/controller.ts rename modules/web-console/frontend/app/{modules/branding/footer.directive.js => components/web-console-header/components/web-console-header-content/style.scss} (51%) rename modules/web-console/frontend/app/components/web-console-header/components/{web-console-header-extension => web-console-header-content}/template.pug (60%) create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/component.ts create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/controller.ts rename modules/web-console/frontend/app/{modules/navbar/navbar.directive.js => components/web-console-sidebar/index.ts} (72%) create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/style.scss rename modules/web-console/frontend/app/{modules/branding/header-logo.pug => components/web-console-sidebar/template.pug} (83%) create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/component.ts create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/controller.ts create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss rename modules/web-console/frontend/{views/includes/header-right.pug => app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug} (52%) create mode 100644 modules/web-console/frontend/app/index.ts create mode 100644 modules/web-console/frontend/app/services/store.ts create mode 100644 modules/web-console/frontend/app/store/actions/ui.ts rename modules/web-console/frontend/app/{modules/navbar/Navbar.provider.js => store/actions/user.ts} (80%) rename modules/web-console/frontend/app/{modules/branding/header-logo.directive.js => store/effects/ui.ts} (61%) rename modules/web-console/frontend/app/{modules/branding/header-title.directive.js => store/index.ts} (54%) create mode 100644 modules/web-console/frontend/app/store/ofType.ts create mode 100644 modules/web-console/frontend/app/store/reducers/ui.ts create mode 100644 modules/web-console/frontend/app/store/reduxDebug.ts rename modules/web-console/frontend/app/{modules/branding/powered-by-apache.directive.js => store/selectors/ui.ts} (62%) create mode 100644 modules/web-console/frontend/public/images/icons/cluster.icon.svg create mode 100644 modules/web-console/frontend/public/images/icons/menu.icon.svg create mode 100644 modules/web-console/frontend/public/images/icons/sql.icon.svg delete mode 100644 modules/web-console/frontend/views/includes/header-left.pug diff --git a/modules/web-console/frontend/app/app.config.js b/modules/web-console/frontend/app/app.config.js index 88bffee7ee746..04c02ea02db20 100644 --- a/modules/web-console/frontend/app/app.config.js +++ b/modules/web-console/frontend/app/app.config.js @@ -22,6 +22,7 @@ import isNil from 'lodash/isNil'; import isEmpty from 'lodash/isEmpty'; import mixin from 'lodash/mixin'; +import {user as userAction, register as registerStore} from './store'; const nonNil = negate(isNil); const nonEmpty = negate(isEmpty); @@ -36,6 +37,8 @@ import validationTemplateUrl from 'views/templates/validation-error.tpl.pug'; const igniteConsoleCfg = angular.module('ignite-console.config', ['ngAnimate', 'mgcrea.ngStrap']); +igniteConsoleCfg.run(registerStore); + // Configure AngularJS animation: do not animate fa-spin. igniteConsoleCfg.config(['$animateProvider', ($animateProvider) => { $animateProvider.classNameFilter(/^((?!(fa-spin|ng-animate-disabled)).)*$/); @@ -133,3 +136,7 @@ igniteConsoleCfg.directive('uiGridSelection', function() { } }; }); + +igniteConsoleCfg.run(['$rootScope', 'Store', ($root, store) => { + $root.$on('user', (event, user) => store.dispatch(userAction({...user}))); +}]); diff --git a/modules/web-console/frontend/app/app.js b/modules/web-console/frontend/app/app.js index 2dd2733fc5689..e1cbdbb32bcf4 100644 --- a/modules/web-console/frontend/app/app.js +++ b/modules/web-console/frontend/app/app.js @@ -96,6 +96,7 @@ import {CSV} from './services/CSV'; import {$exceptionHandler} from './services/exceptionHandler'; import IGFSs from './services/IGFSs'; import Models from './services/Models'; +import {Store} from './services/store'; import AngularStrapTooltip from './services/AngularStrapTooltip.decorator'; import AngularStrapSelect from './services/AngularStrapSelect.decorator'; @@ -159,6 +160,8 @@ import pageSignup from './components/page-signup'; import pageSignin from './components/page-signin'; import pageForgotPassword from './components/page-forgot-password'; import formSignup from './components/form-signup'; +import sidebar from './components/web-console-sidebar'; +import permanentNotifications from './components/permanent-notifications'; import igniteServices from './services'; @@ -266,7 +269,9 @@ export default angular.module('ignite-console', [ progressLine.name, formField.name, formSignup.name, - timedRedirection.name + timedRedirection.name, + sidebar.name, + permanentNotifications.name ]) .service('$exceptionHandler', $exceptionHandler) // Directives. @@ -314,6 +319,7 @@ export default angular.module('ignite-console', [ .service('CSV', CSV) .service('IGFSs', IGFSs) .service('Models', Models) +.service('Store', Store) // Filters. .filter('byName', byName) .filter('bytes', bytes) diff --git a/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss b/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss index 3b2d202527ed7..e46e382a44c9c 100644 --- a/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss +++ b/modules/web-console/frontend/app/components/connected-clusters-badge/style.scss @@ -18,26 +18,26 @@ connected-clusters { @import "./../../../public/stylesheets/variables.scss"; - div { - position: absolute; - top: 0; - right: 30px; + height: 100%; + display: flex; - display: flex; - align-items: center; - padding: 3px 10px; - - cursor: pointer; - color: white; - font-size: 12px; - line-height: 12px; + .connected-cluster-badge__count { + color: $ignite-brand-success; + margin-left: 5px; + } - background-color: $text-color; + button { + height: 100%; + width: 100%; + background: none !important; + border: none !important; + margin: 0 !important; + padding: 0 !important; + outline: none !important; - border-radius: 0 0 4px 4px; + display: flex; + align-items: center; - [ignite-icon] { - margin-right: 6px; - } + font-size: 14px; } } diff --git a/modules/web-console/frontend/app/components/connected-clusters-badge/template.pug b/modules/web-console/frontend/app/components/connected-clusters-badge/template.pug index 49224e5c778c5..dfb4bd9ccf51b 100644 --- a/modules/web-console/frontend/app/components/connected-clusters-badge/template.pug +++ b/modules/web-console/frontend/app/components/connected-clusters-badge/template.pug @@ -14,6 +14,5 @@ See the License for the specific language governing permissions and limitations under the License. -div(ng-click='$ctrl.show()') - svg(ignite-icon='connectedClusters') - | Connected clusters: {{ $ctrl.connectedClusters }} +button(type='button' ng-click='$ctrl.show()') + | My Connected Clusters: {{ $ctrl.connectedClusters }} diff --git a/modules/web-console/frontend/app/components/page-configure/index.js b/modules/web-console/frontend/app/components/page-configure/index.ts similarity index 92% rename from modules/web-console/frontend/app/components/page-configure/index.js rename to modules/web-console/frontend/app/components/page-configure/index.ts index 531b46cf679ac..f7b21a09ebdaa 100644 --- a/modules/web-console/frontend/app/components/page-configure/index.js +++ b/modules/web-console/frontend/app/components/page-configure/index.ts @@ -54,6 +54,8 @@ import 'rxjs/add/operator/skip'; import {Observable} from 'rxjs/Observable'; +import {navigationMenuItem, AppStore} from '../../store'; + Observable.prototype.debug = function(l) { return this.do((v) => console.log(l, v), (e) => console.error(l, e), () => console.log(l, 'completed')); }; @@ -115,22 +117,9 @@ export default angular DefaultState.setRedirectTo(() => 'base.configuration.overview'); }]) .run(registerActivitiesHook) - .run(['ConfigEffects', 'ConfigureState', '$uiRouter', (ConfigEffects, ConfigureState, $uiRouter) => { + .run(['ConfigEffects', 'ConfigureState', '$uiRouter', 'Store', (ConfigEffects, ConfigureState, $uiRouter, store: AppStore) => { $uiRouter.plugin(UIRouterRx); - if (devTools) { - devTools.subscribe((e) => { - if (e.type === 'DISPATCH' && e.state) ConfigureState.actions$.next(e); - }); - - ConfigureState.actions$ - .filter((e) => e.type !== 'DISPATCH') - .withLatestFrom(ConfigureState.state$.skip(1)) - .subscribe(([action, state]) => devTools.send(action, state)); - - ConfigureState.addReducer(reduxDevtoolsReducer); - } - ConfigureState.addReducer(refsReducer({ models: {at: 'domains', store: 'caches'}, caches: {at: 'caches', store: 'models'} @@ -176,6 +165,14 @@ export default angular .do((a) => ConfigureState.dispatchAction(a)) .subscribe(); ConfigEffects.connect(); + + store.dispatch(navigationMenuItem({ + activeSref: 'base.configuration.**', + icon: 'cluster', + label: 'Configuration', + order: 1, + sref: 'base.configuration.overview' + })); }]) .component('pageConfigure', component) .directive('pcIsInCollection', isInCollection) diff --git a/modules/web-console/frontend/app/components/page-configure/states.js b/modules/web-console/frontend/app/components/page-configure/states.js index 3ba5bb70f18bc..089730cfb9183 100644 --- a/modules/web-console/frontend/app/components/page-configure/states.js +++ b/modules/web-console/frontend/app/components/page-configure/states.js @@ -90,7 +90,7 @@ function registerStates($stateProvider) { }) .toPromise(); }, - failState: 'signin', + failState: 'base.signin', tfMetaTags: { title: 'Configuration' } diff --git a/modules/web-console/frontend/app/components/page-forgot-password/run.js b/modules/web-console/frontend/app/components/page-forgot-password/run.js index c7ee6a64a1d3f..76054897aa6e5 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/run.js +++ b/modules/web-console/frontend/app/components/page-forgot-password/run.js @@ -21,7 +21,7 @@ export function registerState($uiRouter) { /** @type {import("app/types").IIgniteNg1StateDeclaration} */ const state = { - name: 'forgotPassword', + name: 'base.forgotPassword', url: '/forgot-password', component: 'pageForgotPassword', unsaved: true, diff --git a/modules/web-console/frontend/app/components/page-forgot-password/template.pug b/modules/web-console/frontend/app/components/page-forgot-password/template.pug index 82e7898599873..e13aa3964b013 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/template.pug +++ b/modules/web-console/frontend/app/components/page-forgot-password/template.pug @@ -16,10 +16,6 @@ include /app/helpers/jade/mixins -web-console-header - web-console-header-left - ignite-header-title - .container--responsive.body-container section - const form = '$ctrl.form' @@ -40,10 +36,8 @@ web-console-header ) +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) footer.form-footer - a(ui-sref='signin') Back to sign in + a(ui-sref='base.signin') Back to sign in button.btn-ignite.btn-ignite--primary( tabindex='1' type='submit' ) Send it to me - -web-console-footer diff --git a/modules/web-console/frontend/app/components/page-landing/index.js b/modules/web-console/frontend/app/components/page-landing/index.js index 8f678f397c1e4..2bc7f5be4e3a2 100644 --- a/modules/web-console/frontend/app/components/page-landing/index.js +++ b/modules/web-console/frontend/app/components/page-landing/index.js @@ -42,7 +42,7 @@ export default angular .config(['$stateProvider', function($stateProvider) { // set up the states $stateProvider - .state('landing', { + .state('base.landing', { url: '/', template: '', redirectTo: (trans) => { diff --git a/modules/web-console/frontend/app/components/page-landing/style.scss b/modules/web-console/frontend/app/components/page-landing/style.scss index a92206ba27ec6..46cd2e5f29f4d 100644 --- a/modules/web-console/frontend/app/components/page-landing/style.scss +++ b/modules/web-console/frontend/app/components/page-landing/style.scss @@ -26,6 +26,11 @@ page-landing { font-family: Roboto; + display: block; + + margin-left: -30px; + margin-right: -30px; + display: block; .btn-custom { @include custom_btn; diff --git a/modules/web-console/frontend/app/components/page-landing/template.pug b/modules/web-console/frontend/app/components/page-landing/template.pug index 0fc1f9c5ffb01..df1ae61dd6cc6 100644 --- a/modules/web-console/frontend/app/components/page-landing/template.pug +++ b/modules/web-console/frontend/app/components/page-landing/template.pug @@ -14,19 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. -web-console-header - web-console-header-left - ignite-header-title - web-console-header-right - a#signin_show.btn-ignite.btn-ignite--primary(ui-sref='signin') Sign In - section.intro-container-wrapper .container .col-lg-6.col-md-6.col-sm-6.col-xs-12.intro-content h1 Web Console h2 An Interactive Configuration Wizard and Management Tool for Apache™ Ignite® p It provides an interactive configuration wizard which helps you create and download configuration files and code snippets for your Apache Ignite projects. Additionally, the tool allows you to automatically load SQL metadata from any RDBMS, run SQL queries on your in-memory cache, and view execution plans, in-memory schema, and streaming charts. - a#signup_show.btn.btn-lg.btn-primary.btn-custom(ui-sref='signup') Sign Up + a#signup_show.btn.btn-lg.btn-primary.btn-custom(ui-sref='base.signup') Sign Up .col-lg-6.col-md-6.col-sm-6.col-xs-12 ui-carousel(slides='$ctrl.images' autoplay='true' slides-to-show='1' arrows='false') carousel-item @@ -61,6 +55,5 @@ section.features-container-wrapper h3 Manage the Web Console users p The Web Console allows you to have accounts with different roles. .align-center.text-center - a.btn.btn-lg.btn-primary.btn-custom(ui-sref='signup') Get Started + a.btn.btn-lg.btn-primary.btn-custom(ui-sref='base.signup') Get Started -web-console-footer diff --git a/modules/web-console/frontend/app/components/page-password-changed/controller.js b/modules/web-console/frontend/app/components/page-password-changed/controller.js index e3b0a035b5e14..412cf9b9922ba 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/controller.js +++ b/modules/web-console/frontend/app/components/page-password-changed/controller.js @@ -20,7 +20,7 @@ export default class { constructor($state, $timeout) { $timeout(() => { - $state.go('signin'); + $state.go('base.signin'); }, 10000); } } diff --git a/modules/web-console/frontend/app/components/page-password-changed/index.js b/modules/web-console/frontend/app/components/page-password-changed/index.js index 7c244beff0622..0f089f5898e44 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/index.js +++ b/modules/web-console/frontend/app/components/page-password-changed/index.js @@ -30,7 +30,7 @@ export default angular controller }) .config(['$stateProvider', ($stateProvider) => { - $stateProvider.state('password.send', { + $stateProvider.state('base.password-send', { url: '/changed', component: 'pagePasswordChanged', tfMetaTags: { diff --git a/modules/web-console/frontend/app/components/page-password-reset/controller.js b/modules/web-console/frontend/app/components/page-password-reset/controller.js index 53d6c69393a95..c36fd5df6f192 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/controller.js +++ b/modules/web-console/frontend/app/components/page-password-reset/controller.js @@ -39,13 +39,13 @@ export default class { resetPassword() { this.$http.post('/api/v1/password/reset', {token: this.ui.token, password: this.ui.password}) .then(() => { - this.$state.go('signin'); + this.$state.go('base.signin'); this.Messages.showInfo('Password successfully changed'); }) .catch(({data, state}) => { if (state === 503) - this.$state.go('signin'); + this.$state.go('base.signin'); this.Messages.showError(data); }); diff --git a/modules/web-console/frontend/app/components/page-password-reset/index.js b/modules/web-console/frontend/app/components/page-password-reset/index.js index e1042a6565c56..354f10d5dc6e7 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/index.js +++ b/modules/web-console/frontend/app/components/page-password-reset/index.js @@ -35,17 +35,17 @@ export default angular .config(['$stateProvider', ($stateProvider) => { // set up the states $stateProvider - .state('password', { + .state('base.password', { url: '/password', abstract: true, template: '' }) - .state('password.reset', { + .state('base.password.reset', { url: '/reset?{token}', component: 'pagePasswordReset', redirectTo: (trans) => { if (_.isEmpty(trans.params('to').token)) - return 'signin'; + return 'base.signin'; return true; }, diff --git a/modules/web-console/frontend/app/components/page-password-reset/template.pug b/modules/web-console/frontend/app/components/page-password-reset/template.pug index 1acfab82eb78f..48d881cefabb5 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/template.pug +++ b/modules/web-console/frontend/app/components/page-password-reset/template.pug @@ -16,10 +16,6 @@ include /app/helpers/jade/mixins -web-console-header - web-console-header-left - ignite-header-title - .container.body-container .row .main-content(ng-if='error') @@ -76,5 +72,3 @@ web-console-header ) svg.icon-left(ignite-icon='checkmark') | Save Changes - -web-console-footer diff --git a/modules/web-console/frontend/app/components/page-queries/index.js b/modules/web-console/frontend/app/components/page-queries/index.ts similarity index 91% rename from modules/web-console/frontend/app/components/page-queries/index.js rename to modules/web-console/frontend/app/components/page-queries/index.ts index ba9e5114dd0c8..2e25cb0dad337 100644 --- a/modules/web-console/frontend/app/components/page-queries/index.js +++ b/modules/web-console/frontend/app/components/page-queries/index.ts @@ -24,6 +24,7 @@ import queriesNotebook from './components/queries-notebook'; import pageQueriesCmp from './component'; import {default as ActivitiesData} from 'app/core/activities/Activities.data'; import Notebook from './notebook.service'; +import {navigationMenuItem, AppStore} from '../../store'; /** * @param {uirouter.UIRouter} $uiRouter @@ -42,6 +43,15 @@ export default angular.module('ignite-console.sql', [ queriesNotebooksList.name, queriesNotebook.name ]) + .run(['Store', (store: AppStore) => { + store.dispatch(navigationMenuItem({ + activeSref: 'base.sql.**', + icon: 'sql', + label: 'Queries', + order: 2, + sref: 'base.sql.tabs.notebooks-list' + })); + }]) .component('pageQueries', pageQueriesCmp) .component('pageQueriesSlot', { require: { diff --git a/modules/web-console/frontend/app/components/page-signin/run.ts b/modules/web-console/frontend/app/components/page-signin/run.ts index aa5647c44a363..dd6a4c757ccb0 100644 --- a/modules/web-console/frontend/app/components/page-signin/run.ts +++ b/modules/web-console/frontend/app/components/page-signin/run.ts @@ -21,11 +21,11 @@ import {IIgniteNg1StateDeclaration} from 'app/types'; export function registerState($uiRouter: UIRouter) { const state: IIgniteNg1StateDeclaration = { url: '/signin', - name: 'signin', + name: 'base.signin', component: 'pageSignin', unsaved: true, redirectTo: (trans) => { - const skipStates = new Set(['signup', 'forgotPassword', 'landing']); + const skipStates = new Set(['base.signup', 'base.forgotPassword', 'base.landing']); if (skipStates.has(trans.from().name)) return; diff --git a/modules/web-console/frontend/app/components/page-signin/template.pug b/modules/web-console/frontend/app/components/page-signin/template.pug index b31a9bdb69798..4f563f3cd492c 100644 --- a/modules/web-console/frontend/app/components/page-signin/template.pug +++ b/modules/web-console/frontend/app/components/page-signin/template.pug @@ -16,44 +16,38 @@ include /app/helpers/jade/mixins -web-console-header - web-console-header-left - ignite-header-title +section + -var form = '$ctrl.form' + h3 Sign In + form(name=form novalidate ng-submit='$ctrl.signin()') + +form-field__email({ + label: 'Email:', + model: '$ctrl.data.email', + name: '"email"', + placeholder: 'Input email', + required: true + })( + ng-model-options='{allowInvalid: true}' + autocomplete='email' + ignite-auto-focus + ) + +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) + +form-field__password({ + label: 'Password:', + model: '$ctrl.data.password', + name: '"password"', + placeholder: 'Input password', + required: true + })( + ng-model-options='{allowInvalid: true}' + autocomplete='current-password' + ) + +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) + footer.form-footer + a(ui-sref='base.forgotPassword({email: $ctrl.data.email})') Forgot password? + button.btn-ignite.btn-ignite--primary( + type='submit' + ) Sign In + footer.page-signin__no-account-message + | Don't have an account? #[a(ui-sref='base.signup') Get started] -.container--responsive.body-container - section - -var form = '$ctrl.form' - h3 Sign In - form(name=form novalidate ng-submit='$ctrl.signin()') - +form-field__email({ - label: 'Email:', - model: '$ctrl.data.email', - name: '"email"', - placeholder: 'Input email', - required: true - })( - ng-model-options='{allowInvalid: true}' - autocomplete='email' - ignite-auto-focus - ) - +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) - +form-field__password({ - label: 'Password:', - model: '$ctrl.data.password', - name: '"password"', - placeholder: 'Input password', - required: true - })( - ng-model-options='{allowInvalid: true}' - autocomplete='current-password' - ) - +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) - footer.form-footer - a(ui-sref='forgotPassword({email: $ctrl.data.email})') Forgot password? - button.btn-ignite.btn-ignite--primary( - type='submit' - ) Sign In - footer.page-signin__no-account-message - | Don't have an account? #[a(ui-sref='signup') Get started] - -web-console-footer diff --git a/modules/web-console/frontend/app/components/page-signup/run.js b/modules/web-console/frontend/app/components/page-signup/run.js index 1d04fa257714f..61635af73d2e4 100644 --- a/modules/web-console/frontend/app/components/page-signup/run.js +++ b/modules/web-console/frontend/app/components/page-signup/run.js @@ -21,7 +21,7 @@ export function registerState($uiRouter) { /** @type {import("app/types").IIgniteNg1StateDeclaration} */ const state = { - name: 'signup', + name: 'base.signup', url: '/signup', component: 'pageSignup', unsaved: true, diff --git a/modules/web-console/frontend/app/components/page-signup/template.pug b/modules/web-console/frontend/app/components/page-signup/template.pug index 5584dfcb67129..1857b7c4f7da9 100644 --- a/modules/web-console/frontend/app/components/page-signup/template.pug +++ b/modules/web-console/frontend/app/components/page-signup/template.pug @@ -16,10 +16,6 @@ include /app/helpers/jade/mixins -web-console-header - web-console-header-left - ignite-header-title - .container--responsive.body-container section h3 Don't Have An Account? @@ -34,6 +30,4 @@ web-console-header type='submit' ) Sign Up footer.page-signup__has-account-message - | Already have an account? #[a(ui-sref='signin') Sign in here] - -web-console-footer + | Already have an account? #[a(ui-sref='base.signin') Sign in here] diff --git a/modules/web-console/frontend/app/components/permanent-notifications/component.ts b/modules/web-console/frontend/app/components/permanent-notifications/component.ts new file mode 100644 index 0000000000000..e86d3e512713a --- /dev/null +++ b/modules/web-console/frontend/app/components/permanent-notifications/component.ts @@ -0,0 +1,25 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import template from './template.pug'; +import controller from './controller'; +import './style.scss'; + +export const component: ng.IComponentOptions = { + template, + controller +}; diff --git a/modules/web-console/frontend/app/components/permanent-notifications/controller.ts b/modules/web-console/frontend/app/components/permanent-notifications/controller.ts new file mode 100644 index 0000000000000..bf992074621bc --- /dev/null +++ b/modules/web-console/frontend/app/components/permanent-notifications/controller.ts @@ -0,0 +1,29 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export default class PermanentNotifications { + static $inject = ['UserNotifications', '$rootScope', 'DemoInfo', '$window'] + constructor( + private UserNotifications: unknown, + private $rootScope: ng.IRootScopeService, + private IgniteDemoMode: unknown, + private $window: ng.IWindowService + ) {} + closeDemo() { + this.$window.close(); + } +} diff --git a/modules/web-console/frontend/app/components/permanent-notifications/index.ts b/modules/web-console/frontend/app/components/permanent-notifications/index.ts new file mode 100644 index 0000000000000..33a9189132002 --- /dev/null +++ b/modules/web-console/frontend/app/components/permanent-notifications/index.ts @@ -0,0 +1,21 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {component} from './component'; + +export default angular.module('ignite-console.permanent-notifications', []) + .component('permanentNotifications', component); diff --git a/modules/web-console/frontend/app/components/permanent-notifications/style.scss b/modules/web-console/frontend/app/components/permanent-notifications/style.scss new file mode 100644 index 0000000000000..e40f21a359630 --- /dev/null +++ b/modules/web-console/frontend/app/components/permanent-notifications/style.scss @@ -0,0 +1,54 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +permanent-notifications { + display: block; + + @import "./../../../public/stylesheets/variables.scss"; + + .wch-notification { + line-height: 16px; + padding: 7px; + background: $brand-warning; + font-size: 16px; + text-align: center; + + a { + color: $brand-info; + } + + &+.wch-notification { + border-top: 1px solid darken($brand-warning, 15%); + } + } + + .wch-notification.wch-notification--demo { + color: white; + background: $ignite-brand-success; + border: none; + + a { + color: white; + text-decoration: underline; + + &:hover { + color: #ffab40; + text-decoration: none; + } + } + } +} \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/permanent-notifications/template.pug b/modules/web-console/frontend/app/components/permanent-notifications/template.pug new file mode 100644 index 0000000000000..6abe61181a512 --- /dev/null +++ b/modules/web-console/frontend/app/components/permanent-notifications/template.pug @@ -0,0 +1,23 @@ +//- + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +.wch-notification(ng-show='$ctrl.UserNotifications.isShown && $ctrl.UserNotifications.message' ng-bind-html='$ctrl.UserNotifications.message') + +.wch-notification(ng-show='$ctrl.$rootScope.user.becomeUsed') + | You are currently viewing user #[strong {{$ctrl.$rootScope.user.firstName}} {{$ctrl.$rootScope.user.lastName}}] as administrator. #[a(ng-click='$ctrl.$rootScope.revertIdentity()') Revert to your identity?] + +.wch-notification.wch-notification--demo(ng-if='$ctrl.$rootScope.IgniteDemoMode') + | You are now in #[b Demo Mode]. #[a(ng-click='$ctrl.closeDemo()') Close Demo?] diff --git a/modules/web-console/frontend/app/components/timed-redirection/style.scss b/modules/web-console/frontend/app/components/timed-redirection/style.scss index 5b0ecfd417f6c..487fa2d8d2486 100644 --- a/modules/web-console/frontend/app/components/timed-redirection/style.scss +++ b/modules/web-console/frontend/app/components/timed-redirection/style.scss @@ -23,6 +23,7 @@ timed-redirection { display: flex; flex-direction: column; flex: 1; + min-height: 100%; .timed-redirection--wrapper { text-align: center; diff --git a/modules/web-console/frontend/app/components/web-console-footer/component.js b/modules/web-console/frontend/app/components/web-console-footer/component.js index 40a1051a75820..bb2f7f7728cd0 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/component.js +++ b/modules/web-console/frontend/app/components/web-console-footer/component.js @@ -17,7 +17,9 @@ import template from './template.pug'; import './style.scss'; +import controller from './controller'; export default { - template + template, + controller }; diff --git a/modules/web-console/frontend/app/components/web-console-footer/controller.ts b/modules/web-console/frontend/app/components/web-console-footer/controller.ts new file mode 100644 index 0000000000000..0811748f075d6 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-footer/controller.ts @@ -0,0 +1,27 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {default as Version} from '../../services/Version.service'; + +export default class WebConsoleFooter { + static $inject = ['IgniteVersion', '$rootScope'] + constructor(private Version: Version, private $root: ng.IRootScopeService) {} + year = new Date().getFullYear() + get userIsAuthorized() { + return !!this.$root.user; + } +} diff --git a/modules/web-console/frontend/app/components/web-console-footer/index.js b/modules/web-console/frontend/app/components/web-console-footer/index.js index e26b60238a6bb..8796bb7b787be 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/index.js +++ b/modules/web-console/frontend/app/components/web-console-footer/index.js @@ -17,9 +17,7 @@ import angular from 'angular'; import component from './component'; -import componentLinks from './components/web-console-footer-links/component'; export default angular .module('ignite-console.web-console-footer', []) - .component('webConsoleFooter', component) - .component('webConsoleFooterLinks', componentLinks); + .component('webConsoleFooter', component); diff --git a/modules/web-console/frontend/app/components/web-console-footer/style.scss b/modules/web-console/frontend/app/components/web-console-footer/style.scss index f3de59fccedb5..5ea95150a3bcd 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/style.scss +++ b/modules/web-console/frontend/app/components/web-console-footer/style.scss @@ -17,45 +17,14 @@ web-console-footer { display: block; - color: #fafafa; - background: linear-gradient(to bottom, #5f5e5e, #393939); - font-family: Roboto; font-size: 12px; - font-weight: 300; - padding-top: 12px; - padding-bottom: 12px; - p { - margin-bottom: 0; + width: var(--width-wide); + display: flex; + flex-direction: column; + padding: 27px 18px 27px 27px; - &:first-of-type { - margin-bottom: 5px; - } - } - - .wcf-content { - display: flex; - flex-direction: row; - align-items: center; - - & > :nth-child(2) { - margin-left: auto; - } - } - - ignite-powered-by-apache { - & > a { - margin-left: 40px; - } - } - - a { - color: #ee8e89; - - &:hover, &.hover, - &:focus, &.focus { - color: #ee2b27; - text-decoration: none; - } + .#{&}__legal { + color: rgba(0, 0, 0, 0.54); } } diff --git a/modules/web-console/frontend/app/components/web-console-footer/template.pug b/modules/web-console/frontend/app/components/web-console-footer/template.pug index aa2812af64904..1cfdeecf33cc7 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/template.pug +++ b/modules/web-console/frontend/app/components/web-console-footer/template.pug @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. -.container--responsive.wcf-content - ignite-footer - web-console-footer-links(ng-if='$parent.user') - ignite-powered-by-apache \ No newline at end of file + +p Apache Ignite Web Console ({{$ctrl.Version.webConsole}}) +p © {{::$ctrl.year}} The Apache Software Foundation. +p.web-console-footer__legal Apache, Apache Ignite, the Apache feather and the Apache Ignite logo are trademarks of The Apache Software Foundation. + +a(href="/api/v1/downloads/agent" target="_self" ng-if='$ctrl.userIsAuthorized') Download Agent \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-header/component.js b/modules/web-console/frontend/app/components/web-console-header/component.ts similarity index 66% rename from modules/web-console/frontend/app/components/web-console-header/component.js rename to modules/web-console/frontend/app/components/web-console-header/component.ts index 02b30801e613b..91fd243289508 100644 --- a/modules/web-console/frontend/app/components/web-console-header/component.js +++ b/modules/web-console/frontend/app/components/web-console-header/component.ts @@ -17,37 +17,24 @@ import template from './template.pug'; import './style.scss'; +import {AppStore, toggleSidebar} from '../../store'; export default { template, controller: class { - static $inject = ['$rootScope', '$scope', '$state', 'IgniteBranding', 'UserNotifications']; + static $inject = ['$rootScope', '$scope', '$state', 'IgniteBranding', 'UserNotifications', 'Store']; - static connectedClustersUnvisibleStates = [ - '403', '404', 'signin' - ]; - - constructor($rootScope, $scope, $state, branding, UserNotifications) { + constructor($rootScope, $scope, $state, branding, UserNotifications, private store: AppStore) { Object.assign(this, {$rootScope, $scope, $state, branding, UserNotifications}); } - setConnectedClustersVisible() { - this.isConnectedClustersVisible = - !this.constructor.connectedClustersUnvisibleStates.some((state) => this.$state.includes(state)); + toggleSidebar() { + this.store.dispatch(toggleSidebar()); } isAuthorized() { return !!this.$rootScope.user; } - - $onInit() { - this.setConnectedClustersVisible(); - - this.$scope.$on('$stateChangeSuccess', () => this.setConnectedClustersVisible()); - } }, - transclude: { - slotLeft: '?webConsoleHeaderLeft', - slotRight: '?webConsoleHeaderRight' - } + transclude: true }; diff --git a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/component.js b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/component.ts similarity index 87% rename from modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/component.js rename to modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/component.ts index 1621adccceee4..e24b5512a5293 100644 --- a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/component.js +++ b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/component.ts @@ -16,7 +16,9 @@ */ import template from './template.pug'; +import controller from './controller'; -export default { - template +export const component: ng.IComponentOptions = { + template, + controller }; diff --git a/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/controller.ts b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/controller.ts new file mode 100644 index 0000000000000..1a1bd1e3e2670 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/controller.ts @@ -0,0 +1,46 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {StateService} from '@uirouter/angularjs'; +import {default as LegacyConfirmFactory} from 'app/services/Confirm.service'; + +export default class DemoModeButton { + static $inject = ['$rootScope', '$state', '$window', 'IgniteConfirm']; + constructor( + private $root: ng.IRootScopeService, + private $state: StateService, + private $window: ng.IWindowService, + private Confirm: ReturnType + ) {} + + private _openTab(stateName: string) { + this.$window.open(this.$state.href(stateName, {}), '_blank'); + } + + startDemo() { + if (!this.$root.user.demoCreated) + return this._openTab('demo.reset'); + + this.Confirm.confirm('Would you like to continue with previous demo session?', true, false) + .then((resume) => { + if (resume) + return this._openTab('demo.resume'); + + this._openTab('demo.reset'); + }); + } +} diff --git a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/template.pug b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/template.pug similarity index 90% rename from modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/template.pug rename to modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/template.pug index 5c0446786bb26..f566ac4c65fdd 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/template.pug @@ -14,4 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. -a(href="/api/v1/downloads/agent" target="_self") Download Agent + +button.btn-ignite.btn-ignite--success( + ng-click='$ctrl.startDemo()' +) Start Demo \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/component.js b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/component.ts similarity index 92% rename from modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/component.js rename to modules/web-console/frontend/app/components/web-console-header/components/user-menu/component.ts index 40a1051a75820..f6141d9baf2b7 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/component.js +++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/component.ts @@ -16,8 +16,10 @@ */ import template from './template.pug'; +import controller from './controller'; import './style.scss'; export default { - template + template, + controller }; diff --git a/modules/web-console/frontend/app/modules/navbar/userbar.directive.js b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/controller.ts similarity index 50% rename from modules/web-console/frontend/app/modules/navbar/userbar.directive.js rename to modules/web-console/frontend/app/components/web-console-header/components/user-menu/controller.ts index b636a34d82ff5..812d3b54ae3e9 100644 --- a/modules/web-console/frontend/app/modules/navbar/userbar.directive.js +++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/controller.ts @@ -15,45 +15,39 @@ * limitations under the License. */ -/** - * @param {ng.IRootScopeService} $root - * @param {unknown} IgniteUserbar - * @param {unknown} AclService - */ -function controller($root, IgniteUserbar, AclService) { - const ctrl = this; - - this.$onInit = () => { - ctrl.items = [ +export default class UserMenu { + static $inject = ['$rootScope', 'IgniteUserbar', 'AclService', '$state', 'gettingStarted'] + constructor( + private $root: ng.IRootScopeService, + private IgniteUserbar: any, + private AclService: any, + private $state: any, + private gettingStarted: any + ) {} + $onInit() { + this.items = [ {text: 'Profile', sref: 'base.settings.profile'}, - {text: 'Getting started', click: 'gettingStarted.tryShow(true)'} + {text: 'Getting started', click: '$ctrl.gettingStarted.tryShow(true)'} ]; const _rebuildSettings = () => { - ctrl.items.splice(2); + this.items.splice(2); - if (AclService.can('admin_page')) - ctrl.items.push({text: 'Admin panel', sref: 'base.settings.admin'}); + if (this.AclService.can('admin_page')) + this.items.push({text: 'Admin panel', sref: 'base.settings.admin'}); - ctrl.items.push(...IgniteUserbar); + this.items.push(...this.IgniteUserbar); - if (AclService.can('logout')) - ctrl.items.push({text: 'Log out', sref: 'logout'}); + if (this.AclService.can('logout')) + this.items.push({text: 'Log out', sref: 'logout'}); }; - if ($root.user) - _rebuildSettings(null, $root.user); - - $root.$on('user', _rebuildSettings); - }; -} - -controller.$inject = ['$rootScope', 'IgniteUserbar', 'AclService']; + if (this.$root.user) + _rebuildSettings(null, this.$root.user); -export default function() { - return { - restrict: 'A', - controller, - controllerAs: 'userbar' - }; + this.$root.$on('user', _rebuildSettings); + } + get user() { + return this.$root.user; + } } diff --git a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/style.scss b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/style.scss similarity index 76% rename from modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/style.scss rename to modules/web-console/frontend/app/components/web-console-header/components/user-menu/style.scss index 47b88af82c7c3..898047b52a9ea 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/style.scss +++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/style.scss @@ -1,4 +1,4 @@ -/*! +/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. @@ -15,17 +15,14 @@ * limitations under the License. */ -web-console-footer-links { - margin-left: auto; +user-menu { + --active-link-color: #ee2b27; + font-size: 14px; - a + a { - margin-left: 5px; - - &:before { - content: '|'; - display: inline-block; - margin-right: 5px; - color: #fafafa; - } + &>.active { + color: var(--active-link-color) + } + .caret { + margin-left: 8px; } -} +} \ No newline at end of file diff --git a/modules/web-console/frontend/app/modules/branding/powered-by-apache.pug b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/template.pug similarity index 72% rename from modules/web-console/frontend/app/modules/branding/powered-by-apache.pug rename to modules/web-console/frontend/app/components/web-console-header/components/user-menu/template.pug index 6031235968c8a..e946c78a9b9ba 100644 --- a/modules/web-console/frontend/app/modules/branding/powered-by-apache.pug +++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/template.pug @@ -14,5 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. -a(ng-if='poweredBy.show' href='//ignite.apache.org' target='_blank') - img(ng-src='/images/pb-ignite.png') +div( + ng-class='{active: $ctrl.$state.includes("base.settings")}' + ng-click='$event.stopPropagation()' + bs-dropdown='$ctrl.items' + data-placement='bottom-right' + data-trigger='hover focus' + data-container='self' +) + span {{$ctrl.user.firstName}} {{$ctrl.user.lastName}} + span.caret \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/component.ts b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/component.ts new file mode 100644 index 0000000000000..e86d3e512713a --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/component.ts @@ -0,0 +1,25 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import template from './template.pug'; +import controller from './controller'; +import './style.scss'; + +export const component: ng.IComponentOptions = { + template, + controller +}; diff --git a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/controller.ts b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/controller.ts new file mode 100644 index 0000000000000..9dcf093fce75b --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/controller.ts @@ -0,0 +1,53 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {StateService} from '@uirouter/angularjs'; + +export default class WebConsoleHeaderContent { + static $inject = ['$rootScope', '$state'] + constructor( + private $rootScope: ng.IRootScopeService, + private $state: StateService + ) {} + + static connectedClusterInvisibleStates = [ + 'base.403', 'base.404', 'base.signin' + ]; + + get showConnectedClusters(): boolean { + return this.$rootScope.user && + !this.$rootScope.IgniteDemoMode && + !this.constructor.connectedClusterInvisibleStates.some((state) => this.$state.includes(state)) && + !this.$rootScope.user.becomeUsed; + } + + get showTitle(): boolean { + return ['base.signin', 'base.signup', 'base.landing'].some((name) => this.$state.includes(name)); + } + + get showUserMenu(): boolean { + return !!this.$rootScope.user; + } + + get showDemoModeButton(): boolean { + return this.$rootScope.user && !this.$rootScope.user.becomeUsed && !this.$rootScope.IgniteDemoMode; + } + + get showSignInButton(): boolean { + return this.$state.is('base.landing'); + } +} diff --git a/modules/web-console/frontend/app/modules/branding/footer.directive.js b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss similarity index 51% rename from modules/web-console/frontend/app/modules/branding/footer.directive.js rename to modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss index 3c0bb83e740f5..65111858a41db 100644 --- a/modules/web-console/frontend/app/modules/branding/footer.directive.js +++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss @@ -15,25 +15,39 @@ * limitations under the License. */ -const template = '
'; +web-console-header-content { + display: flex; + flex: 1; -/** - * @param {import('./branding.service').default} branding - */ -export default function factory(branding) { - function controller() { - const ctrl = this; + .web-console-header-content__title { + display: flex; + align-items: center; + margin-left: 80px; + font-size: 1.4em; + } - ctrl.html = branding.footerHtml; + .web-console-header-content__right { + margin-left: auto; + display: flex; } - return { - restrict: 'E', - template, - controller, - controllerAs: 'footer', - replace: true - }; -} + .web-console-header-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 0 20px; + border-left: 1px solid #dddddd; + height: 100%; + } -factory.$inject = ['IgniteBranding']; + .web-console-header-content__sign-in { + align-self: center; + margin-right: 30px; + + .btn-ignite { + font-weight: 500; + padding: 10px 25px !important; + } + } +} \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/template.pug b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug similarity index 60% rename from modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/template.pug rename to modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug index 0545db18b96a7..cca76a919d775 100644 --- a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug @@ -13,3 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + +span.web-console-header-content__title(ng-if='$ctrl.showTitle') Management console for Apache Ignite + +.web-console-header-content__right + .web-console-header-item(ng-if='$ctrl.showConnectedClusters') + connected-clusters + .web-console-header-item(ng-if='$ctrl.showDemoModeButton') + demo-mode-button + .web-console-header-content__sign-in(ng-if='$ctrl.showSignInButton') + .btn-ignite.btn-ignite--primary(ui-sref='base.signin') Sign In + +.web-console-header-item(ng-if='$ctrl.showUserMenu') + user-menu \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-header/index.js b/modules/web-console/frontend/app/components/web-console-header/index.js index 3fc5c66579fc1..2a106d47f8129 100644 --- a/modules/web-console/frontend/app/components/web-console-header/index.js +++ b/modules/web-console/frontend/app/components/web-console-header/index.js @@ -17,9 +17,13 @@ import angular from 'angular'; import component from './component'; -import componentExtension from './components/web-console-header-extension/component'; +import userMenu from './components/user-menu/component'; +import {component as content} from './components/web-console-header-content/component'; +import {component as demo} from './components/demo-mode-button/component'; export default angular .module('ignite-console.web-console-header', []) .component('webConsoleHeader', component) - .component('webConsoleHeaderExtension', componentExtension); + .component('webConsoleHeaderContent', content) + .component('userMenu', userMenu) + .component('demoModeButton', demo); diff --git a/modules/web-console/frontend/app/components/web-console-header/style.scss b/modules/web-console/frontend/app/components/web-console-header/style.scss index 4edf6fd5e9318..9b29214259bd0 100644 --- a/modules/web-console/frontend/app/components/web-console-header/style.scss +++ b/modules/web-console/frontend/app/components/web-console-header/style.scss @@ -21,13 +21,24 @@ web-console-header { $nav-item-margin: 30px; $bottom-border-width: 4px; - display: block; - min-height: 85px; + display: flex; + flex-direction: row; + align-items: center; + height: 62px; font-family: Roboto; font-size: 16px; border-bottom: $bottom-border-width solid red; background: white; position: relative; + padding-left: 16px; + + &>ng-transclude { + display: flex; + flex-direction: row; + justify-content: flex-end; + height: 100%; + flex: 1; + } &:after { // Shows header shadow over absolutely positioned child content, @@ -39,6 +50,7 @@ web-console-header { position: absolute; overflow: hidden; bottom: -4px; + pointer-events: none; } .wch-slot { @@ -59,154 +71,23 @@ web-console-header { } } - .wch-content { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - padding: 18px 30px; - position: relative; - height: 81px; - } - .wch-logo { height: 40px; } - .wch-nav-item, - .wch-nav-item > a { - cursor: pointer; - white-space: nowrap; - - &, &.active { - font-size: 16px; - font-weight: normal; - text-decoration: none; - } - - $color-default: $text-color; - $color-hover: $brand-primary; - $color-active: $brand-primary; - - &, a { - color: $color-default; - text-decoration: none; - } - - &, ul { - margin: 0; - list-style: none; - -webkit-padding-start: 0; - } - - &:hover { - color: $color-hover; - } - - &:focus, :focus, - &.active, .active { - color: $color-active; - text-decoration: none; - } - - &[disabled] { - opacity: 0.5; - cursor: default; - } - - .caret { - margin-left: 4px; - } - - &:not(:last-child) { - margin-right: $nav-item-margin; - } - - .dropdown-menu { - a { - &:hover, &:focus { - color: inherit; - } - } - li.active a { - color: inherit; - } - } - - .user-name-wrapper { - display: flex; - align-items: center; - - & > span { - max-width: 180px; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - .wch-demo-toggle { - margin-right: 10px; - - // When in demo mode and clusters are hidden - &:nth-last-child(2) { - margin-right: $nav-item-margin; - } - } - - .wch-notification { - line-height: 16px; - padding: 7px; - background: $brand-warning; - font-size: 16px; - text-align: center; - - a { - color: $brand-info; - } - - &+.wch-notification { - border-top: 1px solid darken($brand-warning, 15%); - } - } - - .wch-notification.wch-notification--demo { - z-index: 10000000; - position: fixed; - top: 0; - width: 100%; - - color: white; - background: $ignite-brand-success; - border: none; - - box-shadow: 0 0 15px #008eff; - animation: pulse 2s infinite; - - a { - color: white; - text-decoration: underline; - - &:hover { - color: #ffab40; - text-decoration: none; - } - } - } - .wch-additional-nav-items { display: flex; } -} -@keyframes pulse { - 0% { - box-shadow: 0 1px 2px #008eff; - } - 50% { - box-shadow: 0 1px 15px #008eff; - } - 100% { - box-shadow: 0 1px 2px #008eff; + .web-console-header__togle-menu-button { + width: 40px; + height: 40px; + background: none !important; + border: none !important; + margin: 0 !important; + padding: 0 !important; + outline: none !important; + color: rgba(0, 0, 0, 0.54); + margin-right: 5px; } } diff --git a/modules/web-console/frontend/app/components/web-console-header/template.pug b/modules/web-console/frontend/app/components/web-console-header/template.pug index 1d25b13289010..21215c0516e44 100644 --- a/modules/web-console/frontend/app/components/web-console-header/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/template.pug @@ -14,23 +14,17 @@ See the License for the specific language governing permissions and limitations under the License. -.wch-notification(ng-show='$ctrl.UserNotifications.isShown && $ctrl.UserNotifications.message' ng-bind-html='$ctrl.UserNotifications.message') +button.web-console-header__togle-menu-button( + type='button' + title='Toggle menu' + ng-click='$ctrl.toggleSidebar()' +) + svg(ignite-icon='menu') -.wch-notification(ng-show='$root.user.becomeUsed') - | You are currently viewing user #[strong {{$root.user.firstName}} {{$root.user.lastName}}] as administrator. #[a(ng-click='$root.revertIdentity()') Revert to your identity?] +a(ui-sref='default-state' ng-if='$ctrl.isAuthorized()').wch-logo-anchor + img.wch-logo(src='/images/ignite-logo.svg') -.wch-notification.wch-notification--demo(ng-if='$root.IgniteDemoMode') - div(ng-controller='demoController') - | You are now in #[b Demo Mode]. #[a(ng-click='closeDemo();') Close Demo?] +a(ui-sref='base.landing' ng-if='!$ctrl.isAuthorized()').wch-logo-anchor + img.wch-logo(src='/images/ignite-logo.svg') -.wch-content - connected-clusters(ng-if='$ctrl.$rootScope.user && !$ctrl.$rootScope.IgniteDemoMode && $ctrl.isConnectedClustersVisible && !$root.user.becomeUsed') - - a(ui-sref='default-state' ng-if='$ctrl.isAuthorized()').wch-logo-anchor - img.wch-logo(ng-src='{{::$ctrl.branding.headerLogo}}') - - a(ui-sref='landing' ng-if='!$ctrl.isAuthorized()').wch-logo-anchor - img.wch-logo(ng-src='{{::$ctrl.branding.headerLogo}}') - - .wch-slot.wch-slot-left(ng-transclude='slotLeft') - .wch-slot.wch-slot-right(ng-transclude='slotRight') +ng-transclude diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/component.ts b/modules/web-console/frontend/app/components/web-console-sidebar/component.ts new file mode 100644 index 0000000000000..e86d3e512713a --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/component.ts @@ -0,0 +1,25 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import template from './template.pug'; +import controller from './controller'; +import './style.scss'; + +export const component: ng.IComponentOptions = { + template, + controller +}; diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/controller.ts b/modules/web-console/frontend/app/components/web-console-sidebar/controller.ts new file mode 100644 index 0000000000000..bdf606b7bd481 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/controller.ts @@ -0,0 +1,30 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {AppStore, selectSidebarOpened} from '../../store'; + +export default class WebConsoleSidebar { + static $inject = ['$rootScope', 'Store'] + constructor( + private $rootScope: ng.IRootScopeService, + private store: AppStore + ) {} + sidebarOpened$ = this.store.state$.pipe(selectSidebarOpened()) + get showNavigation(): boolean { + return !!this.$rootScope.user; + } +} diff --git a/modules/web-console/frontend/app/modules/navbar/navbar.directive.js b/modules/web-console/frontend/app/components/web-console-sidebar/index.ts similarity index 72% rename from modules/web-console/frontend/app/modules/navbar/navbar.directive.js rename to modules/web-console/frontend/app/components/web-console-sidebar/index.ts index e400cf7d2f54a..e20bd3e946f23 100644 --- a/modules/web-console/frontend/app/modules/navbar/navbar.directive.js +++ b/modules/web-console/frontend/app/components/web-console-sidebar/index.ts @@ -15,18 +15,10 @@ * limitations under the License. */ -export default function factory(IgniteNavbar) { - function controller() { - const ctrl = this; +import template from './template.pug'; +import {component as nav} from './web-console-sidebar-navigation/component'; +import {component as sidebar} from './component'; - ctrl.items = IgniteNavbar; - } - - return { - restrict: 'A', - controller, - controllerAs: 'navbar' - }; -} - -factory.$inject = ['IgniteNavbar']; +export default angular.module('sidebar', []) + .component('webConsoleSidebarNavigation', nav) + .component('webConsoleSidebar', sidebar); diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss new file mode 100644 index 0000000000000..50b4d33de6ff6 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss @@ -0,0 +1,36 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +web-console-sidebar { + display: flex; + flex-direction: column; + background: white; + border-right: 1px #dddddd solid; + --width-narrow: 75px; + --width-wide: 280px; + + web-console-sidebar-navigation { + position: sticky; + top: var(--header-height); + } + + web-console-footer { + position: sticky; + bottom: 0; + margin-top: auto; + } +} \ No newline at end of file diff --git a/modules/web-console/frontend/app/modules/branding/header-logo.pug b/modules/web-console/frontend/app/components/web-console-sidebar/template.pug similarity index 83% rename from modules/web-console/frontend/app/modules/branding/header-logo.pug rename to modules/web-console/frontend/app/components/web-console-sidebar/template.pug index f0453d39da8ab..6b8efc703a6e3 100644 --- a/modules/web-console/frontend/app/modules/branding/header-logo.pug +++ b/modules/web-console/frontend/app/components/web-console-sidebar/template.pug @@ -14,5 +14,5 @@ See the License for the specific language governing permissions and limitations under the License. -a(ui-sref='signin') - img.navbar-brand(ng-src='{{logo.url}}') +web-console-sidebar-navigation(opened='$ctrl.sidebarOpened$|async:this' ng-if='$ctrl.showNavigation') +web-console-footer(ng-if='$ctrl.sidebarOpened$|async:this') \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/component.ts b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/component.ts new file mode 100644 index 0000000000000..4e4647f97605f --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/component.ts @@ -0,0 +1,28 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import './style.scss'; +import template from './template.pug'; +import controller from './controller'; + +export const component = { + controller, + template, + bindings: { + opened: '<' + } +}; diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/controller.ts b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/controller.ts new file mode 100644 index 0000000000000..8b5355a890782 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/controller.ts @@ -0,0 +1,24 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {AppStore, selectNavigationMenu} from '../../../store'; + +export default class WebConsoleSidebarNavigation { + static $inject = ['Store'] + constructor(private store: AppStore) {} + menu$ = this.store.state$.pipe(selectNavigationMenu()) +} diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss new file mode 100644 index 0000000000000..bdc9ab0ac7887 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -0,0 +1,88 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +web-console-sidebar-navigation { + display: flex; + flex-direction: column; + --active-link-color: #ee2b27; + padding-top: 14px; + + nav { + display: flex; + flex-direction: column; + list-style-type: none; + + &>li { + display: flex; + } + } + + .web-console-sidebar-navigation__link-narrow { + height: var(--width-narrow); + width: var(--width-narrow); + color: #757575; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + color: var(--active-link-color); + } + + &.web-console-sidebar-navigation__link-active { + color: var(--active-link-color); + position: relative; + + &:after { + content: ''; + display: block; + width: 2px; + right: -2px; + top: 0; + bottom: 0; + position: absolute; + background: var(--active-link-color); + } + } + + .web-console-sidebar-navigation__link-content { + display: none; + } + .web-console-sidebar-navigation__link-icon { + width: 20px; + } + } + .web-console-sidebar-navigation__link-wide { + color: #393939; + text-decoration: none !important; + line-height: 19px; + font-size: 16px; + padding: 10px 27px 11px; + width: var(--width-wide); + + &:hover { + color: var(--active-link-color); + } + &.web-console-sidebar-navigation__link-active { + color: white; + background: var(--active-link-color); + } + .web-console-sidebar-navigation__link-icon { + display: none; + } + } +} \ No newline at end of file diff --git a/modules/web-console/frontend/views/includes/header-right.pug b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug similarity index 52% rename from modules/web-console/frontend/views/includes/header-right.pug rename to modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug index d2d89aa616d57..a127efb2db6a8 100644 --- a/modules/web-console/frontend/views/includes/header-right.pug +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug @@ -14,22 +14,21 @@ See the License for the specific language governing permissions and limitations under the License. -.wch-demo-toggle(ng-if='!$root.user.becomeUsed' ng-controller='demoController') - button.btn-ignite.btn-ignite--success( - ng-if='!IgniteDemoMode' - ng-click='startDemo()' - ) Start Demo - -web-console-header-extension - -.wch-nav-item(ignite-userbar) - .user-name-wrapper( - ng-class='{active: $state.includes("base.settings")}' - ng-click='$event.stopPropagation()' - bs-dropdown='userbar.items' - data-placement='bottom-right' - data-trigger='hover focus' - data-container='self' +nav + li( + ng-repeat='item in $ctrl.menu$|async:this track by item.sref' + ng-if='!item.hidden' ) - span {{$root.user.firstName}} {{$root.user.lastName}} - span.caret + a.web-console-sidebar-navigation__link( + ui-sref='{{item.sref}}' + ui-sref-active=`{ + "web-console-sidebar-navigation__link-active": item.activeSref + }` + title='{{item.label|translate}}' + ng-class=`{ + 'web-console-sidebar-navigation__link-narrow': !$ctrl.opened, + 'web-console-sidebar-navigation__link-wide': $ctrl.opened + }` + ) + svg.web-console-sidebar-navigation__link-icon(ignite-icon='{{item.icon}}') + span.web-console-sidebar-navigation__link-content(translate='{{item.label}}') diff --git a/modules/web-console/frontend/app/data/i18n.js b/modules/web-console/frontend/app/data/i18n.js index 20f9d25b2f338..49173ecbb6fd8 100644 --- a/modules/web-console/frontend/app/data/i18n.js +++ b/modules/web-console/frontend/app/data/i18n.js @@ -59,7 +59,7 @@ export default { 'app.components.page-signin.m5': 'Input password', 'app.components.page-signin.m6': 'Forgot password?', 'app.components.page-signin.m7': 'Sign In', - 'app.components.page-signin.m8': 'Don\'t have an account? #[a(ui-sref=\'signup\') Get started]', + 'app.components.page-signin.m8': 'Don\'t have an account? #[a(ui-sref=\'base.signup\') Get started]', // app/components/page-signin/run.js 'app.components.page-signin.m9': 'Sign In', diff --git a/modules/web-console/frontend/app/index.ts b/modules/web-console/frontend/app/index.ts new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/modules/web-console/frontend/app/modules/branding/branding.module.js b/modules/web-console/frontend/app/modules/branding/branding.module.js index 20cd93e015f2b..8b23d04a8ef7a 100644 --- a/modules/web-console/frontend/app/modules/branding/branding.module.js +++ b/modules/web-console/frontend/app/modules/branding/branding.module.js @@ -19,12 +19,8 @@ import angular from 'angular'; import IgniteBranding from './branding.service'; -import igniteHeaderLogo from './header-logo.directive'; -import igniteHeaderTitle from './header-title.directive'; import igniteTerms from './terms.directive'; import igniteFeatures from './features.directive'; -import igniteFooter from './footer.directive'; -import ignitePoweredByApache from './powered-by-apache.directive'; angular .module('ignite-console.branding', [ @@ -41,9 +37,5 @@ angular tfMetaTagsProvider.setTitleSuffix(' – Apache Ignite Web Console'); }]) -.directive('ignitePoweredByApache', ignitePoweredByApache) -.directive('igniteHeaderLogo', igniteHeaderLogo) -.directive('igniteHeaderTitle', igniteHeaderTitle) .directive('igniteTerms', igniteTerms) -.directive('igniteFeatures', igniteFeatures) -.directive('igniteFooter', igniteFooter); +.directive('igniteFeatures', igniteFeatures); diff --git a/modules/web-console/frontend/app/modules/branding/branding.service.js b/modules/web-console/frontend/app/modules/branding/branding.service.js index 667dbfd0f6182..f184a4d2a0952 100644 --- a/modules/web-console/frontend/app/modules/branding/branding.service.js +++ b/modules/web-console/frontend/app/modules/branding/branding.service.js @@ -24,10 +24,6 @@ export default class { constructor(Version) { this.titleSuffix = ' - Apache Ignite Web Console'; - this.headerLogo = '/images/ignite-logo.svg'; - - this.headerText = 'Management console for Apache Ignite'; - this.showIgniteLogo = false; this.footerHtml = [ diff --git a/modules/web-console/frontend/app/modules/demo/Demo.module.js b/modules/web-console/frontend/app/modules/demo/Demo.module.js index 6c14e4a4de518..9416bca6627ea 100644 --- a/modules/web-console/frontend/app/modules/demo/Demo.module.js +++ b/modules/web-console/frontend/app/modules/demo/Demo.module.js @@ -71,34 +71,7 @@ function demoInterceptor(Demo) { demoInterceptor.$inject = ['Demo']; -/** - * @param {ng.IScope} $scope - * @param {import('@uirouter/angularjs').StateService} $state - * @param {ng.IWindowService} $window - * @param {ReturnType} Confirm - */ -function demoController($scope, $state, $window, Confirm) { - const _openTab = (stateName) => $window.open($state.href(stateName), '_blank'); - - $scope.startDemo = () => { - if (!$scope.user.demoCreated) - return _openTab('demo.reset'); - - Confirm.confirm('Would you like to continue with previous demo session?', true, false) - .then((resume) => { - if (resume) - return _openTab('demo.resume'); - - _openTab('demo.reset'); - }); - }; - - $scope.closeDemo = () => { - $window.close(); - }; -} -demoController.$inject = ['$scope', '$state', '$window', 'IgniteConfirm']; function igniteDemoInfoProvider() { const items = DEMO_INFO; @@ -211,6 +184,5 @@ angular .config(config) .provider('Demo', DemoProvider) .factory('demoInterceptor', demoInterceptor) -.controller('demoController', demoController) .provider('igniteDemoInfo', igniteDemoInfoProvider) .service('DemoInfo', DemoInfo); diff --git a/modules/web-console/frontend/app/modules/navbar/navbar.module.js b/modules/web-console/frontend/app/modules/navbar/navbar.module.js index 63588c7ac4509..e2a4f83bf0576 100644 --- a/modules/web-console/frontend/app/modules/navbar/navbar.module.js +++ b/modules/web-console/frontend/app/modules/navbar/navbar.module.js @@ -17,17 +17,10 @@ import angular from 'angular'; -import IgniteNavbar from './Navbar.provider'; import IgniteUserbar from './Userbar.provider'; -import igniteNavbar from './navbar.directive'; -import igniteUserbar from './userbar.directive'; - angular .module('ignite-console.navbar', [ ]) -.provider('IgniteNavbar', IgniteNavbar) -.provider('IgniteUserbar', IgniteUserbar) -.directive('igniteNavbar', igniteNavbar) -.directive('igniteUserbar', igniteUserbar); +.provider('IgniteUserbar', IgniteUserbar); diff --git a/modules/web-console/frontend/app/modules/user/Auth.service.ts b/modules/web-console/frontend/app/modules/user/Auth.service.ts index 55956ad990b47..7000ce074a8a1 100644 --- a/modules/web-console/frontend/app/modules/user/Auth.service.ts +++ b/modules/web-console/frontend/app/modules/user/Auth.service.ts @@ -54,7 +54,7 @@ export default class AuthService { } remindPassword(email: string) { - return this._auth('password/forgot', {email}).then(() => this.$state.go('password.send')); + return this._auth('password/forgot', {email}).then(() => this.$state.go('base.password.send')); } // TODO IGNITE-7994: Remove _auth and move API calls to corresponding methods @@ -83,7 +83,7 @@ export default class AuthService { .then(() => { this.User.clean(); - this.$window.open(this.$state.href('signin'), '_self'); + this.$window.open(this.$state.href('base.signin'), '_self'); }) .catch((e) => this.Messages.showError(e)); } diff --git a/modules/web-console/frontend/app/services/store.ts b/modules/web-console/frontend/app/services/store.ts new file mode 100644 index 0000000000000..19dde69e22ebd --- /dev/null +++ b/modules/web-console/frontend/app/services/store.ts @@ -0,0 +1,75 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; +import {Subject} from 'rxjs/Subject'; +import {scan, tap} from 'rxjs/operators'; +import {merge} from 'rxjs/observable/merge'; + +interface Reducer { + (state: State, action: Actions): State +} + +export class Store { + static $inject = ['$injector']; + + actions$: Subject + state$: BehaviorSubject + private _reducers: Array> + + constructor(private $injector: ng.auto.IInjectorService) { + this.$injector = $injector; + + this.actions$ = new Subject(); + this.state$ = new BehaviorSubject({}); + this.actions$.pipe( + scan((state, action) => this._reducers.reduce((state, reducer) => reducer(state, action), state), void 0), + tap((state) => this.state$.next(state)) + ).subscribe(); + this._reducers = [(state) => state]; + } + + dispatch(action: Actions) { + this.actions$.next(action); + } + + addReducer(path: T, reducer: Reducer): void + addReducer(reducer: Reducer): void + addReducer(...args) { + if (typeof args[0] === 'string') { + const [path, reducer] = args; + this._reducers = [ + ...this._reducers, + (state = {}, action) => { + const pathState = reducer(state[path], action); + // Don't update root state if child state changes + return state[path] !== pathState ? {...state, [path]: pathState} : state; + } + ]; + } else { + const [reducer] = args; + this._reducers = [...this._reducers, reducer]; + } + } + + addEffects(EffectsClass) { + const instance = this.$injector.instantiate(EffectsClass); + return merge( + ...Object.keys(instance).filter((k) => k.endsWith('Effect$')).map((k) => instance[k]), + ).pipe(tap((a) => this.dispatch(a))).subscribe(); + } +} diff --git a/modules/web-console/frontend/app/store/actions/ui.ts b/modules/web-console/frontend/app/store/actions/ui.ts new file mode 100644 index 0000000000000..25d9ba048b509 --- /dev/null +++ b/modules/web-console/frontend/app/store/actions/ui.ts @@ -0,0 +1,36 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {NavigationMenuItem} from '../../types'; + +export const TOGGLE_SIDEBAR: 'TOGGLE_SIDEBAR' = 'TOGGLE_SIDEBAR'; +export const toggleSidebar = () => ({type: TOGGLE_SIDEBAR}); + +export const NAVIGATION_MENU_ITEM: 'NAVIGATION_MENU_ITEM' = 'NAVIGATION_MENU_ITEM'; +export const navigationMenuItem = (menuItem: NavigationMenuItem) => ({type: NAVIGATION_MENU_ITEM, menuItem}); + +export const HIDE_NAVIGATION_MENU_ITEM: 'HIDE_NAVIGATION_MENU_ITEM' = 'HIDE_NAVIGATION_MENU_ITEM'; +export const hideNavigationMenuItem = (label: NavigationMenuItem['label']) => ({type: HIDE_NAVIGATION_MENU_ITEM, label}); + +export const SHOW_NAVIGATION_MENU_ITEM: 'SHOW_NAVIGATION_MENU_ITEM' = 'SHOW_NAVIGATION_MENU_ITEM'; +export const showNavigationMenuItem = (label: NavigationMenuItem['label']) => ({type: SHOW_NAVIGATION_MENU_ITEM, label}); + +export type UIActions = + | ReturnType + | ReturnType + | ReturnType + | ReturnType; diff --git a/modules/web-console/frontend/app/modules/navbar/Navbar.provider.js b/modules/web-console/frontend/app/store/actions/user.ts similarity index 80% rename from modules/web-console/frontend/app/modules/navbar/Navbar.provider.js rename to modules/web-console/frontend/app/store/actions/user.ts index 9b905d7285aa8..34c8d2062674c 100644 --- a/modules/web-console/frontend/app/modules/navbar/Navbar.provider.js +++ b/modules/web-console/frontend/app/store/actions/user.ts @@ -15,16 +15,10 @@ * limitations under the License. */ -export default function() { - const items = []; +import {User} from '../../types'; - this.push = function(data) { - items.push(data); - }; +export const USER: 'USER' = 'USER'; +export const user = (user: User) => ({type: USER, user}); - this.$get = function() { - return items; - }; - - return this; -} +export type UserActions = + | ReturnType; diff --git a/modules/web-console/frontend/app/modules/branding/header-logo.directive.js b/modules/web-console/frontend/app/store/effects/ui.ts similarity index 61% rename from modules/web-console/frontend/app/modules/branding/header-logo.directive.js rename to modules/web-console/frontend/app/store/effects/ui.ts index 60e5d5d68aec0..2a635d6e362c6 100644 --- a/modules/web-console/frontend/app/modules/branding/header-logo.directive.js +++ b/modules/web-console/frontend/app/store/effects/ui.ts @@ -15,25 +15,18 @@ * limitations under the License. */ -import template from './header-logo.pug'; +import {AppStore, USER, ofType, hideNavigationMenuItem, showNavigationMenuItem} from '..'; +import {map} from 'rxjs/operators'; -/** - * @param {import('./branding.service').default} branding - */ -export default function factory(branding) { - function controller() { - const ctrl = this; - - ctrl.url = branding.headerLogo; - } +export class UIEffects { + static $inject = ['Store'] + constructor(private store: AppStore) {} - return { - restrict: 'E', - template, - controller, - controllerAs: 'logo', - replace: true - }; + toggleQueriesNavItemEffect$ = this.store.actions$.pipe( + ofType(USER), + map((action) => { + const QUERY_LABEL = 'Queries'; + return action.user.becomeUsed ? hideNavigationMenuItem(QUERY_LABEL) : showNavigationMenuItem(QUERY_LABEL); + }) + ) } - -factory.$inject = ['IgniteBranding']; diff --git a/modules/web-console/frontend/app/modules/branding/header-title.directive.js b/modules/web-console/frontend/app/store/index.ts similarity index 54% rename from modules/web-console/frontend/app/modules/branding/header-title.directive.js rename to modules/web-console/frontend/app/store/index.ts index f67439c0a64da..fa4a878e1637d 100644 --- a/modules/web-console/frontend/app/modules/branding/header-title.directive.js +++ b/modules/web-console/frontend/app/store/index.ts @@ -15,30 +15,34 @@ * limitations under the License. */ -const template = ` -

{{::title.text}}

-`; - -/** - * @param {import('./branding.service').default} branding - */ -export default function factory(branding) { - function controller() { - const ctrl = this; - - ctrl.text = branding.headerText; - } - - return { - restrict: 'E', - template, - controller, - controllerAs: 'title', - replace: true - }; -} +import {Store} from '../services/store'; + +import {UIState, uiReducer} from './reducers/ui'; +import {UIActions} from './actions/ui'; +import {UIEffects} from './effects/ui'; + +import {UserActions} from './actions/user'; + +export * from './actions/ui'; +export * from './reducers/ui'; +export * from './selectors/ui'; -factory.$inject = ['IgniteBranding']; +export * from './actions/user'; +export {ofType} from './ofType'; + +export type State = { + ui: UIState, +}; + +export type Actions = + | UserActions + | UIActions; + +export type AppStore = Store; + +register.$inject = ['Store']; +export function register(store: AppStore) { + store.addReducer('ui', uiReducer); + store.addEffects(UIEffects); +} diff --git a/modules/web-console/frontend/app/store/ofType.ts b/modules/web-console/frontend/app/store/ofType.ts new file mode 100644 index 0000000000000..3d3bd8e3d73e2 --- /dev/null +++ b/modules/web-console/frontend/app/store/ofType.ts @@ -0,0 +1,26 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {OperatorFunction} from 'rxjs/interfaces'; +import {filter} from 'rxjs/operators'; + +type Action = {type: string}; +export function ofType>(type: T): OperatorFunction +export function ofType(type): OperatorFunction { + return filter((action: U): boolean => type === action.type); +} + diff --git a/modules/web-console/frontend/app/store/reducers/ui.ts b/modules/web-console/frontend/app/store/reducers/ui.ts new file mode 100644 index 0000000000000..6f2859de6a74b --- /dev/null +++ b/modules/web-console/frontend/app/store/reducers/ui.ts @@ -0,0 +1,50 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {NavigationMenu} from '../../types'; +import {UIActions, TOGGLE_SIDEBAR, NAVIGATION_MENU_ITEM, HIDE_NAVIGATION_MENU_ITEM, SHOW_NAVIGATION_MENU_ITEM} from '..'; + +export type UIState = { + sidebarOpened: boolean, + navigationMenu: NavigationMenu +}; + +const defaults: UIState = { + sidebarOpened: false, + navigationMenu: [] +}; + +export function uiReducer(state: UIState = defaults, action: UIActions): UIState { + switch (action.type) { + case TOGGLE_SIDEBAR: + return {...state, sidebarOpened: !state.sidebarOpened}; + case NAVIGATION_MENU_ITEM: + return {...state, navigationMenu: [...state.navigationMenu, action.menuItem]}; + case HIDE_NAVIGATION_MENU_ITEM: + return { + ...state, + navigationMenu: state.navigationMenu.map((i) => i.label === action.label ? {...i, hidden: true} : i) + }; + case SHOW_NAVIGATION_MENU_ITEM: + return { + ...state, + navigationMenu: state.navigationMenu.map((i) => i.label === action.label ? {...i, hidden: false} : i) + }; + default: + return state; + } +} diff --git a/modules/web-console/frontend/app/store/reduxDebug.ts b/modules/web-console/frontend/app/store/reduxDebug.ts new file mode 100644 index 0000000000000..d7b1474ec052a --- /dev/null +++ b/modules/web-console/frontend/app/store/reduxDebug.ts @@ -0,0 +1,45 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {reducer, devTools} from '../components/page-configure/reduxDevtoolsIntegration'; +import {AppStore} from '.'; +import {filter, withLatestFrom, tap} from 'rxjs/operators'; + +run.$inject = ['Store']; + +export function run(store: AppStore) { + if (devTools) { + devTools.subscribe((e) => { + if (e.type === 'DISPATCH' && e.state) store.dispatch(e); + }); + + const ignoredActions = new Set([ + ]); + + store.actions$.pipe( + filter((e) => e.type !== 'DISPATCH'), + withLatestFrom(store.state$.skip(1)), + tap(([action, state]) => { + if (ignoredActions.has(action.type)) return; + devTools.send(action, state); + console.log(action); + }) + ).subscribe(); + + store.addReducer(reducer); + } +} diff --git a/modules/web-console/frontend/app/modules/branding/powered-by-apache.directive.js b/modules/web-console/frontend/app/store/selectors/ui.ts similarity index 62% rename from modules/web-console/frontend/app/modules/branding/powered-by-apache.directive.js rename to modules/web-console/frontend/app/store/selectors/ui.ts index 3f8b3deb5bfc9..0bd2fa92a95c5 100644 --- a/modules/web-console/frontend/app/modules/branding/powered-by-apache.directive.js +++ b/modules/web-console/frontend/app/store/selectors/ui.ts @@ -15,25 +15,15 @@ * limitations under the License. */ -import template from './powered-by-apache.pug'; +import {State, AppStore} from '..'; +import {pluck, map} from 'rxjs/operators'; +import {pipe} from 'rxjs'; +import {memoize, orderBy} from 'lodash'; -/** - * @param {import('./branding.service').default} branding - */ -export default function factory(branding) { - function controller() { - const ctrl = this; - - ctrl.show = branding.showIgniteLogo; - } - - return { - restrict: 'E', - template, - controller, - controllerAs: 'poweredBy' - }; -} - -factory.$inject = ['IgniteBranding']; +const orderMenu = (menu: Array) => orderBy(menu, 'order'); +export const selectSidebarOpened = () => pluck('ui', 'sidebarOpened'); +export const selectNavigationMenu = () => pipe( + pluck('ui', 'navigationMenu'), + map(orderMenu) +); diff --git a/modules/web-console/frontend/app/types/index.ts b/modules/web-console/frontend/app/types/index.ts index df6a169d6a215..ad40c15308669 100644 --- a/modules/web-console/frontend/app/types/index.ts +++ b/modules/web-console/frontend/app/types/index.ts @@ -32,3 +32,33 @@ export interface IIgniteNg1StateDeclaration extends Ng1StateDeclaration { tfMetaTags: ITfMetatagsConfig, permission?: string } + +export type User = { + _id: string, + firstName: string, + lastName: string, + email: string, + phone?: string, + company: string, + country: string, + registered: string, + lastLogin: string, + lastActivity: string, + admin: boolean, + token: string, + resetPasswordToken: string, + // Assigned in UI + becomeUsed?: boolean +}; + +export type NavigationMenuItem = { + label: string, + icon: string, + order: number, + hidden?: boolean +} & ( + {sref: string, activeSref: string} | + {href: string} +); + +export type NavigationMenu = Array; diff --git a/modules/web-console/frontend/public/images/icons/cluster.icon.svg b/modules/web-console/frontend/public/images/icons/cluster.icon.svg new file mode 100644 index 0000000000000..757604970e52f --- /dev/null +++ b/modules/web-console/frontend/public/images/icons/cluster.icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/modules/web-console/frontend/public/images/icons/index.js b/modules/web-console/frontend/public/images/icons/index.js index 0951d32550bc8..544765d83e892 100644 --- a/modules/web-console/frontend/public/images/icons/index.js +++ b/modules/web-console/frontend/public/images/icons/index.js @@ -43,3 +43,6 @@ export {default as refresh} from './refresh.icon.svg'; export {default as search} from './search.icon.svg'; export {default as sort} from './sort.icon.svg'; export {default as structure} from './structure.icon.svg'; +export {default as cluster} from './cluster.icon.svg'; +export {default as sql} from './sql.icon.svg'; +export {default as menu} from './menu.icon.svg'; diff --git a/modules/web-console/frontend/public/images/icons/menu.icon.svg b/modules/web-console/frontend/public/images/icons/menu.icon.svg new file mode 100644 index 0000000000000..392d42ec945b1 --- /dev/null +++ b/modules/web-console/frontend/public/images/icons/menu.icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/modules/web-console/frontend/public/images/icons/sql.icon.svg b/modules/web-console/frontend/public/images/icons/sql.icon.svg new file mode 100644 index 0000000000000..bd54eeed2a0b8 --- /dev/null +++ b/modules/web-console/frontend/public/images/icons/sql.icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index ce14e45d6ec0a..7d8f1b4ee6fb1 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -255,17 +255,37 @@ body { flex-direction: column; } -body > .wrapper, - // Nested ui-view, like on password reset state -body > .wrapper > ui-view { - display: flex; - flex-direction: column; +.wrapper { + --header-height: 62px; + min-height: 100vh; - flex: 1 0 auto; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto var(--header-height) 1fr; + grid-template-areas: 'notifications notifications' 'header header' 'sidebar content'; + + permanent-notifications { + grid-area: notifications; + } + + web-console-header { + grid-area: header; + position: sticky; + top: 0; + z-index: 10; + transform: translateZ(1px); + } + + web-console-sidebar { + grid-area: sidebar; + transform: translateZ(1px); + } + + &>.content { + grid-area: content; + padding-left: 30px; + padding-right: 30px; - .body-container { - flex: 1 0 auto; - padding-bottom: 30px; } } @@ -374,7 +394,6 @@ i.btn { h1, h2, h3 { - user-select: none; font-weight: normal; /* Makes the vertical size of the text the same for all fonts. */ line-height: 1; @@ -2005,7 +2024,7 @@ html, body { } .demo-mode { - padding-top: 30px; + // padding-top: 30px; } // Fix for injecting svg icon into BS btn diff --git a/modules/web-console/frontend/views/base.pug b/modules/web-console/frontend/views/base.pug index 967d469b569e0..b14cdac9d7e0c 100644 --- a/modules/web-console/frontend/views/base.pug +++ b/modules/web-console/frontend/views/base.pug @@ -14,13 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. +permanent-notifications web-console-header - web-console-header-left - include ./includes/header-left - web-console-header-right - include ./includes/header-right + web-console-header-content -.container--responsive.body-container.flex-full-height - div(ui-view='').flex-full-height +web-console-sidebar -web-console-footer +ui-view.content \ No newline at end of file diff --git a/modules/web-console/frontend/views/includes/header-left.pug b/modules/web-console/frontend/views/includes/header-left.pug deleted file mode 100644 index 03e06167360c0..0000000000000 --- a/modules/web-console/frontend/views/includes/header-left.pug +++ /dev/null @@ -1,42 +0,0 @@ -//- - Licensed to the Apache Software Foundation (ASF) under one or more - contributor license agreements. See the NOTICE file distributed with - this work for additional information regarding copyright ownership. - The ASF licenses this file to You under the Apache License, Version 2.0 - (the "License"); you may not use this file except in compliance with - the License. You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. - -a.wch-nav-item( - ui-sref='base.configuration.overview' - ui-sref-active='{active: "base.configuration"}' -) - | Configure - -.wch-nav-item(ng-if='!$root.user.becomeUsed') - a(ui-sref='base.sql.tabs.notebooks-list' ui-sref-active='active') - | Queries - -.wch-additional-nav-items(ignite-navbar) - .wch-nav-item(ng-repeat='item in navbar.items') - div(ng-if='$root.user.becomeUsed ? item.canBecomed : item.children' ng-click='$event.stopPropagation()' - ng-class='{active: $state.includes(item.sref)}' - bs-dropdown='item.children' - data-placement='bottom-left' - data-trigger='hover focus' - data-container='self' - aria-haspopup='true' - aria-expanded='false' - ) - span {{::item.text}} - span.caret - - a(ng-if='$root.user.becomeUsed ? item.canBecomed : !item.children' ui-sref='{{item.sref}}' ui-sref-active='active') - | {{::item.text}} From 6980be0dae42cd1760f7a384cad1ea466a5f3c9e Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Wed, 5 Dec 2018 16:47:12 +0700 Subject: [PATCH 02/32] IGNITE-10239 Use old-style footer on certain pages. --- .../app/components/page-configure/states.js | 2 +- .../components/page-forgot-password/run.js | 2 +- .../page-forgot-password/style.scss | 3 ++ .../page-forgot-password/template.pug | 54 ++++++++++--------- .../app/components/page-landing/index.js | 2 +- .../app/components/page-landing/style.scss | 16 ++++-- .../app/components/page-landing/template.pug | 9 +++- .../page-password-changed/controller.js | 2 +- .../components/page-password-changed/index.js | 2 +- .../page-password-reset/controller.js | 4 +- .../components/page-password-reset/index.js | 6 +-- .../components/page-password-reset/style.scss | 2 + .../page-password-reset/template.pug | 5 ++ .../app/components/page-signin/run.ts | 4 +- .../app/components/page-signin/style.scss | 3 ++ .../app/components/page-signin/template.pug | 8 ++- .../app/components/page-signup/run.js | 2 +- .../app/components/page-signup/style.scss | 4 ++ .../app/components/page-signup/template.pug | 34 ++++++------ .../web-console-header/component.ts | 5 +- .../web-console-header-content/controller.ts | 10 +--- .../web-console-header-content/style.scss | 23 +++----- .../web-console-header-content/template.pug | 4 -- .../components/web-console-header/style.scss | 3 ++ .../web-console-header/template.pug | 3 +- modules/web-console/frontend/app/data/i18n.js | 2 +- .../frontend/app/modules/user/Auth.service.ts | 4 +- 27 files changed, 122 insertions(+), 96 deletions(-) diff --git a/modules/web-console/frontend/app/components/page-configure/states.js b/modules/web-console/frontend/app/components/page-configure/states.js index 089730cfb9183..3ba5bb70f18bc 100644 --- a/modules/web-console/frontend/app/components/page-configure/states.js +++ b/modules/web-console/frontend/app/components/page-configure/states.js @@ -90,7 +90,7 @@ function registerStates($stateProvider) { }) .toPromise(); }, - failState: 'base.signin', + failState: 'signin', tfMetaTags: { title: 'Configuration' } diff --git a/modules/web-console/frontend/app/components/page-forgot-password/run.js b/modules/web-console/frontend/app/components/page-forgot-password/run.js index 76054897aa6e5..c7ee6a64a1d3f 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/run.js +++ b/modules/web-console/frontend/app/components/page-forgot-password/run.js @@ -21,7 +21,7 @@ export function registerState($uiRouter) { /** @type {import("app/types").IIgniteNg1StateDeclaration} */ const state = { - name: 'base.forgotPassword', + name: 'forgotPassword', url: '/forgot-password', component: 'pageForgotPassword', unsaved: true, diff --git a/modules/web-console/frontend/app/components/page-forgot-password/style.scss b/modules/web-console/frontend/app/components/page-forgot-password/style.scss index 86425c189806e..90e8e7f5186e2 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/style.scss +++ b/modules/web-console/frontend/app/components/page-forgot-password/style.scss @@ -19,11 +19,14 @@ page-forgot-password { display: flex; flex-direction: column; flex: 1 0 auto; + grid-column: span 3; + grid-row: span 3; section { margin-left: auto; margin-right: auto; width: 530px; + flex: 1; h3 { font-size: 38px; diff --git a/modules/web-console/frontend/app/components/page-forgot-password/template.pug b/modules/web-console/frontend/app/components/page-forgot-password/template.pug index e13aa3964b013..9fbd61be6dcad 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/template.pug +++ b/modules/web-console/frontend/app/components/page-forgot-password/template.pug @@ -16,28 +16,32 @@ include /app/helpers/jade/mixins -.container--responsive.body-container - section - - const form = '$ctrl.form' - h3 Forgot password? - p Enter the email address for your account & we'll email you a link to reset your password. - form(name=form novalidate ng-submit='$ctrl.remindPassword()') - +form-field__email({ - label: 'Email:', - model: '$ctrl.data.email', - name: '"email"', - placeholder: 'Input email', - required: true - })( - ng-model-options='{allowInvalid: true}' - autocomplete='email' - ignite-auto-focus - tabindex='0' - ) - +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) - footer.form-footer - a(ui-sref='base.signin') Back to sign in - button.btn-ignite.btn-ignite--primary( - tabindex='1' - type='submit' - ) Send it to me +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite + +section + - const form = '$ctrl.form' + h3 Forgot password? + p Enter the email address for your account & we'll email you a link to reset your password. + form(name=form novalidate ng-submit='$ctrl.remindPassword()') + +form-field__email({ + label: 'Email:', + model: '$ctrl.data.email', + name: '"email"', + placeholder: 'Input email', + required: true + })( + ng-model-options='{allowInvalid: true}' + autocomplete='email' + ignite-auto-focus + tabindex='0' + ) + +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) + footer.form-footer + a(ui-sref='signin') Back to sign in + button.btn-ignite.btn-ignite--primary( + tabindex='1' + type='submit' + ) Send it to me + +web-console-footer diff --git a/modules/web-console/frontend/app/components/page-landing/index.js b/modules/web-console/frontend/app/components/page-landing/index.js index 2bc7f5be4e3a2..8f678f397c1e4 100644 --- a/modules/web-console/frontend/app/components/page-landing/index.js +++ b/modules/web-console/frontend/app/components/page-landing/index.js @@ -42,7 +42,7 @@ export default angular .config(['$stateProvider', function($stateProvider) { // set up the states $stateProvider - .state('base.landing', { + .state('landing', { url: '/', template: '', redirectTo: (trans) => { diff --git a/modules/web-console/frontend/app/components/page-landing/style.scss b/modules/web-console/frontend/app/components/page-landing/style.scss index 46cd2e5f29f4d..973c2555d68a2 100644 --- a/modules/web-console/frontend/app/components/page-landing/style.scss +++ b/modules/web-console/frontend/app/components/page-landing/style.scss @@ -27,10 +27,18 @@ page-landing { font-family: Roboto; display: block; - - margin-left: -30px; - margin-right: -30px; - display: block; + grid-column: span 3; + grid-row: span 3; + + .page-landing__button-signin { + align-self: center; + margin-left: 30px; + margin-right: 30px; + min-width: 80px; + font-weight: 500; + padding: 10px 25px !important; + flex: 0 0 auto; + } .btn-custom { @include custom_btn; diff --git a/modules/web-console/frontend/app/components/page-landing/template.pug b/modules/web-console/frontend/app/components/page-landing/template.pug index df1ae61dd6cc6..0f47a4336f5f5 100644 --- a/modules/web-console/frontend/app/components/page-landing/template.pug +++ b/modules/web-console/frontend/app/components/page-landing/template.pug @@ -14,13 +14,17 @@ See the License for the specific language governing permissions and limitations under the License. +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite + .page-landing__button-signin.btn-ignite.btn-ignite--primary(ui-sref='signin') Sign In + section.intro-container-wrapper .container .col-lg-6.col-md-6.col-sm-6.col-xs-12.intro-content h1 Web Console h2 An Interactive Configuration Wizard and Management Tool for Apache™ Ignite® p It provides an interactive configuration wizard which helps you create and download configuration files and code snippets for your Apache Ignite projects. Additionally, the tool allows you to automatically load SQL metadata from any RDBMS, run SQL queries on your in-memory cache, and view execution plans, in-memory schema, and streaming charts. - a#signup_show.btn.btn-lg.btn-primary.btn-custom(ui-sref='base.signup') Sign Up + a#signup_show.btn.btn-lg.btn-primary.btn-custom(ui-sref='signup') Sign Up .col-lg-6.col-md-6.col-sm-6.col-xs-12 ui-carousel(slides='$ctrl.images' autoplay='true' slides-to-show='1' arrows='false') carousel-item @@ -55,5 +59,6 @@ section.features-container-wrapper h3 Manage the Web Console users p The Web Console allows you to have accounts with different roles. .align-center.text-center - a.btn.btn-lg.btn-primary.btn-custom(ui-sref='base.signup') Get Started + a.btn.btn-lg.btn-primary.btn-custom(ui-sref='signup') Get Started +web-console-footer diff --git a/modules/web-console/frontend/app/components/page-password-changed/controller.js b/modules/web-console/frontend/app/components/page-password-changed/controller.js index 412cf9b9922ba..e3b0a035b5e14 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/controller.js +++ b/modules/web-console/frontend/app/components/page-password-changed/controller.js @@ -20,7 +20,7 @@ export default class { constructor($state, $timeout) { $timeout(() => { - $state.go('base.signin'); + $state.go('signin'); }, 10000); } } diff --git a/modules/web-console/frontend/app/components/page-password-changed/index.js b/modules/web-console/frontend/app/components/page-password-changed/index.js index 0f089f5898e44..7c244beff0622 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/index.js +++ b/modules/web-console/frontend/app/components/page-password-changed/index.js @@ -30,7 +30,7 @@ export default angular controller }) .config(['$stateProvider', ($stateProvider) => { - $stateProvider.state('base.password-send', { + $stateProvider.state('password.send', { url: '/changed', component: 'pagePasswordChanged', tfMetaTags: { diff --git a/modules/web-console/frontend/app/components/page-password-reset/controller.js b/modules/web-console/frontend/app/components/page-password-reset/controller.js index c36fd5df6f192..53d6c69393a95 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/controller.js +++ b/modules/web-console/frontend/app/components/page-password-reset/controller.js @@ -39,13 +39,13 @@ export default class { resetPassword() { this.$http.post('/api/v1/password/reset', {token: this.ui.token, password: this.ui.password}) .then(() => { - this.$state.go('base.signin'); + this.$state.go('signin'); this.Messages.showInfo('Password successfully changed'); }) .catch(({data, state}) => { if (state === 503) - this.$state.go('base.signin'); + this.$state.go('signin'); this.Messages.showError(data); }); diff --git a/modules/web-console/frontend/app/components/page-password-reset/index.js b/modules/web-console/frontend/app/components/page-password-reset/index.js index 354f10d5dc6e7..e1042a6565c56 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/index.js +++ b/modules/web-console/frontend/app/components/page-password-reset/index.js @@ -35,17 +35,17 @@ export default angular .config(['$stateProvider', ($stateProvider) => { // set up the states $stateProvider - .state('base.password', { + .state('password', { url: '/password', abstract: true, template: '' }) - .state('base.password.reset', { + .state('password.reset', { url: '/reset?{token}', component: 'pagePasswordReset', redirectTo: (trans) => { if (_.isEmpty(trans.params('to').token)) - return 'base.signin'; + return 'signin'; return true; }, diff --git a/modules/web-console/frontend/app/components/page-password-reset/style.scss b/modules/web-console/frontend/app/components/page-password-reset/style.scss index 75f758e676048..6a2423914eea4 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/style.scss +++ b/modules/web-console/frontend/app/components/page-password-reset/style.scss @@ -19,6 +19,8 @@ page-password-reset { display: flex; flex: 1 0 auto; flex-direction: column; + grid-column: span 3; + grid-row: span 3; footer { display: flex; diff --git a/modules/web-console/frontend/app/components/page-password-reset/template.pug b/modules/web-console/frontend/app/components/page-password-reset/template.pug index 48d881cefabb5..8a45303bbae8d 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/template.pug +++ b/modules/web-console/frontend/app/components/page-password-reset/template.pug @@ -16,6 +16,9 @@ include /app/helpers/jade/mixins +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite + .container.body-container .row .main-content(ng-if='error') @@ -72,3 +75,5 @@ include /app/helpers/jade/mixins ) svg.icon-left(ignite-icon='checkmark') | Save Changes + +web-console-footer diff --git a/modules/web-console/frontend/app/components/page-signin/run.ts b/modules/web-console/frontend/app/components/page-signin/run.ts index dd6a4c757ccb0..aa5647c44a363 100644 --- a/modules/web-console/frontend/app/components/page-signin/run.ts +++ b/modules/web-console/frontend/app/components/page-signin/run.ts @@ -21,11 +21,11 @@ import {IIgniteNg1StateDeclaration} from 'app/types'; export function registerState($uiRouter: UIRouter) { const state: IIgniteNg1StateDeclaration = { url: '/signin', - name: 'base.signin', + name: 'signin', component: 'pageSignin', unsaved: true, redirectTo: (trans) => { - const skipStates = new Set(['base.signup', 'base.forgotPassword', 'base.landing']); + const skipStates = new Set(['signup', 'forgotPassword', 'landing']); if (skipStates.has(trans.from().name)) return; diff --git a/modules/web-console/frontend/app/components/page-signin/style.scss b/modules/web-console/frontend/app/components/page-signin/style.scss index 51da101770161..2937db9ae738d 100644 --- a/modules/web-console/frontend/app/components/page-signin/style.scss +++ b/modules/web-console/frontend/app/components/page-signin/style.scss @@ -19,11 +19,14 @@ page-signin { display: flex; flex-direction: column; flex: 1 0 auto; + grid-column: span 3; + grid-row: span 3; section { margin-left: auto; margin-right: auto; width: 530px; + flex: 1; h3 { font-size: 38px; diff --git a/modules/web-console/frontend/app/components/page-signin/template.pug b/modules/web-console/frontend/app/components/page-signin/template.pug index 4f563f3cd492c..0075641f1539e 100644 --- a/modules/web-console/frontend/app/components/page-signin/template.pug +++ b/modules/web-console/frontend/app/components/page-signin/template.pug @@ -16,6 +16,9 @@ include /app/helpers/jade/mixins +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite + section -var form = '$ctrl.form' h3 Sign In @@ -44,10 +47,11 @@ section ) +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) footer.form-footer - a(ui-sref='base.forgotPassword({email: $ctrl.data.email})') Forgot password? + a(ui-sref='forgotPassword({email: $ctrl.data.email})') Forgot password? button.btn-ignite.btn-ignite--primary( type='submit' ) Sign In footer.page-signin__no-account-message - | Don't have an account? #[a(ui-sref='base.signup') Get started] + | Don't have an account? #[a(ui-sref='signup') Get started] +web-console-footer diff --git a/modules/web-console/frontend/app/components/page-signup/run.js b/modules/web-console/frontend/app/components/page-signup/run.js index 61635af73d2e4..1d04fa257714f 100644 --- a/modules/web-console/frontend/app/components/page-signup/run.js +++ b/modules/web-console/frontend/app/components/page-signup/run.js @@ -21,7 +21,7 @@ export function registerState($uiRouter) { /** @type {import("app/types").IIgniteNg1StateDeclaration} */ const state = { - name: 'base.signup', + name: 'signup', url: '/signup', component: 'pageSignup', unsaved: true, diff --git a/modules/web-console/frontend/app/components/page-signup/style.scss b/modules/web-console/frontend/app/components/page-signup/style.scss index 98c4729bf5ad5..8dfba052b0c4a 100644 --- a/modules/web-console/frontend/app/components/page-signup/style.scss +++ b/modules/web-console/frontend/app/components/page-signup/style.scss @@ -19,8 +19,12 @@ page-signup { display: flex; flex-direction: column; flex: 1 0 auto; + grid-column: span 3; + grid-row: span 3; section { + flex: 1; + h3 { font-size: 38px; font-weight: 300; diff --git a/modules/web-console/frontend/app/components/page-signup/template.pug b/modules/web-console/frontend/app/components/page-signup/template.pug index 1857b7c4f7da9..b9cfb6417196e 100644 --- a/modules/web-console/frontend/app/components/page-signup/template.pug +++ b/modules/web-console/frontend/app/components/page-signup/template.pug @@ -14,20 +14,22 @@ See the License for the specific language governing permissions and limitations under the License. -include /app/helpers/jade/mixins +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite -.container--responsive.body-container - section - h3 Don't Have An Account? - form(name='$ctrl.form' novalidate ng-submit='$ctrl.signup()') - form-signup( - outer-form='$ctrl.form' - ng-model='$ctrl.data' - server-error='$ctrl.serverError' - ) - footer.full-width.form-footer - button.btn-ignite.btn-ignite--primary( - type='submit' - ) Sign Up - footer.page-signup__has-account-message - | Already have an account? #[a(ui-sref='base.signin') Sign in here] +section + h3 Don't Have An Account? + form(name='$ctrl.form' novalidate ng-submit='$ctrl.signup()') + form-signup( + outer-form='$ctrl.form' + ng-model='$ctrl.data' + server-error='$ctrl.serverError' + ) + footer.full-width.form-footer + button.btn-ignite.btn-ignite--primary( + type='submit' + ) Sign Up + footer.page-signup__has-account-message + | Already have an account? #[a(ui-sref='signin') Sign in here] + +web-console-footer diff --git a/modules/web-console/frontend/app/components/web-console-header/component.ts b/modules/web-console/frontend/app/components/web-console-header/component.ts index 91fd243289508..ad7e8a78d0630 100644 --- a/modules/web-console/frontend/app/components/web-console-header/component.ts +++ b/modules/web-console/frontend/app/components/web-console-header/component.ts @@ -36,5 +36,8 @@ export default { return !!this.$rootScope.user; } }, - transclude: true + transclude: true, + bindings: { + hideMenuButton: ' this.$state.includes(name)); - } - get showUserMenu(): boolean { return !!this.$rootScope.user; } @@ -46,8 +42,4 @@ export default class WebConsoleHeaderContent { get showDemoModeButton(): boolean { return this.$rootScope.user && !this.$rootScope.user.becomeUsed && !this.$rootScope.IgniteDemoMode; } - - get showSignInButton(): boolean { - return this.$state.is('base.landing'); - } } diff --git a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss index 65111858a41db..f4836148c0585 100644 --- a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss +++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss @@ -19,13 +19,6 @@ web-console-header-content { display: flex; flex: 1; - .web-console-header-content__title { - display: flex; - align-items: center; - margin-left: 80px; - font-size: 1.4em; - } - .web-console-header-content__right { margin-left: auto; display: flex; @@ -40,14 +33,12 @@ web-console-header-content { border-left: 1px solid #dddddd; height: 100%; } +} - .web-console-header-content__sign-in { - align-self: center; - margin-right: 30px; - - .btn-ignite { - font-weight: 500; - padding: 10px 25px !important; - } - } +.web-console-header-content__title { + display: flex; + align-items: center; + margin-left: 80px; + font-size: 1.4em; + margin-right: auto; } \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug index cca76a919d775..8f1d4f8747013 100644 --- a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug @@ -14,15 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. -span.web-console-header-content__title(ng-if='$ctrl.showTitle') Management console for Apache Ignite - .web-console-header-content__right .web-console-header-item(ng-if='$ctrl.showConnectedClusters') connected-clusters .web-console-header-item(ng-if='$ctrl.showDemoModeButton') demo-mode-button - .web-console-header-content__sign-in(ng-if='$ctrl.showSignInButton') - .btn-ignite.btn-ignite--primary(ui-sref='base.signin') Sign In .web-console-header-item(ng-if='$ctrl.showUserMenu') user-menu \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-header/style.scss b/modules/web-console/frontend/app/components/web-console-header/style.scss index 9b29214259bd0..e34328433dc7c 100644 --- a/modules/web-console/frontend/app/components/web-console-header/style.scss +++ b/modules/web-console/frontend/app/components/web-console-header/style.scss @@ -90,4 +90,7 @@ web-console-header { color: rgba(0, 0, 0, 0.54); margin-right: 5px; } + .web-console-header__togle-menu-button-hidden { + visibility: hidden; + } } diff --git a/modules/web-console/frontend/app/components/web-console-header/template.pug b/modules/web-console/frontend/app/components/web-console-header/template.pug index 21215c0516e44..cf57ff98ba9a5 100644 --- a/modules/web-console/frontend/app/components/web-console-header/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/template.pug @@ -18,13 +18,14 @@ button.web-console-header__togle-menu-button( type='button' title='Toggle menu' ng-click='$ctrl.toggleSidebar()' + ng-class='::{"web-console-header__togle-menu-button-hidden": $ctrl.hideMenuButton}' ) svg(ignite-icon='menu') a(ui-sref='default-state' ng-if='$ctrl.isAuthorized()').wch-logo-anchor img.wch-logo(src='/images/ignite-logo.svg') -a(ui-sref='base.landing' ng-if='!$ctrl.isAuthorized()').wch-logo-anchor +a(ui-sref='landing' ng-if='!$ctrl.isAuthorized()').wch-logo-anchor img.wch-logo(src='/images/ignite-logo.svg') ng-transclude diff --git a/modules/web-console/frontend/app/data/i18n.js b/modules/web-console/frontend/app/data/i18n.js index 49173ecbb6fd8..20f9d25b2f338 100644 --- a/modules/web-console/frontend/app/data/i18n.js +++ b/modules/web-console/frontend/app/data/i18n.js @@ -59,7 +59,7 @@ export default { 'app.components.page-signin.m5': 'Input password', 'app.components.page-signin.m6': 'Forgot password?', 'app.components.page-signin.m7': 'Sign In', - 'app.components.page-signin.m8': 'Don\'t have an account? #[a(ui-sref=\'base.signup\') Get started]', + 'app.components.page-signin.m8': 'Don\'t have an account? #[a(ui-sref=\'signup\') Get started]', // app/components/page-signin/run.js 'app.components.page-signin.m9': 'Sign In', diff --git a/modules/web-console/frontend/app/modules/user/Auth.service.ts b/modules/web-console/frontend/app/modules/user/Auth.service.ts index 7000ce074a8a1..55956ad990b47 100644 --- a/modules/web-console/frontend/app/modules/user/Auth.service.ts +++ b/modules/web-console/frontend/app/modules/user/Auth.service.ts @@ -54,7 +54,7 @@ export default class AuthService { } remindPassword(email: string) { - return this._auth('password/forgot', {email}).then(() => this.$state.go('base.password.send')); + return this._auth('password/forgot', {email}).then(() => this.$state.go('password.send')); } // TODO IGNITE-7994: Remove _auth and move API calls to corresponding methods @@ -83,7 +83,7 @@ export default class AuthService { .then(() => { this.User.clean(); - this.$window.open(this.$state.href('base.signin'), '_self'); + this.$window.open(this.$state.href('signin'), '_self'); }) .catch((e) => this.Messages.showError(e)); } From 1e38cc13cc1a2f608268885e6168058fba064476 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Thu, 6 Dec 2018 11:48:01 +0700 Subject: [PATCH 03/32] IGNITE-10239 Add configuration icon. --- .../page-configure/icons/configuration.icon.svg | 13 +++++++++++++ .../frontend/app/components/page-configure/index.ts | 8 ++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 modules/web-console/frontend/app/components/page-configure/icons/configuration.icon.svg diff --git a/modules/web-console/frontend/app/components/page-configure/icons/configuration.icon.svg b/modules/web-console/frontend/app/components/page-configure/icons/configuration.icon.svg new file mode 100644 index 0000000000000..7c0ac7aec54c3 --- /dev/null +++ b/modules/web-console/frontend/app/components/page-configure/icons/configuration.icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/modules/web-console/frontend/app/components/page-configure/index.ts b/modules/web-console/frontend/app/components/page-configure/index.ts index f7b21a09ebdaa..dd2ad205dbd65 100644 --- a/modules/web-console/frontend/app/components/page-configure/index.ts +++ b/modules/web-console/frontend/app/components/page-configure/index.ts @@ -55,6 +55,8 @@ import 'rxjs/add/operator/skip'; import {Observable} from 'rxjs/Observable'; import {navigationMenuItem, AppStore} from '../../store'; +import {default as configurationIcon} from './icons/configuration.icon.svg'; +import {default as IconsService} from '../ignite-icon/service'; Observable.prototype.debug = function(l) { return this.do((v) => console.log(l, v), (e) => console.error(l, e), () => console.log(l, 'completed')); @@ -117,7 +119,9 @@ export default angular DefaultState.setRedirectTo(() => 'base.configuration.overview'); }]) .run(registerActivitiesHook) - .run(['ConfigEffects', 'ConfigureState', '$uiRouter', 'Store', (ConfigEffects, ConfigureState, $uiRouter, store: AppStore) => { + .run(['ConfigEffects', 'ConfigureState', '$uiRouter', 'Store', 'IgniteIcon', (ConfigEffects, ConfigureState, $uiRouter, store: AppStore, icons: IconsService) => { + icons.registerIcons({configuration: configurationIcon}); + $uiRouter.plugin(UIRouterRx); ConfigureState.addReducer(refsReducer({ @@ -168,7 +172,7 @@ export default angular store.dispatch(navigationMenuItem({ activeSref: 'base.configuration.**', - icon: 'cluster', + icon: 'configuration', label: 'Configuration', order: 1, sref: 'base.configuration.overview' From 8b3b8ba356b0da66d178108e9b57721a8c26a2b0 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Thu, 6 Dec 2018 14:09:13 +0700 Subject: [PATCH 04/32] IGNITE-10239 Fix page side paddings. --- .../frontend/app/components/page-forgot-password/style.scss | 1 + .../frontend/app/components/page-landing/style.scss | 2 +- .../frontend/app/components/page-password-changed/style.scss | 1 + .../frontend/app/components/page-password-reset/style.scss | 4 ++++ .../frontend/app/components/page-signin/style.scss | 1 + .../frontend/app/components/page-signup/style.scss | 1 + modules/web-console/frontend/public/stylesheets/style.scss | 4 ++++ 7 files changed, 13 insertions(+), 1 deletion(-) diff --git a/modules/web-console/frontend/app/components/page-forgot-password/style.scss b/modules/web-console/frontend/app/components/page-forgot-password/style.scss index 90e8e7f5186e2..865c1d1128fc2 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/style.scss +++ b/modules/web-console/frontend/app/components/page-forgot-password/style.scss @@ -27,6 +27,7 @@ page-forgot-password { margin-right: auto; width: 530px; flex: 1; + padding: 0 var(--page-side-padding); h3 { font-size: 38px; diff --git a/modules/web-console/frontend/app/components/page-landing/style.scss b/modules/web-console/frontend/app/components/page-landing/style.scss index 973c2555d68a2..477d0101c0f88 100644 --- a/modules/web-console/frontend/app/components/page-landing/style.scss +++ b/modules/web-console/frontend/app/components/page-landing/style.scss @@ -33,7 +33,7 @@ page-landing { .page-landing__button-signin { align-self: center; margin-left: 30px; - margin-right: 30px; + margin-right: var(--page-side-padding);; min-width: 80px; font-weight: 500; padding: 10px 25px !important; diff --git a/modules/web-console/frontend/app/components/page-password-changed/style.scss b/modules/web-console/frontend/app/components/page-password-changed/style.scss index eeb44ec451eab..c180dc3a2f7c1 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/style.scss +++ b/modules/web-console/frontend/app/components/page-password-changed/style.scss @@ -29,6 +29,7 @@ page-password-changed { flex-direction: column; justify-content: center; align-items: center; + padding: 0 var(--page-side-padding); } h2 { diff --git a/modules/web-console/frontend/app/components/page-password-reset/style.scss b/modules/web-console/frontend/app/components/page-password-reset/style.scss index 6a2423914eea4..efcad24f8ca86 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/style.scss +++ b/modules/web-console/frontend/app/components/page-password-reset/style.scss @@ -22,6 +22,10 @@ page-password-reset { grid-column: span 3; grid-row: span 3; + &>.container { + padding: 0 var(--page-side-padding); + } + footer { display: flex; justify-content: flex-end; diff --git a/modules/web-console/frontend/app/components/page-signin/style.scss b/modules/web-console/frontend/app/components/page-signin/style.scss index 2937db9ae738d..fdab7cc9b19b3 100644 --- a/modules/web-console/frontend/app/components/page-signin/style.scss +++ b/modules/web-console/frontend/app/components/page-signin/style.scss @@ -27,6 +27,7 @@ page-signin { margin-right: auto; width: 530px; flex: 1; + padding: 0 var(--page-side-padding); h3 { font-size: 38px; diff --git a/modules/web-console/frontend/app/components/page-signup/style.scss b/modules/web-console/frontend/app/components/page-signup/style.scss index 8dfba052b0c4a..b08386affdcf0 100644 --- a/modules/web-console/frontend/app/components/page-signup/style.scss +++ b/modules/web-console/frontend/app/components/page-signup/style.scss @@ -24,6 +24,7 @@ page-signup { section { flex: 1; + padding: 0 var(--page-side-padding); h3 { font-size: 38px; diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index 7d8f1b4ee6fb1..f151ca4e01587 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -255,6 +255,10 @@ body { flex-direction: column; } +:root { + --page-side-padding: 30px; +} + .wrapper { --header-height: 62px; From 1cc228075bc814bdc445720dfc75bcd055bf085f Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Thu, 6 Dec 2018 14:10:59 +0700 Subject: [PATCH 05/32] IGNITE-10239 Fix navigation icon height. --- .../web-console-sidebar-navigation/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss index bdc9ab0ac7887..ff066c3c7f1fa 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -64,6 +64,7 @@ web-console-sidebar-navigation { } .web-console-sidebar-navigation__link-icon { width: 20px; + height: auto; } } .web-console-sidebar-navigation__link-wide { From aa5874251d5d3fc8fd42feeea1c22deac33e4ae8 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Thu, 6 Dec 2018 14:28:47 +0700 Subject: [PATCH 06/32] IGNITE-10239 More padding fixes. --- modules/web-console/frontend/public/stylesheets/style.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index f151ca4e01587..ab861f675479a 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -287,9 +287,8 @@ body { &>.content { grid-area: content; - padding-left: 30px; - padding-right: 30px; - + padding-left: var(--page-side-padding); + padding-right: var(--page-side-padding); } } From 365f6adc9e085688cc1380fd27a267aa67cc5601 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Thu, 6 Dec 2018 14:29:28 +0700 Subject: [PATCH 07/32] IGNITE-10239 Restore footer styles on certain pages. --- .../components/web-console-footer/style.scss | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/modules/web-console/frontend/app/components/web-console-footer/style.scss b/modules/web-console/frontend/app/components/web-console-footer/style.scss index 5ea95150a3bcd..bb1a2563e9bc5 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/style.scss +++ b/modules/web-console/frontend/app/components/web-console-footer/style.scss @@ -28,3 +28,28 @@ web-console-footer { color: rgba(0, 0, 0, 0.54); } } + + +*:not(web-console-sidebar) > web-console-footer { + color: #fafafa; + background: linear-gradient(to bottom, #5f5e5e, #393939); + font-size: 12px; + font-weight: 300; + padding-top: 12px; + padding-bottom: 12px; + + p { + margin: 0; + } + + a { + color: #ee8e89 !important; + &:hover, &:focus { + color: #ee2b27 !important; + } + } + + .web-console-footer__legal { + color: inherit; + } +} \ No newline at end of file From 7a0e8a57db84535d82949af012072a0c8c016060 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Thu, 6 Dec 2018 16:42:31 +0700 Subject: [PATCH 08/32] WIP UNDO LATER --- .../page-password-changed/controller.js | 6 +- .../components/page-password-changed/index.js | 6 +- .../page-password-changed/template.pug | 7 +- .../components/page-password-reset/index.js | 7 +- .../components/page-password-reset/style.scss | 31 ++++-- .../page-password-reset/template.pug | 94 ++++++++----------- 6 files changed, 84 insertions(+), 67 deletions(-) diff --git a/modules/web-console/frontend/app/components/page-password-changed/controller.js b/modules/web-console/frontend/app/components/page-password-changed/controller.js index e3b0a035b5e14..501a18e3e25e9 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/controller.js +++ b/modules/web-console/frontend/app/components/page-password-changed/controller.js @@ -19,8 +19,8 @@ export default class { static $inject = ['$state', '$timeout']; constructor($state, $timeout) { - $timeout(() => { - $state.go('signin'); - }, 10000); + // $timeout(() => { + // $state.go('signin'); + // }, 10000); } } diff --git a/modules/web-console/frontend/app/components/page-password-changed/index.js b/modules/web-console/frontend/app/components/page-password-changed/index.js index 7c244beff0622..7ff3e093fbafd 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/index.js +++ b/modules/web-console/frontend/app/components/page-password-changed/index.js @@ -32,7 +32,11 @@ export default angular .config(['$stateProvider', ($stateProvider) => { $stateProvider.state('password.send', { url: '/changed', - component: 'pagePasswordChanged', + views: { + '@': { + component: 'pagePasswordChanged' + } + }, tfMetaTags: { title: 'Password send' }, diff --git a/modules/web-console/frontend/app/components/page-password-changed/template.pug b/modules/web-console/frontend/app/components/page-password-changed/template.pug index 7d2d986c812b2..c12e824ea0750 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/template.pug +++ b/modules/web-console/frontend/app/components/page-password-changed/template.pug @@ -14,9 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. -.container.body-container +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite + +section h2 Ready! p | Further instructions for password reset have been sent to your e-mail address.#[br] | You'll be redirected back automatically in a few seconds. If not, please #[a(ui-sref='signin') click here]. + +web-console-footer \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/page-password-reset/index.js b/modules/web-console/frontend/app/components/page-password-reset/index.js index e1042a6565c56..028bfaee98093 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/index.js +++ b/modules/web-console/frontend/app/components/page-password-reset/index.js @@ -42,7 +42,12 @@ export default angular }) .state('password.reset', { url: '/reset?{token}', - component: 'pagePasswordReset', + views: { + '@': { + component: 'pagePasswordReset' + + } + }, redirectTo: (trans) => { if (_.isEmpty(trans.params('to').token)) return 'signin'; diff --git a/modules/web-console/frontend/app/components/page-password-reset/style.scss b/modules/web-console/frontend/app/components/page-password-reset/style.scss index efcad24f8ca86..90aa9784c9ede 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/style.scss +++ b/modules/web-console/frontend/app/components/page-password-reset/style.scss @@ -22,16 +22,33 @@ page-password-reset { grid-column: span 3; grid-row: span 3; - &>.container { + &>section { + margin-left: auto; + margin-right: auto; + width: 530px; + flex: 1; padding: 0 var(--page-side-padding); - } - footer { - display: flex; - justify-content: flex-end; + h3 { + font-size: 38px; + font-weight: 300; + margin: 30px 0 30px; + } + + .form-footer { + padding: 15px 0; + text-align: right; + display: flex; + align-items: center; + + .btn-ignite { + margin-left: auto; + } + } } - .btn-ignite + .btn-ignite { - margin-left: 10px; + form { + display: grid; + grid-gap: 10px; } } diff --git a/modules/web-console/frontend/app/components/page-password-reset/template.pug b/modules/web-console/frontend/app/components/page-password-reset/template.pug index 8a45303bbae8d..08578c41c70ac 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/template.pug +++ b/modules/web-console/frontend/app/components/page-password-reset/template.pug @@ -19,61 +19,47 @@ include /app/helpers/jade/mixins web-console-header(hide-menu-button='true') .web-console-header-content__title Management console for Apache Ignite -.container.body-container - .row - .main-content(ng-if='error') - .text-center - p {{::$ctrl.ui.error}} - div(ng-if='$ctrl.ui.token && !$ctrl.ui.error') - header.header-with-selector - div - h1 Reset Password +section + //- This doesn't seem to do anything 😵 + .main-content(ng-if='error') + .text-center + p {{::$ctrl.ui.error}} + h3(ng-if-start='$ctrl.ui.token && !$ctrl.ui.error') Reset Password + form.page-password-reset__grid(name='$ctrl.form' ng-init='reset_info.token = token' ng-if-end) + +form-field__email({ + label: 'E-mail:', + model: '$ctrl.ui.email', + disabled: true + }) - -var form = '$ctrl.form' - form.theme--ignite(name='$ctrl.form' ng-init='reset_info.token = token') - .row - .col-50 - +form-field__email({ - label: 'E-mail:', - model: '$ctrl.ui.email', - disabled: true - }) + +form-field__password({ + label: 'New password:', + model: '$ctrl.ui.password', + name: '"password"', + required: true, + placeholder: 'New password' + })( + ignite-auto-focus + ignite-on-enter-focus-move='passwordConfirmInput' + ) + +form-field__password({ + label: 'Confirm password:', + model: 'confirm', + name: '"passwordConfirm"', + required: true, + placeholder: 'Confirm new password' + })( + ignite-on-enter-focus-move='resetForm.$valid && resetPassword(user_info)' + ignite-match='$ctrl.ui.password' + ) - .row - .col-50 - +form-field__password({ - label: 'New password:', - model: '$ctrl.ui.password', - name: '"password"', - required: true, - placeholder: 'New password' - })( - ignite-auto-focus - ignite-on-enter-focus-move='passwordConfirmInput' - ) - - .row - .col-50 - +form-field__password({ - label: 'Confirm password:', - model: 'confirm', - name: '"passwordConfirm"', - required: true, - placeholder: 'Confirm new password' - })( - ignite-on-enter-focus-move='resetForm.$valid && resetPassword(user_info)' - ignite-match='$ctrl.ui.password' - ) - - hr - - footer - a.btn-ignite.btn-ignite--link-success(type='button' ui-sref='default-state') Cancel - button.btn-ignite.btn-ignite--success( - ng-disabled='$ctrl.form.$invalid' - ng-click='$ctrl.resetPassword()' - ) - svg.icon-left(ignite-icon='checkmark') - | Save Changes + footer.form-footer + a(ui-sref='default-state') Cancel + button.btn-ignite.btn-ignite--primary( + ng-disabled='$ctrl.form.$invalid' + ng-click='$ctrl.resetPassword()' + ) + svg.icon-left(ignite-icon='checkmark') + | Save Changes web-console-footer From 986d22e1ce3863d449f5a47e71b1bf48194ad087 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Fri, 7 Dec 2018 10:34:55 +0700 Subject: [PATCH 09/32] IGNITE-10239 Use solid background in footer. --- .../frontend/app/components/web-console-footer/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/web-console/frontend/app/components/web-console-footer/style.scss b/modules/web-console/frontend/app/components/web-console-footer/style.scss index bb1a2563e9bc5..c19de299b6008 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/style.scss +++ b/modules/web-console/frontend/app/components/web-console-footer/style.scss @@ -32,7 +32,7 @@ web-console-footer { *:not(web-console-sidebar) > web-console-footer { color: #fafafa; - background: linear-gradient(to bottom, #5f5e5e, #393939); + background: #393939; font-size: 12px; font-weight: 300; padding-top: 12px; From b45580fafedc3f18ff3e7c4307c8f090b5721f96 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Fri, 7 Dec 2018 10:38:26 +0700 Subject: [PATCH 10/32] IGNITE-10239 Fix password-reset-change page styles. --- .../page-password-changed/controller.js | 6 ++--- .../page-password-changed/style.scss | 23 +++++++++---------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/modules/web-console/frontend/app/components/page-password-changed/controller.js b/modules/web-console/frontend/app/components/page-password-changed/controller.js index 501a18e3e25e9..e3b0a035b5e14 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/controller.js +++ b/modules/web-console/frontend/app/components/page-password-changed/controller.js @@ -19,8 +19,8 @@ export default class { static $inject = ['$state', '$timeout']; constructor($state, $timeout) { - // $timeout(() => { - // $state.go('signin'); - // }, 10000); + $timeout(() => { + $state.go('signin'); + }, 10000); } } diff --git a/modules/web-console/frontend/app/components/page-password-changed/style.scss b/modules/web-console/frontend/app/components/page-password-changed/style.scss index c180dc3a2f7c1..c7b5609b856e4 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/style.scss +++ b/modules/web-console/frontend/app/components/page-password-changed/style.scss @@ -19,25 +19,24 @@ page-password-changed { display: flex; flex: 1 0 auto; flex-direction: column; + grid-column: span 3; + grid-row: span 3; - min-height: 100%; - - font-family: Roboto; - - .body-container { + section { + flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 var(--page-side-padding); - } - h2 { - margin-bottom: 30px; - } + h2 { + margin-bottom: 30px; + } - p { - font-size: 16px; - text-align: center; + p { + font-size: 16px; + text-align: center; + } } } From ced945e6cd62fa7fadf8c556d0444877a6f50f96 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Fri, 7 Dec 2018 13:18:11 +0700 Subject: [PATCH 11/32] IGNITE-10239 Use class to style page bottom footer. --- .../app/components/page-forgot-password/template.pug | 2 +- .../frontend/app/components/page-landing/template.pug | 2 +- .../app/components/page-password-changed/template.pug | 2 +- .../app/components/page-password-reset/template.pug | 2 +- .../frontend/app/components/page-signin/template.pug | 2 +- .../frontend/app/components/page-signup/template.pug | 2 +- .../frontend/app/components/web-console-footer/style.scss | 7 +++---- 7 files changed, 9 insertions(+), 10 deletions(-) diff --git a/modules/web-console/frontend/app/components/page-forgot-password/template.pug b/modules/web-console/frontend/app/components/page-forgot-password/template.pug index 9fbd61be6dcad..a6f82980a0ab4 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/template.pug +++ b/modules/web-console/frontend/app/components/page-forgot-password/template.pug @@ -44,4 +44,4 @@ section type='submit' ) Send it to me -web-console-footer +web-console-footer.web-console-footer__page-bottom diff --git a/modules/web-console/frontend/app/components/page-landing/template.pug b/modules/web-console/frontend/app/components/page-landing/template.pug index 0f47a4336f5f5..35d4e0164b873 100644 --- a/modules/web-console/frontend/app/components/page-landing/template.pug +++ b/modules/web-console/frontend/app/components/page-landing/template.pug @@ -61,4 +61,4 @@ section.features-container-wrapper .align-center.text-center a.btn.btn-lg.btn-primary.btn-custom(ui-sref='signup') Get Started -web-console-footer +web-console-footer.web-console-footer__page-bottom diff --git a/modules/web-console/frontend/app/components/page-password-changed/template.pug b/modules/web-console/frontend/app/components/page-password-changed/template.pug index c12e824ea0750..2c91e465ea591 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/template.pug +++ b/modules/web-console/frontend/app/components/page-password-changed/template.pug @@ -24,4 +24,4 @@ section | Further instructions for password reset have been sent to your e-mail address.#[br] | You'll be redirected back automatically in a few seconds. If not, please #[a(ui-sref='signin') click here]. -web-console-footer \ No newline at end of file +web-console-footer.web-console-footer__page-bottom \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/page-password-reset/template.pug b/modules/web-console/frontend/app/components/page-password-reset/template.pug index 08578c41c70ac..220222de4c51b 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/template.pug +++ b/modules/web-console/frontend/app/components/page-password-reset/template.pug @@ -62,4 +62,4 @@ section svg.icon-left(ignite-icon='checkmark') | Save Changes -web-console-footer +web-console-footer.web-console-footer__page-bottom diff --git a/modules/web-console/frontend/app/components/page-signin/template.pug b/modules/web-console/frontend/app/components/page-signin/template.pug index 0075641f1539e..18682f48aeae2 100644 --- a/modules/web-console/frontend/app/components/page-signin/template.pug +++ b/modules/web-console/frontend/app/components/page-signin/template.pug @@ -54,4 +54,4 @@ section footer.page-signin__no-account-message | Don't have an account? #[a(ui-sref='signup') Get started] -web-console-footer +web-console-footer.web-console-footer__page-bottom diff --git a/modules/web-console/frontend/app/components/page-signup/template.pug b/modules/web-console/frontend/app/components/page-signup/template.pug index b9cfb6417196e..b76fcf1ada1bf 100644 --- a/modules/web-console/frontend/app/components/page-signup/template.pug +++ b/modules/web-console/frontend/app/components/page-signup/template.pug @@ -32,4 +32,4 @@ section footer.page-signup__has-account-message | Already have an account? #[a(ui-sref='signin') Sign in here] -web-console-footer +web-console-footer.web-console-footer__page-bottom diff --git a/modules/web-console/frontend/app/components/web-console-footer/style.scss b/modules/web-console/frontend/app/components/web-console-footer/style.scss index c19de299b6008..a0a9967a64af0 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/style.scss +++ b/modules/web-console/frontend/app/components/web-console-footer/style.scss @@ -29,8 +29,7 @@ web-console-footer { } } - -*:not(web-console-sidebar) > web-console-footer { +.web-console-footer__page-bottom { color: #fafafa; background: #393939; font-size: 12px; @@ -51,5 +50,5 @@ web-console-footer { .web-console-footer__legal { color: inherit; - } -} \ No newline at end of file + } +} From 844d3f93ec4182cae891fd6ba53d7077fa3c154e Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Fri, 7 Dec 2018 15:32:12 +0700 Subject: [PATCH 12/32] IGNITE-10239 Refactor public pages. --- .../page-forgot-password/controller.js | 8 +- .../components/page-forgot-password/run.js | 11 ++- .../page-forgot-password/style.scss | 42 +++------ .../page-forgot-password/template.pug | 51 +++++------ .../app/components/page-landing/index.js | 11 ++- .../app/components/page-landing/public.pug | 13 +++ .../app/components/page-landing/style.scss | 23 +++-- .../app/components/page-landing/template.pug | 6 -- .../{controller.js => controller.ts} | 12 ++- .../components/page-password-changed/index.js | 4 + .../page-password-changed/style.scss | 27 +++--- .../page-password-changed/template.pug | 14 +-- .../page-password-reset/controller.js | 11 ++- .../components/page-password-reset/index.js | 5 +- .../components/page-password-reset/style.scss | 30 ++----- .../page-password-reset/template.pug | 85 +++++++++---------- .../app/components/page-signin/controller.ts | 7 +- .../app/components/page-signin/run.ts | 10 ++- .../app/components/page-signin/style.scss | 37 +++----- .../app/components/page-signin/template.pug | 71 +++++++--------- .../app/components/page-signup/controller.ts | 11 ++- .../app/components/page-signup/run.js | 11 ++- .../app/components/page-signup/style.scss | 31 ++----- .../app/components/page-signup/template.pug | 32 +++---- .../components/web-console-footer/index.js | 11 ++- .../components/web-console-footer/style.scss | 1 + .../frontend/public/stylesheets/style.scss | 19 +++++ modules/web-console/frontend/views/public.pug | 12 +++ 28 files changed, 307 insertions(+), 299 deletions(-) create mode 100644 modules/web-console/frontend/app/components/page-landing/public.pug rename modules/web-console/frontend/app/components/page-password-changed/{controller.js => controller.ts} (74%) create mode 100644 modules/web-console/frontend/views/public.pug diff --git a/modules/web-console/frontend/app/components/page-forgot-password/controller.js b/modules/web-console/frontend/app/components/page-forgot-password/controller.js index 7d06773c58a72..86597aff4d7c8 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/controller.js +++ b/modules/web-console/frontend/app/components/page-forgot-password/controller.js @@ -24,22 +24,26 @@ export default class PageForgotPassword { data = {email: null}; /** @type {string} */ serverError = null; + /** @type {JQLite} */ + el; - static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils']; + static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils', '$element']; /** * @param {import('app/modules/user/Auth.service').default} Auth */ - constructor(Auth, IgniteMessages, IgniteFormUtils) { + constructor(Auth, IgniteMessages, IgniteFormUtils, el) { this.Auth = Auth; this.IgniteMessages = IgniteMessages; this.IgniteFormUtils = IgniteFormUtils; + this.el = el; } /** @param {import('./types').IForgotPasswordFormController} form */ canSubmitForm(form) { return form.$error.server ? true : !form.$invalid; } $postLink() { + this.el.addClass('public-page'); this.form.email.$validators.server = () => !this.serverError; } diff --git a/modules/web-console/frontend/app/components/page-forgot-password/run.js b/modules/web-console/frontend/app/components/page-forgot-password/run.js index c7ee6a64a1d3f..d9259e95fc1eb 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/run.js +++ b/modules/web-console/frontend/app/components/page-forgot-password/run.js @@ -15,6 +15,8 @@ * limitations under the License. */ +import publicTemplate from '../../../views/public.pug'; + /** * @param {import("@uirouter/angularjs").UIRouter} $uiRouter */ @@ -23,7 +25,14 @@ export function registerState($uiRouter) { const state = { name: 'forgotPassword', url: '/forgot-password', - component: 'pageForgotPassword', + views: { + '': { + template: publicTemplate + }, + 'page@forgotPassword': { + component: 'pageForgotPassword' + } + }, unsaved: true, tfMetaTags: { title: 'Forgot Password' diff --git a/modules/web-console/frontend/app/components/page-forgot-password/style.scss b/modules/web-console/frontend/app/components/page-forgot-password/style.scss index 865c1d1128fc2..7893c625697a7 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/style.scss +++ b/modules/web-console/frontend/app/components/page-forgot-password/style.scss @@ -19,39 +19,23 @@ page-forgot-password { display: flex; flex-direction: column; flex: 1 0 auto; - grid-column: span 3; - grid-row: span 3; - section { - margin-left: auto; - margin-right: auto; - width: 530px; - flex: 1; - padding: 0 var(--page-side-padding); - - h3 { - font-size: 38px; - font-weight: 300; - margin: 30px 0 30px; - } - - p { - margin-bottom: 20px; - } + p { + margin-bottom: 20px; + } - .form-field { - margin: 10px 0; - } + .form-field { + margin: 10px 0; + } - .form-footer { - padding: 15px 0; - text-align: right; - display: flex; - align-items: center; + .form-footer { + padding: 15px 0; + text-align: right; + display: flex; + align-items: center; - .btn-ignite { - margin-left: auto; - } + .btn-ignite { + margin-left: auto; } } } diff --git a/modules/web-console/frontend/app/components/page-forgot-password/template.pug b/modules/web-console/frontend/app/components/page-forgot-password/template.pug index a6f82980a0ab4..309e9b93de32a 100644 --- a/modules/web-console/frontend/app/components/page-forgot-password/template.pug +++ b/modules/web-console/frontend/app/components/page-forgot-password/template.pug @@ -16,32 +16,25 @@ include /app/helpers/jade/mixins -web-console-header(hide-menu-button='true') - .web-console-header-content__title Management console for Apache Ignite - -section - - const form = '$ctrl.form' - h3 Forgot password? - p Enter the email address for your account & we'll email you a link to reset your password. - form(name=form novalidate ng-submit='$ctrl.remindPassword()') - +form-field__email({ - label: 'Email:', - model: '$ctrl.data.email', - name: '"email"', - placeholder: 'Input email', - required: true - })( - ng-model-options='{allowInvalid: true}' - autocomplete='email' - ignite-auto-focus - tabindex='0' - ) - +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) - footer.form-footer - a(ui-sref='signin') Back to sign in - button.btn-ignite.btn-ignite--primary( - tabindex='1' - type='submit' - ) Send it to me - -web-console-footer.web-console-footer__page-bottom +h3.public-page__title Forgot password? +p Enter the email address for your account & we'll email you a link to reset your password. +form(name='$ctrl.form' novalidate ng-submit='$ctrl.remindPassword()') + +form-field__email({ + label: 'Email:', + model: '$ctrl.data.email', + name: '"email"', + placeholder: 'Input email', + required: true + })( + ng-model-options='{allowInvalid: true}' + autocomplete='email' + ignite-auto-focus + tabindex='0' + ) + +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) + footer.form-footer + a(ui-sref='signin') Back to sign in + button.btn-ignite.btn-ignite--primary( + tabindex='1' + type='submit' + ) Send it to me diff --git a/modules/web-console/frontend/app/components/page-landing/index.js b/modules/web-console/frontend/app/components/page-landing/index.js index 8f678f397c1e4..cabb5bbdef6c1 100644 --- a/modules/web-console/frontend/app/components/page-landing/index.js +++ b/modules/web-console/frontend/app/components/page-landing/index.js @@ -17,6 +17,7 @@ import angular from 'angular'; +import baseTemplate from './public.pug'; import template from './template.pug'; import './style.scss'; @@ -44,7 +45,15 @@ export default angular $stateProvider .state('landing', { url: '/', - template: '', + views: { + '@': { + template: baseTemplate + }, + 'page@landing': { + component: 'pageLanding' + } + }, + // template: '', redirectTo: (trans) => { return trans.injector().get('User').read() .then(() => { diff --git a/modules/web-console/frontend/app/components/page-landing/public.pug b/modules/web-console/frontend/app/components/page-landing/public.pug new file mode 100644 index 0000000000000..37c05e8c1c552 --- /dev/null +++ b/modules/web-console/frontend/app/components/page-landing/public.pug @@ -0,0 +1,13 @@ +//- + Copyright (C) GridGain Systems. All Rights Reserved. + _________ _____ __________________ _____ + __ ____/___________(_)______ /__ ____/______ ____(_)_______ + _ / __ __ ___/__ / _ __ / _ / __ _ __ `/__ / __ __ \ + / /_/ / _ / _ / / /_/ / / /_/ / / /_/ / _ / _ / / / + \____/ /_/ /_/ \_,__/ \____/ \__,_/ /_/ /_/ /_/ + +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite + .page-landing__button-signin.btn-ignite.btn-ignite--primary(ui-sref='signin') Sign In +.content(ui-view='page') +web-console-footer.web-console-footer__page-bottom \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/page-landing/style.scss b/modules/web-console/frontend/app/components/page-landing/style.scss index 477d0101c0f88..8f93a9c3af9bd 100644 --- a/modules/web-console/frontend/app/components/page-landing/style.scss +++ b/modules/web-console/frontend/app/components/page-landing/style.scss @@ -24,21 +24,20 @@ @include custom_btn; } +.page-landing__button-signin { + align-self: center; + margin-left: 30px; + margin-right: var(--page-side-padding) !important; + min-width: 80px; + font-weight: 500; + padding: 10px 25px !important; + flex: 0 0 auto; +} + page-landing { font-family: Roboto; display: block; - grid-column: span 3; - grid-row: span 3; - - .page-landing__button-signin { - align-self: center; - margin-left: 30px; - margin-right: var(--page-side-padding);; - min-width: 80px; - font-weight: 500; - padding: 10px 25px !important; - flex: 0 0 auto; - } + margin: 0 calc(var(--page-side-padding) * -1); .btn-custom { @include custom_btn; diff --git a/modules/web-console/frontend/app/components/page-landing/template.pug b/modules/web-console/frontend/app/components/page-landing/template.pug index 35d4e0164b873..bf926fae07411 100644 --- a/modules/web-console/frontend/app/components/page-landing/template.pug +++ b/modules/web-console/frontend/app/components/page-landing/template.pug @@ -14,10 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. -web-console-header(hide-menu-button='true') - .web-console-header-content__title Management console for Apache Ignite - .page-landing__button-signin.btn-ignite.btn-ignite--primary(ui-sref='signin') Sign In - section.intro-container-wrapper .container .col-lg-6.col-md-6.col-sm-6.col-xs-12.intro-content @@ -60,5 +56,3 @@ section.features-container-wrapper p The Web Console allows you to have accounts with different roles. .align-center.text-center a.btn.btn-lg.btn-primary.btn-custom(ui-sref='signup') Get Started - -web-console-footer.web-console-footer__page-bottom diff --git a/modules/web-console/frontend/app/components/page-password-changed/controller.js b/modules/web-console/frontend/app/components/page-password-changed/controller.ts similarity index 74% rename from modules/web-console/frontend/app/components/page-password-changed/controller.js rename to modules/web-console/frontend/app/components/page-password-changed/controller.ts index e3b0a035b5e14..9696a092fb114 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/controller.js +++ b/modules/web-console/frontend/app/components/page-password-changed/controller.ts @@ -15,12 +15,18 @@ * limitations under the License. */ -export default class { - static $inject = ['$state', '$timeout']; +import {StateService} from '@uirouter/angularjs'; - constructor($state, $timeout) { +export default class implements ng.IPostLink { + static $inject = ['$state', '$timeout', '$element']; + + constructor($state: StateService, $timeout: ng.ITimeoutService, private el: JQLite) { $timeout(() => { $state.go('signin'); }, 10000); } + + $postLink() { + this.el.addClass('public-page'); + } } diff --git a/modules/web-console/frontend/app/components/page-password-changed/index.js b/modules/web-console/frontend/app/components/page-password-changed/index.js index 7ff3e093fbafd..903138f0b1ef1 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/index.js +++ b/modules/web-console/frontend/app/components/page-password-changed/index.js @@ -19,6 +19,7 @@ import angular from 'angular'; import template from './template.pug'; import controller from './controller'; +import publicTemplate from '../../../views/public.pug'; import './style.scss'; @@ -34,6 +35,9 @@ export default angular url: '/changed', views: { '@': { + template: publicTemplate + }, + 'page@password.send': { component: 'pagePasswordChanged' } }, diff --git a/modules/web-console/frontend/app/components/page-password-changed/style.scss b/modules/web-console/frontend/app/components/page-password-changed/style.scss index c7b5609b856e4..e32e9b2c4849c 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/style.scss +++ b/modules/web-console/frontend/app/components/page-password-changed/style.scss @@ -19,24 +19,17 @@ page-password-changed { display: flex; flex: 1 0 auto; flex-direction: column; - grid-column: span 3; - grid-row: span 3; + min-height: 100%; + justify-content: center; + align-items: center; + max-width: initial !important; - section { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 0 var(--page-side-padding); - - h2 { - margin-bottom: 30px; - } + h2 { + margin-bottom: 30px; + } - p { - font-size: 16px; - text-align: center; - } + p { + font-size: 16px; + text-align: center; } } diff --git a/modules/web-console/frontend/app/components/page-password-changed/template.pug b/modules/web-console/frontend/app/components/page-password-changed/template.pug index 2c91e465ea591..82c2cc1608ac7 100644 --- a/modules/web-console/frontend/app/components/page-password-changed/template.pug +++ b/modules/web-console/frontend/app/components/page-password-changed/template.pug @@ -14,14 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. -web-console-header(hide-menu-button='true') - .web-console-header-content__title Management console for Apache Ignite +h2 Ready! -section - h2 Ready! - - p - | Further instructions for password reset have been sent to your e-mail address.#[br] - | You'll be redirected back automatically in a few seconds. If not, please #[a(ui-sref='signin') click here]. - -web-console-footer.web-console-footer__page-bottom \ No newline at end of file +p + | Further instructions for password reset have been sent to your e-mail address.#[br] + | You'll be redirected back automatically in a few seconds. If not, please #[a(ui-sref='signin') click here]. diff --git a/modules/web-console/frontend/app/components/page-password-reset/controller.js b/modules/web-console/frontend/app/components/page-password-reset/controller.js index 53d6c69393a95..b69e56610a7b3 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/controller.js +++ b/modules/web-console/frontend/app/components/page-password-reset/controller.js @@ -16,7 +16,9 @@ */ export default class { - static $inject = ['$modal', '$http', '$state', 'IgniteMessages']; + static $inject = ['$modal', '$http', '$state', 'IgniteMessages', '$element']; + /** @type {JQLite} */ + el; /** * @param {mgcrea.ngStrap.modal.IModalService} $modal @@ -24,10 +26,15 @@ export default class { * @param {import('@uirouter/angularjs').StateService} $state * @param {ReturnType} Messages */ - constructor($modal, $http, $state, Messages) { + constructor($modal, $http, $state, Messages, el) { this.$http = $http; this.$state = $state; this.Messages = Messages; + this.el = el; + } + + $postLink() { + this.el.addClass('public-page'); } $onInit() { diff --git a/modules/web-console/frontend/app/components/page-password-reset/index.js b/modules/web-console/frontend/app/components/page-password-reset/index.js index 028bfaee98093..c07fa23eb7234 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/index.js +++ b/modules/web-console/frontend/app/components/page-password-reset/index.js @@ -22,6 +22,7 @@ import _ from 'lodash'; import template from './template.pug'; import controller from './controller'; +import publicTemplate from '../../../views/public.pug'; import './style.scss'; @@ -44,8 +45,10 @@ export default angular url: '/reset?{token}', views: { '@': { + template: publicTemplate + }, + 'page@password.reset': { component: 'pagePasswordReset' - } }, redirectTo: (trans) => { diff --git a/modules/web-console/frontend/app/components/page-password-reset/style.scss b/modules/web-console/frontend/app/components/page-password-reset/style.scss index 90aa9784c9ede..05ef953114218 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/style.scss +++ b/modules/web-console/frontend/app/components/page-password-reset/style.scss @@ -19,31 +19,15 @@ page-password-reset { display: flex; flex: 1 0 auto; flex-direction: column; - grid-column: span 3; - grid-row: span 3; - &>section { - margin-left: auto; - margin-right: auto; - width: 530px; - flex: 1; - padding: 0 var(--page-side-padding); + .form-footer { + padding: 15px 0; + text-align: right; + display: flex; + align-items: center; - h3 { - font-size: 38px; - font-weight: 300; - margin: 30px 0 30px; - } - - .form-footer { - padding: 15px 0; - text-align: right; - display: flex; - align-items: center; - - .btn-ignite { - margin-left: auto; - } + .btn-ignite { + margin-left: auto; } } diff --git a/modules/web-console/frontend/app/components/page-password-reset/template.pug b/modules/web-console/frontend/app/components/page-password-reset/template.pug index 220222de4c51b..c0df3c9bb27c6 100644 --- a/modules/web-console/frontend/app/components/page-password-reset/template.pug +++ b/modules/web-console/frontend/app/components/page-password-reset/template.pug @@ -16,50 +16,45 @@ include /app/helpers/jade/mixins -web-console-header(hide-menu-button='true') - .web-console-header-content__title Management console for Apache Ignite - -section - //- This doesn't seem to do anything 😵 - .main-content(ng-if='error') - .text-center - p {{::$ctrl.ui.error}} - h3(ng-if-start='$ctrl.ui.token && !$ctrl.ui.error') Reset Password - form.page-password-reset__grid(name='$ctrl.form' ng-init='reset_info.token = token' ng-if-end) - +form-field__email({ - label: 'E-mail:', - model: '$ctrl.ui.email', - disabled: true - }) - - +form-field__password({ - label: 'New password:', - model: '$ctrl.ui.password', - name: '"password"', - required: true, - placeholder: 'New password' - })( - ignite-auto-focus - ignite-on-enter-focus-move='passwordConfirmInput' +//- This doesn't seem to do anything 😵 +.main-content(ng-if='error') + .text-center + p {{::$ctrl.ui.error}} +h3.public-page__title(ng-if-start='$ctrl.ui.token && !$ctrl.ui.error') Reset Password +form.page-password-reset__grid(name='$ctrl.form' ng-init='reset_info.token = token' ng-if-end) + +form-field__email({ + label: 'E-mail:', + model: '$ctrl.ui.email', + disabled: true + }) + + +form-field__password({ + label: 'New password:', + model: '$ctrl.ui.password', + name: '"password"', + required: true, + placeholder: 'New password' + })( + ignite-auto-focus + ignite-on-enter-focus-move='passwordConfirmInput' + ) + +form-field__password({ + label: 'Confirm password:', + model: 'confirm', + name: '"passwordConfirm"', + required: true, + placeholder: 'Confirm new password' + })( + ignite-on-enter-focus-move='resetForm.$valid && resetPassword(user_info)' + ignite-match='$ctrl.ui.password' + ) + + footer.form-footer + a(ui-sref='default-state') Cancel + button.btn-ignite.btn-ignite--primary( + ng-disabled='$ctrl.form.$invalid' + ng-click='$ctrl.resetPassword()' ) - +form-field__password({ - label: 'Confirm password:', - model: 'confirm', - name: '"passwordConfirm"', - required: true, - placeholder: 'Confirm new password' - })( - ignite-on-enter-focus-move='resetForm.$valid && resetPassword(user_info)' - ignite-match='$ctrl.ui.password' - ) - - footer.form-footer - a(ui-sref='default-state') Cancel - button.btn-ignite.btn-ignite--primary( - ng-disabled='$ctrl.form.$invalid' - ng-click='$ctrl.resetPassword()' - ) - svg.icon-left(ignite-icon='checkmark') - | Save Changes + svg.icon-left(ignite-icon='checkmark') + | Save Changes -web-console-footer.web-console-footer__page-bottom diff --git a/modules/web-console/frontend/app/components/page-signin/controller.ts b/modules/web-console/frontend/app/components/page-signin/controller.ts index c461b86e92f0d..18fee0bc5feda 100644 --- a/modules/web-console/frontend/app/components/page-signin/controller.ts +++ b/modules/web-console/frontend/app/components/page-signin/controller.ts @@ -27,7 +27,7 @@ interface ISigninFormController extends ng.IFormController { password: ng.INgModelController } -export default class { +export default class implements ng.IPostLink { data: ISiginData = { email: null, password: null @@ -37,15 +37,16 @@ export default class { serverError: string = null; - static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils']; + static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils', '$element']; - constructor(private Auth: AuthService, private IgniteMessages, private IgniteFormUtils) {} + constructor(private Auth: AuthService, private IgniteMessages, private IgniteFormUtils, private el: JQLite) {} canSubmitForm(form: ISigninFormController) { return form.$error.server ? true : !form.$invalid; } $postLink() { + this.el.addClass('public-page'); this.form.email.$validators.server = () => !this.serverError; this.form.password.$validators.server = () => !this.serverError; } diff --git a/modules/web-console/frontend/app/components/page-signin/run.ts b/modules/web-console/frontend/app/components/page-signin/run.ts index aa5647c44a363..4c0a1e6ced70e 100644 --- a/modules/web-console/frontend/app/components/page-signin/run.ts +++ b/modules/web-console/frontend/app/components/page-signin/run.ts @@ -15,6 +15,7 @@ * limitations under the License. */ +import publicTemplate from '../../../views/public.pug'; import {UIRouter} from '@uirouter/angularjs'; import {IIgniteNg1StateDeclaration} from 'app/types'; @@ -22,7 +23,14 @@ export function registerState($uiRouter: UIRouter) { const state: IIgniteNg1StateDeclaration = { url: '/signin', name: 'signin', - component: 'pageSignin', + views: { + '': { + template: publicTemplate + }, + 'page@signin': { + component: 'pageSignin' + } + }, unsaved: true, redirectTo: (trans) => { const skipStates = new Set(['signup', 'forgotPassword', 'landing']); diff --git a/modules/web-console/frontend/app/components/page-signin/style.scss b/modules/web-console/frontend/app/components/page-signin/style.scss index fdab7cc9b19b3..729d439dbb055 100644 --- a/modules/web-console/frontend/app/components/page-signin/style.scss +++ b/modules/web-console/frontend/app/components/page-signin/style.scss @@ -18,36 +18,19 @@ page-signin { display: flex; flex-direction: column; - flex: 1 0 auto; - grid-column: span 3; - grid-row: span 3; - section { - margin-left: auto; - margin-right: auto; - width: 530px; - flex: 1; - padding: 0 var(--page-side-padding); - - h3 { - font-size: 38px; - font-weight: 300; - margin: 30px 0 30px; - } - - .form-field { - margin: 10px 0; - } + .form-field { + margin: 10px 0; + } - .form-footer { - padding: 15px 0; - text-align: right; - display: flex; - align-items: center; + .form-footer { + padding: 15px 0; + text-align: right; + display: flex; + align-items: center; - .btn-ignite { - margin-left: auto; - } + .btn-ignite { + margin-left: auto; } } diff --git a/modules/web-console/frontend/app/components/page-signin/template.pug b/modules/web-console/frontend/app/components/page-signin/template.pug index 18682f48aeae2..2a128a0329111 100644 --- a/modules/web-console/frontend/app/components/page-signin/template.pug +++ b/modules/web-console/frontend/app/components/page-signin/template.pug @@ -16,42 +16,35 @@ include /app/helpers/jade/mixins -web-console-header(hide-menu-button='true') - .web-console-header-content__title Management console for Apache Ignite - -section - -var form = '$ctrl.form' - h3 Sign In - form(name=form novalidate ng-submit='$ctrl.signin()') - +form-field__email({ - label: 'Email:', - model: '$ctrl.data.email', - name: '"email"', - placeholder: 'Input email', - required: true - })( - ng-model-options='{allowInvalid: true}' - autocomplete='email' - ignite-auto-focus - ) - +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) - +form-field__password({ - label: 'Password:', - model: '$ctrl.data.password', - name: '"password"', - placeholder: 'Input password', - required: true - })( - ng-model-options='{allowInvalid: true}' - autocomplete='current-password' - ) - +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) - footer.form-footer - a(ui-sref='forgotPassword({email: $ctrl.data.email})') Forgot password? - button.btn-ignite.btn-ignite--primary( - type='submit' - ) Sign In - footer.page-signin__no-account-message - | Don't have an account? #[a(ui-sref='signup') Get started] - -web-console-footer.web-console-footer__page-bottom +h3.public-page__title Sign In +form(name='$ctrl.form' novalidate ng-submit='$ctrl.signin()') + +form-field__email({ + label: 'Email:', + model: '$ctrl.data.email', + name: '"email"', + placeholder: 'Input email', + required: true + })( + ng-model-options='{allowInvalid: true}' + autocomplete='email' + ignite-auto-focus + ) + +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) + +form-field__password({ + label: 'Password:', + model: '$ctrl.data.password', + name: '"password"', + placeholder: 'Input password', + required: true + })( + ng-model-options='{allowInvalid: true}' + autocomplete='current-password' + ) + +form-field__error({error: 'server', message: `{{$ctrl.serverError}}`}) + footer.form-footer + a(ui-sref='forgotPassword({email: $ctrl.data.email})') Forgot password? + button.btn-ignite.btn-ignite--primary( + type='submit' + ) Sign In +footer.page-signin__no-account-message + | Don't have an account? #[a(ui-sref='signup') Get started] diff --git a/modules/web-console/frontend/app/components/page-signup/controller.ts b/modules/web-console/frontend/app/components/page-signup/controller.ts index ddf77be099ca9..93d99870f3981 100644 --- a/modules/web-console/frontend/app/components/page-signup/controller.ts +++ b/modules/web-console/frontend/app/components/page-signup/controller.ts @@ -20,7 +20,7 @@ import MessagesFactory from '../../services/Messages.service'; import FormUtilsFactoryFactory from '../../services/FormUtils.service'; import {ISignupData} from '../form-signup'; -export default class PageSignup { +export default class PageSignup implements ng.IPostLink { form: ng.IFormController; data: ISignupData = { @@ -34,14 +34,19 @@ export default class PageSignup { serverError: string | null = null; - static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils']; + static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils', '$element']; constructor( private Auth: Auth, private IgniteMessages: ReturnType, - private IgniteFormUtils: ReturnType + private IgniteFormUtils: ReturnType, + private el: JQLite ) {} + $postLink() { + this.el.addClass('public-page'); + } + canSubmitForm(form: PageSignup['form']) { return form.$error.server ? true : !form.$invalid; } diff --git a/modules/web-console/frontend/app/components/page-signup/run.js b/modules/web-console/frontend/app/components/page-signup/run.js index 1d04fa257714f..bd2763802e85e 100644 --- a/modules/web-console/frontend/app/components/page-signup/run.js +++ b/modules/web-console/frontend/app/components/page-signup/run.js @@ -15,6 +15,8 @@ * limitations under the License. */ +import publicTemplate from '../../../views/public.pug'; + /** * @param {import("@uirouter/angularjs").UIRouter} $uiRouter */ @@ -23,7 +25,14 @@ export function registerState($uiRouter) { const state = { name: 'signup', url: '/signup', - component: 'pageSignup', + views: { + '': { + template: publicTemplate + }, + 'page@signup': { + component: 'pageSignup' + } + }, unsaved: true, tfMetaTags: { title: 'Sign Up' diff --git a/modules/web-console/frontend/app/components/page-signup/style.scss b/modules/web-console/frontend/app/components/page-signup/style.scss index b08386affdcf0..0930036fb8e14 100644 --- a/modules/web-console/frontend/app/components/page-signup/style.scss +++ b/modules/web-console/frontend/app/components/page-signup/style.scss @@ -19,32 +19,15 @@ page-signup { display: flex; flex-direction: column; flex: 1 0 auto; - grid-column: span 3; - grid-row: span 3; - section { - flex: 1; - padding: 0 var(--page-side-padding); + form footer { + padding: 15px 0; + text-align: right; + display: flex; + align-items: center; - h3 { - font-size: 38px; - font-weight: 300; - margin: 30px 0 30px; - } - - margin-left: auto; - margin-right: auto; - width: 530px; - - form footer { - padding: 15px 0; - text-align: right; - display: flex; - align-items: center; - - .btn-ignite { - margin-left: auto; - } + .btn-ignite { + margin-left: auto; } } diff --git a/modules/web-console/frontend/app/components/page-signup/template.pug b/modules/web-console/frontend/app/components/page-signup/template.pug index b76fcf1ada1bf..686079ad94a1b 100644 --- a/modules/web-console/frontend/app/components/page-signup/template.pug +++ b/modules/web-console/frontend/app/components/page-signup/template.pug @@ -14,22 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. -web-console-header(hide-menu-button='true') - .web-console-header-content__title Management console for Apache Ignite - -section - h3 Don't Have An Account? - form(name='$ctrl.form' novalidate ng-submit='$ctrl.signup()') - form-signup( - outer-form='$ctrl.form' - ng-model='$ctrl.data' - server-error='$ctrl.serverError' - ) - footer.full-width.form-footer - button.btn-ignite.btn-ignite--primary( - type='submit' - ) Sign Up - footer.page-signup__has-account-message - | Already have an account? #[a(ui-sref='signin') Sign in here] - -web-console-footer.web-console-footer__page-bottom +h3.public-page__title Don't Have An Account? +form(name='$ctrl.form' novalidate ng-submit='$ctrl.signup()') + form-signup( + outer-form='$ctrl.form' + ng-model='$ctrl.data' + server-error='$ctrl.serverError' + ) + footer.full-width.form-footer + button.btn-ignite.btn-ignite--primary( + type='submit' + ) Sign Up +footer.page-signup__has-account-message + | Already have an account? #[a(ui-sref='signin') Sign in here] diff --git a/modules/web-console/frontend/app/components/web-console-footer/index.js b/modules/web-console/frontend/app/components/web-console-footer/index.js index 8796bb7b787be..4fa461779da83 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/index.js +++ b/modules/web-console/frontend/app/components/web-console-footer/index.js @@ -20,4 +20,13 @@ import component from './component'; export default angular .module('ignite-console.web-console-footer', []) - .component('webConsoleFooter', component); + .component('webConsoleFooter', component) + .directive('webConsoleFooterPageBottom', function() { + return { + restrict: 'C', + link(scope, el) { + el.parent().addClass('wrapper-public'); + scope.$on('$destroy', () => el.parent().removeClass('wrapper-public')); + } + }; + }); diff --git a/modules/web-console/frontend/app/components/web-console-footer/style.scss b/modules/web-console/frontend/app/components/web-console-footer/style.scss index a0a9967a64af0..50c08eaa39121 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/style.scss +++ b/modules/web-console/frontend/app/components/web-console-footer/style.scss @@ -30,6 +30,7 @@ web-console-footer { } .web-console-footer__page-bottom { + grid-area: footer; color: #fafafa; background: #393939; font-size: 12px; diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index ab861f675479a..b726c541cd832 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -290,6 +290,25 @@ body { padding-left: var(--page-side-padding); padding-right: var(--page-side-padding); } + + &.wrapper-public { + grid-template-columns: 1fr; + grid-template-rows: auto var(--header-height) 1fr auto; + grid-template-areas: 'notifications' 'header' 'content' 'footer'; + } +} + +.public-page { + margin-left: auto; + margin-right: auto; + flex: 1 0 auto; + max-width: 530px; + + .public-page__title { + font-size: 38px; + font-weight: 300; + margin: 30px 0 30px; + } } .details-row { diff --git a/modules/web-console/frontend/views/public.pug b/modules/web-console/frontend/views/public.pug new file mode 100644 index 0000000000000..ca7977410d3f6 --- /dev/null +++ b/modules/web-console/frontend/views/public.pug @@ -0,0 +1,12 @@ +//- + Copyright (C) GridGain Systems. All Rights Reserved. + _________ _____ __________________ _____ + __ ____/___________(_)______ /__ ____/______ ____(_)_______ + _ / __ __ ___/__ / _ __ / _ / __ _ __ `/__ / __ __ \ + / /_/ / _ / _ / / /_/ / / /_/ / / /_/ / _ / _ / / / + \____/ /_/ /_/ \_,__/ \____/ \__,_/ /_/ /_/ /_/ + +web-console-header(hide-menu-button='true') + .web-console-header-content__title Management console for Apache Ignite +.content(ui-view='page') +web-console-footer.web-console-footer__page-bottom \ No newline at end of file From cf8ce9f3e738c46538075cfd2b20973a92e995b8 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 12:53:26 +0700 Subject: [PATCH 13/32] IGNITE-10239 Handle navigation items overflow. --- .../components/web-console-sidebar/index.ts | 2 + .../components/web-console-sidebar/style.scss | 13 ++--- .../web-console-sidebar/template.pug | 3 +- .../web-console-sidebar-navigation/style.scss | 3 +- .../web-console-sidebar-overflow/component.ts | 26 ++++++++++ .../controller.ts | 50 ++++++++++++++++++ .../web-console-sidebar-overflow/style.scss | 52 +++++++++++++++++++ .../web-console-sidebar-overflow/template.pug | 10 ++++ 8 files changed, 151 insertions(+), 8 deletions(-) create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/component.ts create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/style.scss create mode 100644 modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/index.ts b/modules/web-console/frontend/app/components/web-console-sidebar/index.ts index e20bd3e946f23..7b3a67726f16e 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/index.ts +++ b/modules/web-console/frontend/app/components/web-console-sidebar/index.ts @@ -16,9 +16,11 @@ */ import template from './template.pug'; +import {component as overflow} from './web-console-sidebar-overflow/component'; import {component as nav} from './web-console-sidebar-navigation/component'; import {component as sidebar} from './component'; export default angular.module('sidebar', []) + .component('webConsoleSidebarOverflow', overflow) .component('webConsoleSidebarNavigation', nav) .component('webConsoleSidebar', sidebar); diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss index 50b4d33de6ff6..8f6dd9096ff8e 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss @@ -22,15 +22,16 @@ web-console-sidebar { border-right: 1px #dddddd solid; --width-narrow: 75px; --width-wide: 280px; + // Does not include notifications height + max-height: calc(100vh - var(--header-height)); + position: sticky; + top: var(--header-height); - web-console-sidebar-navigation { - position: sticky; - top: var(--header-height); + web-console-sidebar-overflow { + flex: 1; } web-console-footer { - position: sticky; - bottom: 0; - margin-top: auto; + flex: 0 0 auto; } } \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/template.pug b/modules/web-console/frontend/app/components/web-console-sidebar/template.pug index 6b8efc703a6e3..f82d9990d698b 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/template.pug +++ b/modules/web-console/frontend/app/components/web-console-sidebar/template.pug @@ -14,5 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. -web-console-sidebar-navigation(opened='$ctrl.sidebarOpened$|async:this' ng-if='$ctrl.showNavigation') +web-console-sidebar-overflow + web-console-sidebar-navigation(opened='$ctrl.sidebarOpened$|async:this' ng-if='$ctrl.showNavigation') web-console-footer(ng-if='$ctrl.sidebarOpened$|async:this') \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss index ff066c3c7f1fa..bfdbae3de2174 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -51,7 +51,8 @@ web-console-sidebar-navigation { content: ''; display: block; width: 2px; - right: -2px; + // Line can't be outside of scrollable container + right: 0; top: 0; bottom: 0; position: absolute; diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/component.ts b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/component.ts new file mode 100644 index 0000000000000..0f69e2dcabc6d --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/component.ts @@ -0,0 +1,26 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import controller from './controller'; +import template from './template.pug'; +import './style.scss'; + +export const component: ng.IComponentOptions = { + controller, + transclude: true, + template +}; diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts new file mode 100644 index 0000000000000..64adf9d399fd0 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts @@ -0,0 +1,50 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import ResizeObserver from 'resize-observer-polyfill'; + +export default class WebCOnsoleSidebarOverflow { + static $inject = ['$element', 'gridUtil', '$window'] + constructor(private el: JQLite, private gridUtil: {getScrollbarWidth(): number}, private $win: ng.IWindowService) {} + scrollEl!: JQLite + resizeObserver: ResizeObserver + $onInit() { + this.el.css('--scrollbar-width', this.gridUtil.getScrollbarWidth()); + } + $postLink() { + this.scrollEl[0].addEventListener('scroll', this.onScroll, {passive: true}); + this.resizeObserver = new ResizeObserver(() => this.applyStyles(this.scrollEl[0])); + this.resizeObserver.observe(this.el[0]); + } + $onDestroy() { + this.scrollEl[0].removeEventListener('scroll', this.onScroll); + this.resizeObserver.disconnect(); + } + applyStyles(target: HTMLElement) { + const {offsetHeight, scrollTop, scrollHeight} = target; + const top = scrollTop !== 0; + const bottom = (offsetHeight + scrollTop) !== scrollHeight; + + target.classList.toggle('top', scrollTop !== 0); + target.classList.toggle('bottom', (offsetHeight + scrollTop) !== scrollHeight); + } + onScroll = (e: UIEvent) => { + this.$win.requestAnimationFrame(() => { + this.applyStyles(e.target as HTMLElement); + }); + } +} diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/style.scss new file mode 100644 index 0000000000000..cbc6adca2a9b8 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/style.scss @@ -0,0 +1,52 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +web-console-sidebar-overflow { + overflow: hidden; + position: relative; + display: flex; + + &>.web-console-sidebar-overflow__scroll-root { + overflow-x: hidden; + overflow-y: scroll; + margin-right: calc(-1 * var(--scrollbar-width)); + + &.top:before { + display: block; + width: 100%; + content: ''; + height: 1px; + position: absolute; + top: -1px; + box-shadow: 0 0 9px 1px #a0a0a0; + transform: translateZ(1px); + } + &.bottom:after { + display: block; + width: 100%; + content: ''; + position: absolute; + bottom: 0; + box-shadow: 0 0 9px 1px #a0a0a0; + transform: translateZ(1px); + } + + &>ng-transclude { + display: block; + } + } +} \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug new file mode 100644 index 0000000000000..6f669d78d04b0 --- /dev/null +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug @@ -0,0 +1,10 @@ +//- + Copyright (C) GridGain Systems. All Rights Reserved. + _________ _____ __________________ _____ + __ ____/___________(_)______ /__ ____/______ ____(_)_______ + _ / __ __ ___/__ / _ __ / _ / __ _ __ `/__ / __ __ \ + / /_/ / _ / _ / / /_/ / / /_/ / / /_/ / _ / _ / / / + \____/ /_/ /_/ \_,__/ \____/ \__,_/ /_/ /_/ /_/ + +.web-console-sidebar-overflow__scroll-root(ng-ref='$ctrl.scrollEl' ng-ref-read='$element') + ng-transclude(ng-style='::{"--scrollbar-width": $ctrl.SCROLLBAR_WIDTH}') \ No newline at end of file From a7fdd67589df0f595915814eecd580a24b8bb506 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 13:38:40 +0700 Subject: [PATCH 14/32] IGNITE-10239 Make nav menu items accessible by keyboard. --- .../web-console-sidebar-navigation/style.scss | 4 ++-- .../web-console-sidebar-navigation/template.pug | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss index bfdbae3de2174..8f21b9f954a1c 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -39,7 +39,7 @@ web-console-sidebar-navigation { justify-content: center; align-items: center; - &:hover { + &:hover, &:focus { color: var(--active-link-color); } @@ -76,7 +76,7 @@ web-console-sidebar-navigation { padding: 10px 27px 11px; width: var(--width-wide); - &:hover { + &:hover, &:focus { color: var(--active-link-color); } &.web-console-sidebar-navigation__link-active { diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug index a127efb2db6a8..c35de9dfdbf56 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug @@ -29,6 +29,7 @@ nav 'web-console-sidebar-navigation__link-narrow': !$ctrl.opened, 'web-console-sidebar-navigation__link-wide': $ctrl.opened }` + tabindex='0' ) svg.web-console-sidebar-navigation__link-icon(ignite-icon='{{item.icon}}') span.web-console-sidebar-navigation__link-content(translate='{{item.label}}') From df4fba7cd1219f27b74208d05f19669e1aad0a68 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 14:12:22 +0700 Subject: [PATCH 15/32] IGNITE-10239 Make overflow work with page zoom. --- .../web-console-sidebar-overflow/controller.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts index 64adf9d399fd0..d5403f4caa1f0 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts @@ -37,10 +37,10 @@ export default class WebCOnsoleSidebarOverflow { applyStyles(target: HTMLElement) { const {offsetHeight, scrollTop, scrollHeight} = target; const top = scrollTop !== 0; - const bottom = (offsetHeight + scrollTop) !== scrollHeight; + const bottom = Math.floor((offsetHeight + scrollTop)) !== Math.floor(scrollHeight); - target.classList.toggle('top', scrollTop !== 0); - target.classList.toggle('bottom', (offsetHeight + scrollTop) !== scrollHeight); + target.classList.toggle('top', top); + target.classList.toggle('bottom', bottom); } onScroll = (e: UIEvent) => { this.$win.requestAnimationFrame(() => { From 33faf8acc5afa197e93d4b48b8bf9fc7309a9dac Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 14:37:40 +0700 Subject: [PATCH 16/32] IGNITE-10239 Add bottom padding to all pages. --- .../web-console/frontend/app/components/page-landing/style.scss | 2 +- modules/web-console/frontend/public/stylesheets/style.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/web-console/frontend/app/components/page-landing/style.scss b/modules/web-console/frontend/app/components/page-landing/style.scss index 8f93a9c3af9bd..90f3ddaf7f2e9 100644 --- a/modules/web-console/frontend/app/components/page-landing/style.scss +++ b/modules/web-console/frontend/app/components/page-landing/style.scss @@ -37,7 +37,7 @@ page-landing { font-family: Roboto; display: block; - margin: 0 calc(var(--page-side-padding) * -1); + margin: 0 calc(var(--page-side-padding) * -1) calc(var(--page-side-padding) * -1); .btn-custom { @include custom_btn; diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index b726c541cd832..d12ce86fbac82 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -289,6 +289,7 @@ body { grid-area: content; padding-left: var(--page-side-padding); padding-right: var(--page-side-padding); + padding-bottom: var(--page-side-padding); } &.wrapper-public { From 564da7506b0f6cb10f90789fc251c0a97d2671f4 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 15:37:31 +0700 Subject: [PATCH 17/32] IGNITE-10239 Safari fixes. --- .../frontend/app/components/web-console-sidebar/style.scss | 1 + modules/web-console/frontend/public/stylesheets/style.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss index 8f6dd9096ff8e..8a459aad79348 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss @@ -24,6 +24,7 @@ web-console-sidebar { --width-wide: 280px; // Does not include notifications height max-height: calc(100vh - var(--header-height)); + position: -webkit-sticky; position: sticky; top: var(--header-height); diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index d12ce86fbac82..d350b6f0a2272 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -274,6 +274,7 @@ body { web-console-header { grid-area: header; + position: -webkit-sticky; position: sticky; top: 0; z-index: 10; From 085438a8f4f6fa0f13fde86e4ff546ac8767d2ba Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 16:30:21 +0700 Subject: [PATCH 18/32] IGNITE-10239 Tweak some layout styles. --- .../web-console/frontend/public/stylesheets/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index d350b6f0a2272..a9e953f439448 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -291,6 +291,14 @@ body { padding-left: var(--page-side-padding); padding-right: var(--page-side-padding); padding-bottom: var(--page-side-padding); + display: flex; + flex-direction: column; + + &>ui-view { + display: flex; + flex-direction: column; + flex: 1; + } } &.wrapper-public { @@ -304,6 +312,7 @@ body { margin-left: auto; margin-right: auto; flex: 1 0 auto; + width: 100%; max-width: 530px; .public-page__title { From a14e26eaccde699831d4f67adfa1379a67e18f56 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 16:54:45 +0700 Subject: [PATCH 19/32] IGNITE-10239 Fix footer position on 404 screen. --- .../frontend/app/components/web-console-sidebar/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss index 8a459aad79348..ad0062b16150d 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss @@ -34,5 +34,9 @@ web-console-sidebar { web-console-footer { flex: 0 0 auto; + + &:first-child { + margin-top: auto; + } } } \ No newline at end of file From 6295d4ae907079fa2db998598dc666a8168fc0c5 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 17:01:16 +0700 Subject: [PATCH 20/32] IGNITE-10239 Cleanup. --- modules/web-console/frontend/public/stylesheets/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/modules/web-console/frontend/public/stylesheets/style.scss b/modules/web-console/frontend/public/stylesheets/style.scss index a9e953f439448..3f601be4570bb 100644 --- a/modules/web-console/frontend/public/stylesheets/style.scss +++ b/modules/web-console/frontend/public/stylesheets/style.scss @@ -2056,10 +2056,6 @@ html, body { position: absolute !important; } -.demo-mode { - // padding-top: 30px; -} - // Fix for injecting svg icon into BS btn .btn--with-icon { display: flex; From 4a2aed5bf600c7f690cf647c952f51aadbc39c60 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Mon, 10 Dec 2018 17:29:05 +0700 Subject: [PATCH 21/32] IGNITE-10239 Fix e2e tests. --- .../web-console/e2e/testcafe/components/topNavigation.js | 6 ++++-- modules/web-console/e2e/testcafe/components/userMenu.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/modules/web-console/e2e/testcafe/components/topNavigation.js b/modules/web-console/e2e/testcafe/components/topNavigation.js index b4262d0f80661..6db745e741191 100644 --- a/modules/web-console/e2e/testcafe/components/topNavigation.js +++ b/modules/web-console/e2e/testcafe/components/topNavigation.js @@ -17,5 +17,7 @@ import {Selector} from 'testcafe'; -export const configureNavButton = Selector('.wch-nav-item').withText('Configure'); -export const queriesNavButton = Selector('.wch-nav-item').withText('Queries'); +export const toggleMenuButton = Selector('.web-console-header__togle-menu-button'); + +export const configureNavButton = Selector('.web-console-sidebar-navigation__link[title="Configuration"]'); +export const queriesNavButton = Selector('.web-console-sidebar-navigation__link[title="Queries"]'); diff --git a/modules/web-console/e2e/testcafe/components/userMenu.js b/modules/web-console/e2e/testcafe/components/userMenu.js index 75246c8d6cae4..973f21f184d86 100644 --- a/modules/web-console/e2e/testcafe/components/userMenu.js +++ b/modules/web-console/e2e/testcafe/components/userMenu.js @@ -17,7 +17,7 @@ import {Selector, t} from 'testcafe'; -const _selector = Selector('[ignite-userbar]'); +const _selector = Selector('user-menu'); export const userMenu = { _selector, From fe0ff739f0883fce8a57e07e9ef09ce2f93c2bd7 Mon Sep 17 00:00:00 2001 From: Andrey Novikov Date: Tue, 11 Dec 2018 18:32:49 +0700 Subject: [PATCH 22/32] IGNITE-10239 Fixed headers. --- .../app/components/page-landing/public.pug | 20 +++++++++++++------ .../web-console-sidebar-overflow/template.pug | 20 +++++++++++++------ modules/web-console/frontend/views/public.pug | 20 +++++++++++++------ 3 files changed, 42 insertions(+), 18 deletions(-) diff --git a/modules/web-console/frontend/app/components/page-landing/public.pug b/modules/web-console/frontend/app/components/page-landing/public.pug index 37c05e8c1c552..d9153f52f2c16 100644 --- a/modules/web-console/frontend/app/components/page-landing/public.pug +++ b/modules/web-console/frontend/app/components/page-landing/public.pug @@ -1,10 +1,18 @@ //- - Copyright (C) GridGain Systems. All Rights Reserved. - _________ _____ __________________ _____ - __ ____/___________(_)______ /__ ____/______ ____(_)_______ - _ / __ __ ___/__ / _ __ / _ / __ _ __ `/__ / __ __ \ - / /_/ / _ / _ / / /_/ / / /_/ / / /_/ / _ / _ / / / - \____/ /_/ /_/ \_,__/ \____/ \__,_/ /_/ /_/ /_/ + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. web-console-header(hide-menu-button='true') .web-console-header-content__title Management console for Apache Ignite diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug index 6f669d78d04b0..5b70da601f414 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug @@ -1,10 +1,18 @@ //- - Copyright (C) GridGain Systems. All Rights Reserved. - _________ _____ __________________ _____ - __ ____/___________(_)______ /__ ____/______ ____(_)_______ - _ / __ __ ___/__ / _ __ / _ / __ _ __ `/__ / __ __ \ - / /_/ / _ / _ / / /_/ / / /_/ / / /_/ / _ / _ / / / - \____/ /_/ /_/ \_,__/ \____/ \__,_/ /_/ /_/ /_/ + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. .web-console-sidebar-overflow__scroll-root(ng-ref='$ctrl.scrollEl' ng-ref-read='$element') ng-transclude(ng-style='::{"--scrollbar-width": $ctrl.SCROLLBAR_WIDTH}') \ No newline at end of file diff --git a/modules/web-console/frontend/views/public.pug b/modules/web-console/frontend/views/public.pug index ca7977410d3f6..934ac56978a3f 100644 --- a/modules/web-console/frontend/views/public.pug +++ b/modules/web-console/frontend/views/public.pug @@ -1,10 +1,18 @@ //- - Copyright (C) GridGain Systems. All Rights Reserved. - _________ _____ __________________ _____ - __ ____/___________(_)______ /__ ____/______ ____(_)_______ - _ / __ __ ___/__ / _ __ / _ / __ _ __ `/__ / __ __ \ - / /_/ / _ / _ / / /_/ / / /_/ / / /_/ / _ / _ / / / - \____/ /_/ /_/ \_,__/ \____/ \__,_/ /_/ /_/ /_/ + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. web-console-header(hide-menu-button='true') .web-console-header-content__title Management console for Apache Ignite From bfb287ca56f45c4efc537f2999cba19830f689fe Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Wed, 12 Dec 2018 10:07:05 +0700 Subject: [PATCH 23/32] IGNITE-10239 Cleanup. --- modules/web-console/frontend/app/index.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 modules/web-console/frontend/app/index.ts diff --git a/modules/web-console/frontend/app/index.ts b/modules/web-console/frontend/app/index.ts deleted file mode 100644 index e69de29bb2d1d..0000000000000 From 9027e409dc5da99735839995c3ba2fd8513dfc03 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Wed, 12 Dec 2018 10:07:31 +0700 Subject: [PATCH 24/32] IGNITE-10239 Show nav icons in expanded menu too. --- .../web-console-sidebar-navigation/style.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss index 8f21b9f954a1c..4d323a11e1034 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -31,6 +31,12 @@ web-console-sidebar-navigation { } } + .web-console-sidebar-navigation__link-icon { + width: 20px; + height: auto; + color: inherit; + } + .web-console-sidebar-navigation__link-narrow { height: var(--width-narrow); width: var(--width-narrow); @@ -59,14 +65,9 @@ web-console-sidebar-navigation { background: var(--active-link-color); } } - .web-console-sidebar-navigation__link-content { display: none; } - .web-console-sidebar-navigation__link-icon { - width: 20px; - height: auto; - } } .web-console-sidebar-navigation__link-wide { color: #393939; @@ -75,6 +76,8 @@ web-console-sidebar-navigation { font-size: 16px; padding: 10px 27px 11px; width: var(--width-wide); + display: inline-flex; + align-items: center; &:hover, &:focus { color: var(--active-link-color); @@ -84,7 +87,7 @@ web-console-sidebar-navigation { background: var(--active-link-color); } .web-console-sidebar-navigation__link-icon { - display: none; + margin-right: 12px; } } } \ No newline at end of file From 2720276ae8cb2889a97b48bf8d1cc6134f607c04 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Wed, 12 Dec 2018 11:47:30 +0700 Subject: [PATCH 25/32] IGNITE-10239 Show "download agent" button in collapsed sidebar footer. --- .../components/web-console-footer/style.scss | 63 ++++++++++++++++--- .../web-console-footer/template.pug | 18 ++++-- .../components/web-console-sidebar/style.scss | 2 + .../web-console-sidebar/template.pug | 5 +- .../web-console-sidebar-navigation/style.scss | 3 +- 5 files changed, 76 insertions(+), 15 deletions(-) diff --git a/modules/web-console/frontend/app/components/web-console-footer/style.scss b/modules/web-console/frontend/app/components/web-console-footer/style.scss index 50c08eaa39121..fe5eb64e584b0 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/style.scss +++ b/modules/web-console/frontend/app/components/web-console-footer/style.scss @@ -16,17 +16,61 @@ */ web-console-footer { - display: block; font-size: 12px; - width: var(--width-wide); - display: flex; - flex-direction: column; - padding: 27px 18px 27px 27px; - .#{&}__legal { color: rgba(0, 0, 0, 0.54); } + + &.web-console-footer__sidebar-closed { + width: var(--width-narrow); + border-top: 1px solid #dddddd; + + a { + color: var(--inactive-link-color); + margin-left: auto; + margin-right: auto; + width: 40px; + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; + + &:hover, &:focus { + color: var(--active-link-color); + } + [ignite-icon] { + transform: scale(1.25); + } + } + + .web-console-footer__sidebar-stuff { + position: sticky; + display: grid; + grid-row-gap: 15px; + padding-top: 20px; + padding-bottom: 20px; + } + + .web-console-footer__regular-stuff { + display: none; + } + } + + &.web-console-footer__sidebar-opened { + width: var(--width-wide); + display: flex; + flex-direction: column; + padding: 27px 18px 27px 27px; + + .web-console-footer__sidebar-stuff { + display: none; + } + + .web-console-footer__regular-stuff { + display: block; + } + } } .web-console-footer__page-bottom { @@ -35,8 +79,11 @@ web-console-footer { background: #393939; font-size: 12px; font-weight: 300; - padding-top: 12px; - padding-bottom: 12px; + padding: 12px var(--page-side-padding); + + .web-console-footer__sidebar-stuff { + display: none; + } p { margin: 0; diff --git a/modules/web-console/frontend/app/components/web-console-footer/template.pug b/modules/web-console/frontend/app/components/web-console-footer/template.pug index 1cfdeecf33cc7..dd76c7d9bd962 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/template.pug +++ b/modules/web-console/frontend/app/components/web-console-footer/template.pug @@ -15,8 +15,18 @@ limitations under the License. -p Apache Ignite Web Console ({{$ctrl.Version.webConsole}}) -p © {{::$ctrl.year}} The Apache Software Foundation. -p.web-console-footer__legal Apache, Apache Ignite, the Apache feather and the Apache Ignite logo are trademarks of The Apache Software Foundation. +.web-console-footer__sidebar-stuff + a( + href="/api/v1/downloads/agent" + target="_self" + ng-if='$ctrl.userIsAuthorized' + title='Download Agent' + ) + svg(ignite-icon='download') -a(href="/api/v1/downloads/agent" target="_self" ng-if='$ctrl.userIsAuthorized') Download Agent \ No newline at end of file +.web-console-footer__regular-stuff + p Apache Ignite Web Console ({{$ctrl.Version.webConsole}}) + p © {{::$ctrl.year}} The Apache Software Foundation. + p.web-console-footer__legal Apache, Apache Ignite, the Apache feather and the Apache Ignite logo are trademarks of The Apache Software Foundation. + + a(href="/api/v1/downloads/agent" target="_self" ng-if='$ctrl.userIsAuthorized') Download Agent \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss index ad0062b16150d..b625333b8b23d 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss @@ -22,6 +22,8 @@ web-console-sidebar { border-right: 1px #dddddd solid; --width-narrow: 75px; --width-wide: 280px; + --active-link-color: #ee2b27; + --inactive-link-color: #757575; // Does not include notifications height max-height: calc(100vh - var(--header-height)); position: -webkit-sticky; diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/template.pug b/modules/web-console/frontend/app/components/web-console-sidebar/template.pug index f82d9990d698b..f02f2c408f873 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/template.pug +++ b/modules/web-console/frontend/app/components/web-console-sidebar/template.pug @@ -16,4 +16,7 @@ web-console-sidebar-overflow web-console-sidebar-navigation(opened='$ctrl.sidebarOpened$|async:this' ng-if='$ctrl.showNavigation') -web-console-footer(ng-if='$ctrl.sidebarOpened$|async:this') \ No newline at end of file +web-console-footer(ng-class=`{ + "web-console-footer__sidebar-opened": ($ctrl.sidebarOpened$|async:this), + "web-console-footer__sidebar-closed": !($ctrl.sidebarOpened$|async:this) +}`) \ No newline at end of file diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss index 4d323a11e1034..c16fabddbad44 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -18,7 +18,6 @@ web-console-sidebar-navigation { display: flex; flex-direction: column; - --active-link-color: #ee2b27; padding-top: 14px; nav { @@ -40,7 +39,7 @@ web-console-sidebar-navigation { .web-console-sidebar-navigation__link-narrow { height: var(--width-narrow); width: var(--width-narrow); - color: #757575; + color: var(--inactive-link-color); display: flex; justify-content: center; align-items: center; From 493110d3bddcee9c84bb390e421c41fca2752557 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Wed, 12 Dec 2018 16:56:09 +0700 Subject: [PATCH 26/32] IGNITE-10239 Fix nav icon colors. --- .../web-console-sidebar-navigation/style.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss index c16fabddbad44..d4ad3d8762931 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -33,7 +33,7 @@ web-console-sidebar-navigation { .web-console-sidebar-navigation__link-icon { width: 20px; height: auto; - color: inherit; + color: var(--inactive-link-color); } .web-console-sidebar-navigation__link-narrow { @@ -46,6 +46,10 @@ web-console-sidebar-navigation { &:hover, &:focus { color: var(--active-link-color); + + .web-console-sidebar-navigation__link-icon { + color: inherit; + } } &.web-console-sidebar-navigation__link-active { @@ -80,6 +84,10 @@ web-console-sidebar-navigation { &:hover, &:focus { color: var(--active-link-color); + + .web-console-sidebar-navigation__link-icon { + color: inherit; + } } &.web-console-sidebar-navigation__link-active { color: white; From c67b0c9b275c4f8659dabae6d3091b3deaff43b6 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Wed, 12 Dec 2018 17:00:31 +0700 Subject: [PATCH 27/32] IGNITE-10239 Change "download agent" icon. --- .../components/web-console-footer/template.pug | 2 +- .../public/images/icons/downloadAgent.icon.svg | 16 ++++++++++++++++ .../frontend/public/images/icons/index.js | 1 + 3 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 modules/web-console/frontend/public/images/icons/downloadAgent.icon.svg diff --git a/modules/web-console/frontend/app/components/web-console-footer/template.pug b/modules/web-console/frontend/app/components/web-console-footer/template.pug index dd76c7d9bd962..2c1495e342e09 100644 --- a/modules/web-console/frontend/app/components/web-console-footer/template.pug +++ b/modules/web-console/frontend/app/components/web-console-footer/template.pug @@ -22,7 +22,7 @@ ng-if='$ctrl.userIsAuthorized' title='Download Agent' ) - svg(ignite-icon='download') + svg(ignite-icon='downloadAgent') .web-console-footer__regular-stuff p Apache Ignite Web Console ({{$ctrl.Version.webConsole}}) diff --git a/modules/web-console/frontend/public/images/icons/downloadAgent.icon.svg b/modules/web-console/frontend/public/images/icons/downloadAgent.icon.svg new file mode 100644 index 0000000000000..afb51eeb3cf96 --- /dev/null +++ b/modules/web-console/frontend/public/images/icons/downloadAgent.icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/modules/web-console/frontend/public/images/icons/index.js b/modules/web-console/frontend/public/images/icons/index.js index 544765d83e892..86da48741ce29 100644 --- a/modules/web-console/frontend/public/images/icons/index.js +++ b/modules/web-console/frontend/public/images/icons/index.js @@ -46,3 +46,4 @@ export {default as structure} from './structure.icon.svg'; export {default as cluster} from './cluster.icon.svg'; export {default as sql} from './sql.icon.svg'; export {default as menu} from './menu.icon.svg'; +export {default as downloadAgent} from './downloadAgent.icon.svg'; From 02a58255079254d21cc3789c7cf9d648121bc84f Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Wed, 12 Dec 2018 17:13:51 +0700 Subject: [PATCH 28/32] IGNITE-10239 More style fixes. --- .../web-console-sidebar-navigation/style.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss index d4ad3d8762931..83c21a3956ea4 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss +++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss @@ -47,9 +47,6 @@ web-console-sidebar-navigation { &:hover, &:focus { color: var(--active-link-color); - .web-console-sidebar-navigation__link-icon { - color: inherit; - } } &.web-console-sidebar-navigation__link-active { @@ -67,6 +64,9 @@ web-console-sidebar-navigation { position: absolute; background: var(--active-link-color); } + .web-console-sidebar-navigation__link-icon { + color: inherit; + } } .web-console-sidebar-navigation__link-content { display: none; @@ -77,11 +77,15 @@ web-console-sidebar-navigation { text-decoration: none !important; line-height: 19px; font-size: 16px; - padding: 10px 27px 11px; + padding: 10px 28px 11px; width: var(--width-wide); display: inline-flex; align-items: center; + &:first-of-type { + margin-top: 18px; + } + &:hover, &:focus { color: var(--active-link-color); @@ -92,6 +96,10 @@ web-console-sidebar-navigation { &.web-console-sidebar-navigation__link-active { color: white; background: var(--active-link-color); + + .web-console-sidebar-navigation__link-icon { + color: inherit; + } } .web-console-sidebar-navigation__link-icon { margin-right: 12px; From 56442685cdebee03f4f74727c372f5f05ddfef11 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Thu, 13 Dec 2018 17:20:10 +0700 Subject: [PATCH 29/32] IGNITE-10239 Remove "connectedClusters" icon. --- .../frontend/public/images/icons/connectedClusters.icon.svg | 1 - modules/web-console/frontend/public/images/icons/index.js | 1 - 2 files changed, 2 deletions(-) delete mode 100644 modules/web-console/frontend/public/images/icons/connectedClusters.icon.svg diff --git a/modules/web-console/frontend/public/images/icons/connectedClusters.icon.svg b/modules/web-console/frontend/public/images/icons/connectedClusters.icon.svg deleted file mode 100644 index f4053171c6591..0000000000000 --- a/modules/web-console/frontend/public/images/icons/connectedClusters.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/modules/web-console/frontend/public/images/icons/index.js b/modules/web-console/frontend/public/images/icons/index.js index 86da48741ce29..2e4108545eabb 100644 --- a/modules/web-console/frontend/public/images/icons/index.js +++ b/modules/web-console/frontend/public/images/icons/index.js @@ -21,7 +21,6 @@ export {default as check} from './check.icon.svg'; export {default as checkmark} from './checkmark.icon.svg'; export {default as clock} from './clock.icon.svg'; export {default as collapse} from './collapse.icon.svg'; -export {default as connectedClusters} from './connectedClusters.icon.svg'; export {default as copy} from './copy.icon.svg'; export {default as cross} from './cross.icon.svg'; export {default as csv} from './csv.icon.svg'; From 794b935007e2ddfc65e4b47c12037c025df87ece Mon Sep 17 00:00:00 2001 From: Andrey Novikov Date: Fri, 14 Dec 2018 11:47:41 +0700 Subject: [PATCH 30/32] IGNITE-10239 Removed unused import. --- .../frontend/app/components/web-console-sidebar/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/web-console/frontend/app/components/web-console-sidebar/index.ts b/modules/web-console/frontend/app/components/web-console-sidebar/index.ts index 7b3a67726f16e..717dca5a12711 100644 --- a/modules/web-console/frontend/app/components/web-console-sidebar/index.ts +++ b/modules/web-console/frontend/app/components/web-console-sidebar/index.ts @@ -15,7 +15,6 @@ * limitations under the License. */ -import template from './template.pug'; import {component as overflow} from './web-console-sidebar-overflow/component'; import {component as nav} from './web-console-sidebar-navigation/component'; import {component as sidebar} from './component'; From 8fd37cfa835f6d56f3682d8c779833296bc23058 Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Fri, 14 Dec 2018 14:29:53 +0700 Subject: [PATCH 31/32] IGNITE-10239 Remove unused dependency. --- .../app/components/permanent-notifications/controller.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/web-console/frontend/app/components/permanent-notifications/controller.ts b/modules/web-console/frontend/app/components/permanent-notifications/controller.ts index bf992074621bc..d67230431b311 100644 --- a/modules/web-console/frontend/app/components/permanent-notifications/controller.ts +++ b/modules/web-console/frontend/app/components/permanent-notifications/controller.ts @@ -16,11 +16,10 @@ */ export default class PermanentNotifications { - static $inject = ['UserNotifications', '$rootScope', 'DemoInfo', '$window'] + static $inject = ['UserNotifications', '$rootScope', '$window'] constructor( private UserNotifications: unknown, private $rootScope: ng.IRootScopeService, - private IgniteDemoMode: unknown, private $window: ng.IWindowService ) {} closeDemo() { From f65c03a82c06dee451b0ab2b6c759877c404baab Mon Sep 17 00:00:00 2001 From: Ilya Borisov Date: Fri, 14 Dec 2018 14:43:45 +0700 Subject: [PATCH 32/32] IGNITE-10239 Simplify web-console-header template. --- .../frontend/app/components/web-console-header/template.pug | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/modules/web-console/frontend/app/components/web-console-header/template.pug b/modules/web-console/frontend/app/components/web-console-header/template.pug index cf57ff98ba9a5..940f3a48f0bd3 100644 --- a/modules/web-console/frontend/app/components/web-console-header/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/template.pug @@ -22,10 +22,7 @@ button.web-console-header__togle-menu-button( ) svg(ignite-icon='menu') -a(ui-sref='default-state' ng-if='$ctrl.isAuthorized()').wch-logo-anchor - img.wch-logo(src='/images/ignite-logo.svg') - -a(ui-sref='landing' ng-if='!$ctrl.isAuthorized()').wch-logo-anchor +a(ui-sref='{{$ctrl.isAuthorized() ? "default-state" : "landing"}}').wch-logo-anchor img.wch-logo(src='/images/ignite-logo.svg') ng-transclude