ignite-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From anovi...@apache.org
Subject [2/3] ignite git commit: IGNITE-10239 Update navigation and top menu. - Fixes #5630.
Date Mon, 17 Dec 2018 09:33:51 GMT
http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/permanent-notifications/style.scss
----------------------------------------------------------------------
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 0000000..e40f21a
--- /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

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/permanent-notifications/template.pug
----------------------------------------------------------------------
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 0000000..6abe611
--- /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?]

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/timed-redirection/style.scss
----------------------------------------------------------------------
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 5b0ecfd..487fa2d 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;

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/component.js
----------------------------------------------------------------------
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 40a1051..bb2f7f7 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
 };

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/component.js
----------------------------------------------------------------------
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-footer/components/web-console-footer-links/component.js
deleted file mode 100644
index 40a1051..0000000
--- a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/component.js
+++ /dev/null
@@ -1,23 +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.
- */
-
-import template from './template.pug';
-import './style.scss';
-
-export default {
-    template
-};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/style.scss
----------------------------------------------------------------------
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-footer/components/web-console-footer-links/style.scss
deleted file mode 100644
index 47b88af..0000000
--- a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/style.scss
+++ /dev/null
@@ -1,31 +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.
- */
-
-web-console-footer-links {
-    margin-left: auto;
-
-    a + a {
-        margin-left: 5px;
-
-        &:before {
-            content: '|';
-            display: inline-block;
-            margin-right: 5px;
-            color: #fafafa;
-        }
-    }
-}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/template.pug
----------------------------------------------------------------------
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-footer/components/web-console-footer-links/template.pug
deleted file mode 100644
index 5c04467..0000000
--- a/modules/web-console/frontend/app/components/web-console-footer/components/web-console-footer-links/template.pug
+++ /dev/null
@@ -1,17 +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(href="/api/v1/downloads/agent" target="_self") Download Agent

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/controller.ts
----------------------------------------------------------------------
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 0000000..0811748
--- /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;
+    }
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/index.js
----------------------------------------------------------------------
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 e26b602..4fa4617 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,16 @@
 
 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);
+    .directive('webConsoleFooterPageBottom', function() {
+        return {
+            restrict: 'C',
+            link(scope, el) {
+                el.parent().addClass('wrapper-public');
+                scope.$on('$destroy', () => el.parent().removeClass('wrapper-public'));
+            }
+        };
+    });

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/style.scss
----------------------------------------------------------------------
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 f3de59f..fe5eb64 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,46 +16,87 @@
  */
 
 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;
+    .#{&}__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;
 
-        &:first-of-type {
-            margin-bottom: 5px;
+            &: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;
         }
     }
 
-    .wcf-content {
+    &.web-console-footer__sidebar-opened {
+        width: var(--width-wide);
         display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex-direction: column;
+        padding: 27px 18px 27px 27px;
 
-        & > :nth-child(2) {
-            margin-left: auto;
+        .web-console-footer__sidebar-stuff {
+            display: none;
+        }        
+    
+        .web-console-footer__regular-stuff {
+            display: block;
         }
     }
+}
+
+.web-console-footer__page-bottom {
+    grid-area: footer;
+    color: #fafafa;
+    background: #393939;
+    font-size: 12px;
+    font-weight: 300;
+    padding: 12px var(--page-side-padding);
+
+    .web-console-footer__sidebar-stuff {
+        display: none;
+    }
 
-    ignite-powered-by-apache {
-        & > a {
-            margin-left: 40px;
-        }
+    p {
+        margin: 0;
     }
 
     a {
-        color: #ee8e89;
-
-        &:hover, &.hover,
-        &:focus, &.focus {
-            color: #ee2b27;
-            text-decoration: none;
+        color: #ee8e89 !important;
+        &:hover, &:focus {
+            color: #ee2b27 !important;
         }
     }
+
+    .web-console-footer__legal {
+        color: inherit;
+    }    
 }

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-footer/template.pug
----------------------------------------------------------------------
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 aa2812a..2c1495e 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,19 @@
     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
+
+.web-console-footer__sidebar-stuff
+    a(
+        href="/api/v1/downloads/agent"
+        target="_self"
+        ng-if='$ctrl.userIsAuthorized'
+        title='Download Agent'
+    )
+        svg(ignite-icon='downloadAgent')
+
+.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

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/component.js
----------------------------------------------------------------------
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.js
deleted file mode 100644
index 02b3080..0000000
--- a/modules/web-console/frontend/app/components/web-console-header/component.js
+++ /dev/null
@@ -1,53 +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.
- */
-
-import template from './template.pug';
-import './style.scss';
-
-export default {
-    template,
-    controller: class {
-        static $inject = ['$rootScope', '$scope', '$state', 'IgniteBranding', 'UserNotifications'];
-
-        static connectedClustersUnvisibleStates = [
-            '403', '404', 'signin'
-        ];
-
-        constructor($rootScope, $scope, $state, branding, UserNotifications) {
-            Object.assign(this, {$rootScope, $scope, $state, branding, UserNotifications});
-        }
-
-        setConnectedClustersVisible() {
-            this.isConnectedClustersVisible =
-                !this.constructor.connectedClustersUnvisibleStates.some((state) => this.$state.includes(state));
-        }
-
-        isAuthorized() {
-            return !!this.$rootScope.user;
-        }
-
-        $onInit() {
-            this.setConnectedClustersVisible();
-
-            this.$scope.$on('$stateChangeSuccess', () => this.setConnectedClustersVisible());
-        }
-    },
-    transclude: {
-        slotLeft: '?webConsoleHeaderLeft',
-        slotRight: '?webConsoleHeaderRight'
-    }
-};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/component.ts
----------------------------------------------------------------------
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
new file mode 100644
index 0000000..ad7e8a7
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/component.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 './style.scss';
+import {AppStore, toggleSidebar} from '../../store';
+
+export default {
+    template,
+    controller: class {
+        static $inject = ['$rootScope', '$scope', '$state', 'IgniteBranding', 'UserNotifications', 'Store'];
+
+        constructor($rootScope, $scope, $state, branding, UserNotifications, private store: AppStore) {
+            Object.assign(this, {$rootScope, $scope, $state, branding, UserNotifications});
+        }
+
+        toggleSidebar() {
+            this.store.dispatch(toggleSidebar());
+        }
+
+        isAuthorized() {
+            return !!this.$rootScope.user;
+        }
+    },
+    transclude: true,
+    bindings: {
+        hideMenuButton: '<?'
+    }
+};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/component.ts
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/component.ts b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/component.ts
new file mode 100644
index 0000000..e24b551
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/component.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 template from './template.pug';
+import controller from './controller';
+
+export const component: ng.IComponentOptions = {
+    template,
+    controller
+};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/controller.ts
----------------------------------------------------------------------
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 0000000..1a1bd1e
--- /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<typeof LegacyConfirmFactory>
+    ) {}
+
+    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');
+            });
+    }
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/template.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/template.pug b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/template.pug
new file mode 100644
index 0000000..f566ac4
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/demo-mode-button/template.pug
@@ -0,0 +1,20 @@
+//-
+    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.
+
+
+button.btn-ignite.btn-ignite--success(
+    ng-click='$ctrl.startDemo()'
+) Start Demo
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/user-menu/component.ts
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/components/web-console-header/components/user-menu/component.ts b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/component.ts
new file mode 100644
index 0000000..f6141d9
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/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 default {
+    template,
+    controller
+};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/user-menu/controller.ts
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/components/web-console-header/components/user-menu/controller.ts b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/controller.ts
new file mode 100644
index 0000000..812d3b5
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/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.
+ */
+
+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: '$ctrl.gettingStarted.tryShow(true)'}
+        ];
+
+        const _rebuildSettings = () => {
+            this.items.splice(2);
+
+            if (this.AclService.can('admin_page'))
+                this.items.push({text: 'Admin panel', sref: 'base.settings.admin'});
+
+            this.items.push(...this.IgniteUserbar);
+
+            if (this.AclService.can('logout'))
+                this.items.push({text: 'Log out', sref: 'logout'});
+        };
+
+        if (this.$root.user)
+            _rebuildSettings(null, this.$root.user);
+
+        this.$root.$on('user', _rebuildSettings);
+    }
+    get user() {
+        return this.$root.user;
+    }
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/user-menu/style.scss
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/components/web-console-header/components/user-menu/style.scss b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/style.scss
new file mode 100644
index 0000000..898047b
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/style.scss
@@ -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.
+ */
+
+user-menu {
+    --active-link-color: #ee2b27;
+    font-size: 14px;
+
+    &>.active {
+        color: var(--active-link-color)
+    }
+    .caret {
+        margin-left: 8px;
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/user-menu/template.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/components/web-console-header/components/user-menu/template.pug b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/template.pug
new file mode 100644
index 0000000..e946c78
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/user-menu/template.pug
@@ -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.
+
+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

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/component.ts
----------------------------------------------------------------------
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 0000000..e86d3e5
--- /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
+};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/controller.ts
----------------------------------------------------------------------
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 0000000..4345553
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/controller.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 {StateService} from '@uirouter/angularjs';
+
+export default class WebConsoleHeaderContent {
+    static $inject = ['$rootScope', '$state']
+    constructor(
+        private $rootScope: ng.IRootScopeService,
+        private $state: StateService
+    ) {}
+
+    static connectedClusterInvisibleStates = [
+        '403', '404', '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 showUserMenu(): boolean {
+        return !!this.$rootScope.user;
+    }
+
+    get showDemoModeButton(): boolean {
+        return this.$rootScope.user && !this.$rootScope.user.becomeUsed && !this.$rootScope.IgniteDemoMode;
+    }
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss
----------------------------------------------------------------------
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
new file mode 100644
index 0000000..f483614
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/style.scss
@@ -0,0 +1,44 @@
+/*
+ * 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-content {
+    display: flex;
+    flex: 1;
+
+    .web-console-header-content__right {
+        margin-left: auto;
+        display: flex;
+    }
+
+    .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%;
+    }
+}
+
+.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

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug
----------------------------------------------------------------------
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
new file mode 100644
index 0000000..8f1d4f8
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-content/template.pug
@@ -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.
+
+.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-item(ng-if='$ctrl.showUserMenu')
+    user-menu
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/component.js
----------------------------------------------------------------------
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/web-console-header-extension/component.js
deleted file mode 100644
index 1621adc..0000000
--- a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/component.js
+++ /dev/null
@@ -1,22 +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.
- */
-
-import template from './template.pug';
-
-export default {
-    template
-};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/template.pug
----------------------------------------------------------------------
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-extension/template.pug
deleted file mode 100644
index 0545db1..0000000
--- a/modules/web-console/frontend/app/components/web-console-header/components/web-console-header-extension/template.pug
+++ /dev/null
@@ -1,15 +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.

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/index.js
----------------------------------------------------------------------
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 3fc5c66..2a106d4 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);

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/style.scss
----------------------------------------------------------------------
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 4edf6fd..e343284 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,26 @@ 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;
+    .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;
     }
-    100% {
-        box-shadow: 0 1px 2px #008eff;
+    .web-console-header__togle-menu-button-hidden {
+        visibility: hidden;
     }
 }

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-header/template.pug
----------------------------------------------------------------------
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 1d25b13..940f3a4 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,15 @@
     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='$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?]
-
-.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?]
-
-.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')
+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='{{$ctrl.isAuthorized() ? "default-state" : "landing"}}').wch-logo-anchor
+    img.wch-logo(src='/images/ignite-logo.svg')
+
+ng-transclude

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/component.ts
----------------------------------------------------------------------
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 0000000..e86d3e5
--- /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
+};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/controller.ts
----------------------------------------------------------------------
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 0000000..bdf606b
--- /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;
+    }
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/index.ts
----------------------------------------------------------------------
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
new file mode 100644
index 0000000..717dca5
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-sidebar/index.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 {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);

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/style.scss
----------------------------------------------------------------------
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 0000000..b625333
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-sidebar/style.scss
@@ -0,0 +1,44 @@
+/*
+ * 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;
+    --active-link-color: #ee2b27;
+    --inactive-link-color: #757575;
+    // Does not include notifications height
+    max-height: calc(100vh - var(--header-height));
+    position: -webkit-sticky;
+    position: sticky;
+    top: var(--header-height);
+
+    web-console-sidebar-overflow {
+        flex: 1;
+    }
+
+    web-console-footer {
+        flex: 0 0 auto;
+
+        &:first-child {
+            margin-top: auto;
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/template.pug
----------------------------------------------------------------------
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
new file mode 100644
index 0000000..f02f2c4
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-sidebar/template.pug
@@ -0,0 +1,22 @@
+//-
+    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
+    web-console-sidebar-navigation(opened='$ctrl.sidebarOpened$|async:this' ng-if='$ctrl.showNavigation')
+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

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/component.ts
----------------------------------------------------------------------
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 0000000..4e4647f
--- /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: '<'
+    }
+};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/controller.ts
----------------------------------------------------------------------
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 0000000..8b5355a
--- /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())
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss
----------------------------------------------------------------------
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 0000000..83c21a3
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/style.scss
@@ -0,0 +1,108 @@
+/*
+ * 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;
+    padding-top: 14px;
+
+    nav {
+        display: flex;
+        flex-direction: column;
+        list-style-type: none;
+
+        &>li {
+            display: flex;
+        }
+    }
+
+    .web-console-sidebar-navigation__link-icon {
+        width: 20px;
+        height: auto;
+        color: var(--inactive-link-color);
+    }
+
+    .web-console-sidebar-navigation__link-narrow {
+        height: var(--width-narrow);
+        width: var(--width-narrow);
+        color: var(--inactive-link-color);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover, &:focus {
+            color: var(--active-link-color);
+
+        }
+
+        &.web-console-sidebar-navigation__link-active {
+            color: var(--active-link-color);
+            position: relative;
+
+            &:after {
+                content: '';
+                display: block;
+                width: 2px;
+                // Line can't be outside of scrollable container
+                right: 0;
+                top: 0;
+                bottom: 0;
+                position: absolute;
+                background: var(--active-link-color);
+            }
+            .web-console-sidebar-navigation__link-icon {
+                color: inherit;
+            }
+        }
+        .web-console-sidebar-navigation__link-content {
+            display: none;
+        }
+    }
+    .web-console-sidebar-navigation__link-wide {
+        color: #393939;
+        text-decoration: none !important;
+        line-height: 19px;
+        font-size: 16px;
+        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);
+
+            .web-console-sidebar-navigation__link-icon {
+                color: inherit;
+            }
+        }
+        &.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;
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug
----------------------------------------------------------------------
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
new file mode 100644
index 0000000..c35de9d
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-navigation/template.pug
@@ -0,0 +1,35 @@
+//-
+    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.
+
+nav
+    li(
+        ng-repeat='item in $ctrl.menu$|async:this track by item.sref'
+        ng-if='!item.hidden'
+    )
+        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
+            }`
+            tabindex='0'
+        )
+            svg.web-console-sidebar-navigation__link-icon(ignite-icon='{{item.icon}}')
+            span.web-console-sidebar-navigation__link-content(translate='{{item.label}}')

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/component.ts
----------------------------------------------------------------------
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 0000000..0f69e2d
--- /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
+};

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/controller.ts
----------------------------------------------------------------------
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 0000000..d5403f4
--- /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 = Math.floor((offsetHeight + scrollTop)) !== Math.floor(scrollHeight);
+
+        target.classList.toggle('top', top);
+        target.classList.toggle('bottom', bottom);
+    }
+    onScroll = (e: UIEvent) => {
+        this.$win.requestAnimationFrame(() => {
+            this.applyStyles(e.target as HTMLElement);
+        });
+    }
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/style.scss
----------------------------------------------------------------------
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 0000000..cbc6adc
--- /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

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/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/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 0000000..5b70da6
--- /dev/null
+++ b/modules/web-console/frontend/app/components/web-console-sidebar/web-console-sidebar-overflow/template.pug
@@ -0,0 +1,18 @@
+//-
+    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

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/modules/branding/branding.module.js
----------------------------------------------------------------------
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 20cd93e..8b23d04 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);

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/modules/branding/branding.service.js
----------------------------------------------------------------------
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 667dbfd..f184a4d 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 = [

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/modules/branding/footer.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/branding/footer.directive.js b/modules/web-console/frontend/app/modules/branding/footer.directive.js
deleted file mode 100644
index 3c0bb83..0000000
--- a/modules/web-console/frontend/app/modules/branding/footer.directive.js
+++ /dev/null
@@ -1,39 +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.
- */
-
-const template = '<div class="footer" ng-bind-html="footer.html"></div>';
-
-/**
- * @param {import('./branding.service').default} branding
- */
-export default function factory(branding) {
-    function controller() {
-        const ctrl = this;
-
-        ctrl.html = branding.footerHtml;
-    }
-
-    return {
-        restrict: 'E',
-        template,
-        controller,
-        controllerAs: 'footer',
-        replace: true
-    };
-}
-
-factory.$inject = ['IgniteBranding'];

http://git-wip-us.apache.org/repos/asf/ignite/blob/9dc251cd/modules/web-console/frontend/app/modules/branding/header-logo.directive.js
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/branding/header-logo.directive.js b/modules/web-console/frontend/app/modules/branding/header-logo.directive.js
deleted file mode 100644
index 60e5d5d..0000000
--- a/modules/web-console/frontend/app/modules/branding/header-logo.directive.js
+++ /dev/null
@@ -1,39 +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.
- */
-
-import template from './header-logo.pug';
-
-/**
- * @param {import('./branding.service').default} branding
- */
-export default function factory(branding) {
-    function controller() {
-        const ctrl = this;
-
-        ctrl.url = branding.headerLogo;
-    }
-
-    return {
-        restrict: 'E',
-        template,
-        controller,
-        controllerAs: 'logo',
-        replace: true
-    };
-}
-
-factory.$inject = ['IgniteBranding'];


Mime
View raw message