Browse Source

HUE-8330 [frontend] Add app switcher for multi cluster mode

Johan Ahlen 7 years ago
parent
commit
56abb06778

+ 41 - 0
desktop/core/src/desktop/static/desktop/ext/css/cui/cui.css

@@ -156,6 +156,47 @@
 .cui-btn-circle.btn {
 .cui-btn-circle.btn {
   padding: 0;
   padding: 0;
 }
 }
+.cui-app-switcher {
+  margin-right: 12px;
+  margin-left: -8px;
+}
+.cui-app-switcher i.fa-bars {
+  color: #0B7FAD;
+}
+.cui-app-switcher .nav-item {
+  margin-right: 0 !important;
+}
+.cui-app-switcher .nav-item .app-img,
+.cui-app-switcher .nav-item .fa {
+  background-color: #0B7FAD;
+  padding: 2px;
+  color: white;
+}
+.cui-app-switcher .nav-item .app-img {
+  width: 20px;
+  height: 20px;
+}
+.cui-app-switcher .nav-item .fa {
+  font-size: 16px;
+}
+.cui-app-switcher .nav-item:hover {
+  background-color: #0B7FAD;
+}
+.cui-app-switcher .nav-item:hover .app-img,
+.cui-app-switcher .nav-item:hover .fa {
+  background-color: #29A7DE;
+  color: white;
+}
+.cui-app-switcher .nav-item .app-switcher-app-icon {
+  margin-left: -4px;
+}
+.cui-app-switcher .nav-item .app-switcher-app-name {
+  margin-left: 8px;
+}
+.cui-app-switcher .hue-hamburger + .dropdown-menu .nav-link:hover {
+  background-color: #0B7FAD;
+  color: white;
+}
 .cui-card {
 .cui-card {
   border: 1px solid #DCDCDC;
   border: 1px solid #DCDCDC;
   padding: 19px 23px 19px 23px;
   padding: 19px 23px 19px 23px;

+ 7 - 3
desktop/core/src/desktop/templates/hue.mako

@@ -170,9 +170,13 @@ ${ hueIcons.symbols() }
     <div class="navbar-inner top-nav">
     <div class="navbar-inner top-nav">
       <div class="top-nav-left">
       <div class="top-nav-left">
         % if not IS_EMBEDDED.get():
         % if not IS_EMBEDDED.get():
-        <a class="hamburger hamburger-hue pull-left" data-bind="toggle: leftNavVisible, css: { 'is-active': leftNavVisible }">
-          <span class="hamburger-box"><span class="hamburger-inner"></span></span>
-        </a>
+        % if IS_MULTICLUSTER_ONLY.get():
+          <!-- ko component: { name: 'hue-app-switcher', params: { onPrem: ko.observable(false) } } --><!-- /ko -->
+        % else:
+          <a class="hamburger hamburger-hue pull-left" data-bind="toggle: leftNavVisible, css: { 'is-active': leftNavVisible }">
+            <span class="hamburger-box"><span class="hamburger-inner"></span></span>
+          </a>
+        % endif
 
 
         <a class="brand" data-bind="hueLink: '/home/'" href="javascript: void(0);" title="${_('Documents')}">
         <a class="brand" data-bind="hueLink: '/home/'" href="javascript: void(0);" title="${_('Documents')}">
           % if IS_MULTICLUSTER_ONLY.get():
           % if IS_MULTICLUSTER_ONLY.get():

File diff suppressed because it is too large
+ 39 - 0
desktop/core/src/desktop/templates/hue_icons.mako


+ 2 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -14,6 +14,7 @@
 ## See the License for the specific language governing permissions and
 ## See the License for the specific language governing permissions and
 ## limitations under the License.
 ## limitations under the License.
 
 
+<%namespace name="koAppSwitcher" file="/ko_components/ko_app_switcher.mako" />
 <%namespace name="koBreadCrumbs" file="/ko_components/ko_breadcrumbs.mako" />
 <%namespace name="koBreadCrumbs" file="/ko_components/ko_breadcrumbs.mako" />
 <%namespace name="koCatalogEntriesTable" file="/ko_components/ko_catalog_entries_table.mako" />
 <%namespace name="koCatalogEntriesTable" file="/ko_components/ko_catalog_entries_table.mako" />
 <%namespace name="koContextPopover" file="/ko_components/ko_context_popover.mako" />
 <%namespace name="koContextPopover" file="/ko_components/ko_context_popover.mako" />
@@ -31,6 +32,7 @@
 <%namespace name="koSentryPrivileges" file="/ko_components/ko_sentry_privileges.mako" />
 <%namespace name="koSentryPrivileges" file="/ko_components/ko_sentry_privileges.mako" />
 
 
 <%def name="all()">
 <%def name="all()">
+  ${ koAppSwitcher.appSwitcher() }
   ${ koBreadCrumbs.breadCrumbs() }
   ${ koBreadCrumbs.breadCrumbs() }
   ${ koCatalogEntriesTable.catalogEntriesTable() }
   ${ koCatalogEntriesTable.catalogEntriesTable() }
   ${ koContextPopover.contextPopover() }
   ${ koContextPopover.contextPopover() }

+ 181 - 0
desktop/core/src/desktop/templates/ko_components/ko_app_switcher.mako

@@ -0,0 +1,181 @@
+## Licensed to Cloudera, Inc. under one
+## or more contributor license agreements.  See the NOTICE file
+## distributed with this work for additional information
+## regarding copyright ownership.  Cloudera, Inc. 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.
+
+<%!
+from desktop import conf
+from desktop.lib.i18n import smart_unicode
+
+from django.utils.translation import ugettext as _
+from desktop.views import _ko
+%>
+
+<%def name="appSwitcher()">
+
+  <script type="text/html" id="hue-app-switcher-template">
+    <ul class="cui-app-switcher nav navbar-nav">
+      <li class="dropdown">
+        <a class="hamburger hamburger-hue dropdown-toggle" style="padding: 10px 5px 0 5px; margin: 8px 24px 0 -5px;" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" role="button">
+          <span class="hamburger-box"><span class="hamburger-inner"></span></span>
+        </a>
+
+        <ul class="dropdown-menu" style="margin: 7px 0 0 -5px;" role="menu">
+          <!-- ko foreach: links -->
+          <li class="nav-item">
+            <!-- ko if: $data.divider -->
+            <div class="divider"></div>
+            <!-- /ko -->
+            <!-- ko ifnot: $data.divider -->
+            <a role="button" class="nav-link" data-bind="attr: {href: link}">
+              <span class="app-switcher-app-icon">
+                <!-- ko if: $data.icon -->
+                <i data-bind="attr: {class: icon}"></i>
+                <!-- /ko -->
+                <!-- ko if: $data.img -->
+                <!-- ko template: 'app-switcher-icon-template' --><!-- /ko -->
+                <!-- /ko -->
+              </span>
+              <span class="app-switcher-app-name" data-bind="text: label, attr: {href: link}"></span>
+            </a>
+            <!-- /ko -->
+          </li>
+          <!-- /ko -->
+        </ul>
+      </li>
+    </ul>
+  </script>
+
+  <script type="text/javascript">
+    (function () {
+      var apps = {
+        cdsw: {
+          label: 'Data Science',
+          img:'hi-as-cdsw'
+        },
+        hue: {
+          label: 'Data Analytics (Hue)',
+          img: 'hi-as-hue'
+        },
+        cm: {
+          label: 'Cloudera Manager',
+          img: 'hi-as-cm'
+        },
+        navigator: {
+          label: 'Navigator',
+          img: 'hi-as-nav'
+        },
+        navopt: {
+          label: 'Data Engineering',
+          img: 'hi-as-nav'
+        }
+      };
+
+      var AppSwitcher = function AppSwitcher(params) {
+        var self = this;
+
+        self.links = ko.observableArray([]);
+
+        var altusLinks = [{
+          label: 'Dashboard',
+          icon: 'fa fa-home',
+          link: 'http://localhost:3001'
+        }, {
+          divider: true
+        }, {
+          label: 'Data Engineering',
+          link: '/',
+          icon: 'fa fa-gear'
+        },
+          {
+            product: 'cdsw',
+            link: '/'
+          }, {
+            product: 'hue',
+            link: '/'
+          },
+          {
+            divider: true
+          },
+          {
+            product: 'navigator',
+            link: '/'
+          }, {
+            label: 'Navigator Optimizer',
+            link: '/',
+            icon: 'fa fa-gear'
+          }
+        ];
+
+        var onPremLinks = [{
+          label: 'Dashboard',
+          icon: 'fa fa-home',
+          link: '/'
+        }, {
+          divider: true
+        }, {
+          product: 'cdsw',
+          link: '/'
+        }, {
+          product: 'hue',
+          link: '/'
+        },
+          {
+            divider: true
+          }
+          , {
+            product: 'cm',
+            link: '/'
+          }, {
+            product: 'navigator',
+            link: '/'
+          }
+
+        ];
+
+        var applyLinks = function (links) {
+          var newLinks = [];
+          links.forEach(function (link) {
+            if (link.product) {
+              var lookup = apps[link.product];
+              if (lookup) {
+                lookup.link = link.link;
+                newLinks.push(lookup);
+              }
+            } else {
+              newLinks.push(link);
+            }
+          });
+          self.links(newLinks);
+        };
+
+        params.onPrem.subscribe(function (newValue) {
+          if (newValue) {
+            applyLinks(onPremLinks);
+          } else {
+            applyLinks(altusLinks);
+          }
+        });
+
+        applyLinks(altusLinks);
+      };
+
+      ko.components.register('hue-app-switcher', {
+        viewModel: AppSwitcher,
+        template: { element: 'hue-app-switcher-template' }
+      });
+    })();
+  </script>
+
+</%def>

Some files were not shown because too many files changed in this diff