Merge pull request #104 from ammendonca/HAWKULAR-124-142

HAWKULAR-124 & 142: Add New navigation and integrate App Server list and detail
hawkular · May 1, 2015 · beb6e37 · beb6e37
2 parents 81fe865 + 8597f3f
commit beb6e37
Show file tree

Hide file tree

Showing 19 changed files with 1,322 additions and 602 deletions.
diff --git a/plugins/directives/plugins/sidebar/html/sidebar.html b/plugins/directives/plugins/sidebar/html/sidebar.html
@@ -1,4 +1,4 @@
-<div class="col-sm-3 col-md-2 sidebar-pf sidebar-pf-left sidebar-pf-dark sidebar-pf-big-icons sidebar-pf-fixed">
+<!-- <div class="col-sm-3 col-md-2 sidebar-pf sidebar-pf-left sidebar-pf-dark sidebar-pf-big-icons sidebar-pf-fixed">
   <nav>
     <ul class="nav nav-pills nav-stacked nav-dark nav-big-icons" ng-hide="isSinglePage()">
       <li ng-class="getClass('/metrics/availability')"><a ng-href="/metrics/availability/{{hkParams.resourceId}}/{{hkParams.timeOffset}}/{{hkEndTimestamp}}"><i class="fa fa-arrow-up"></i>Availability</a></li>
@@ -11,4 +11,42 @@
       <li du-scrollspy="secal" offset="125"><a href="#secal" du-smooth-scroll offset="125"><i class="fa fa-flag"></i>Alerts</a></li>
     </ul>
   </nav>
+</div> -->
+
+<div class="screen-top-nav">
+  <div>
+    <div class="row top-row">
+      <div class="col-sm-4">
+        <a ng-show="isAppServerPage()" href="/hawkular-ui/app/app-list" class="back">« All Application Servers</a>
+        <a ng-hide="isAppServerPage()" href="/hawkular-ui/url/url-list" class="back">« All URLs</a>
+      </div>
+      <div class="col-sm-4">
+        <h1 ng-init="isAppServerPage() ? getAppServerFromId(hkParams.resourceId) : getUrlFromId(hkParams.resourceId)">{{resourceName}}</h1>
+      </div>
+      <div class="col-sm-4">
+        <div class="date-range dropdown">
+          <i class="fa fa-calendar"></i>
+          <div class="input" dropdown-toggle>
+            {{offsetName}} <span class="additional-info">({{getFormattedDate()}})</span>
+          </div>
+          <div class="dropdown-menu infotip bottom-right">
+            <div class="arrow"></div>
+            <div class="dropdown-menu-content">
+              <span class="label">Last</span>
+              <div class="btn-group">
+                <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Hour'}" ng-click="setRange({hour: 1})">1h</button>
+                <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last 12 Hours'}" ng-click="setRange({hours: 12})">12h</button>
+                <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Day'}" ng-click="setRange({day: 1})">Day</button>
+                <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Week'}" ng-click="setRange({week: 1})">Week</button>
+                <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Month'}" ng-click="setRange({month: 1})">Month</button>
+                <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Year'}" ng-click="setRange({year: 1})">Year</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div ng-transclude></div>
+  </div>
 </div>
+
diff --git a/plugins/directives/plugins/sidebar/ts/sidebarDirective.ts b/plugins/directives/plugins/sidebar/ts/sidebarDirective.ts
@@ -21,12 +21,13 @@ module Sidebar {
   export class SidebarDirective {
 
     public restrict = 'E';
-    public transclude = false;
+    public transclude = true;
     public replace = false;
 
     public templateUrl = templatePath;
   }
 
+  /*
   export var SidebarController = _module.controller("Sidebar.SidebarController",
     ['$scope', '$rootScope', '$location', ($scope, $rootScope, $location) => {
 
@@ -38,4 +39,82 @@ module Sidebar {
         return $location.path().indexOf(path) === 0 ? 'active' : '';
       };
     }]);
+  */
+
+  export var SidebarController = _module.controller("Sidebar.SidebarController",
+      ['$scope', '$rootScope', '$location', 'HawkularNav', 'HawkularInventory', ($scope, $rootScope, $location, HawkularNav, HawkularInventory) => {
+
+    $scope.isSinglePage = function() {
+      return $location.path().indexOf('/metrics') !== 0;
+    };
+
+    $scope.isAppServerPage = function() {
+      return $location.path().indexOf('/hawkular-ui/app/') === 0;
+    };
+
+    $scope.getClass = function(path) {
+      return $location.path().indexOf(path) === 0 ? 'active' : '';
+    };
+
+    $scope.rangeNames = {
+      '3600000': 'Last Hour',
+      '43200000': 'Last 12 Hours',
+      '86400000': 'Last Day',
+      '604800000': 'Last Week',
+      '2592000000': 'Last Month',
+      '31536000000': 'Last Year'
+    };
+
+    $scope.getFormattedDate = function() {
+      var diff = $scope.hkParams.timeOffset;
+
+      // FIXME: Use moment ?
+      $scope.offsetName = $scope.rangeNames[$scope.hkParams.timeOffset] || 'Custom';
+
+      // TODO: Use this for custom
+      // var momStart = moment($scope.hkStartTimestamp);
+      // var momEnd = moment($scope.hkEndTimestamp);
+
+      var momStart = moment().subtract($scope.hkParams.timeOffset, 'milliseconds');
+      var momEnd = moment();
+
+      if (diff < 24 * 60 * 60 * 1000) {
+        return momStart.format('D MMM YYYY') + ' ' + momStart.format('HH:mm') + ' - ' + (momStart.day() !== momEnd.day() ? momEnd.format('D MMM YYYY ')  : '') + momEnd.format('HH:mm');
+      } else {
+        return momStart.format('D MMM YYYY') + ' - ' + momEnd.format('D MMM YYYY');
+      }
+    };
+
+    $scope.setRange = function(range) {
+      HawkularNav.setTimestamp(moment.duration(range).valueOf());
+    };
+
+    $scope.getUrlFromId = function(id) {
+      if(!$scope.resource) {
+        $scope.resource = HawkularInventory.Resource.get({tenantId: globalTenantId, environmentId: globalEnvironmentId, resourceId: id}, function(data) {
+          $scope.resourceName = data.properties.url;
+          });
+      }
+      return $scope.resource;
+    };
+
+    // FIXME: Mock data.. remove when we have real app servers
+    $scope.getAppServerFromId = function(id) {
+      switch (id) {
+        case "f5087d5d26aeff90cc92c738a10d8bba":
+          $scope.resourceName = 'Eavy Machine';
+          break;
+        case "5c4785a7a304d32e5f404242666895f5":
+          $scope.resourceName = 'Tori Machine';
+          break;
+        case "21193e7941642baa1285cd7edd8af62e":
+          $scope.resourceName = 'Wiko Machine';
+          break;
+        case "20a0e9f5d777a16ad40928dd3ba1bef9":
+          $scope.resourceName = 'Tomy Machine';
+          break;
+      }
+    };
+
+    }]);
 }
diff --git a/plugins/directives/plugins/sidebar/ts/sidebarGlobals.ts b/plugins/directives/plugins/sidebar/ts/sidebarGlobals.ts
@@ -22,4 +22,7 @@ module Sidebar {
 
   export var templatePath = "plugins/sidebar/html/sidebar.html";
 
+  export var globalTenantId = "test";
+
+  export var globalEnvironmentId = "test";
 }
diff --git a/plugins/directives/plugins/topbar/html/topbar.html b/plugins/directives/plugins/topbar/html/topbar.html
@@ -1,41 +1,8 @@
-<ul class="nav navbar-nav navbar-primary navbar-selector navbar-dark row">
-  <li class="col-sm-3 col-md-2">
-    <a href="/metrics/add-url">URLs List</a>
+<ul class="nav navbar-nav navbar-primary">
+  <li ng-class="getClass('/hawkular-ui/url/')">
+    <a href="/hawkular-ui/url/url-list">URLs</a>
   </li>
-  <li class="context dropdown">
-    <a href="#" class="additional-info" dropdown-toggle ng-hide="resources.length === 0">
-      {{selectedResource.properties.url}}
-      <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu" role="menu">
-      <li ng-class="{'active': hkParams.resourceId === resource.id}" ng-repeat="resource in hkResources | orderBy:'properties.url'">
-        <a href="" ng-click="setSelection(resource)">{{resource.properties.url}}</a>
-      </li>
-      <li class="divider"></li>
-      <li>
-        <a href="/metrics/add-url">Add Application...</a>
-      </li>
-    </ul>
-  </li>
-  <li class="pull-right date-range dropdown">
-    <i class="fa fa-calendar"></i>
-    <div class="input" dropdown-toggle>
-      {{offsetName}} <span class="additional-info">({{getFormattedDate()}})</span>
-    </div>
-
-    <div class="dropdown-menu infotip bottom-right">
-      <div class="arrow"></div>
-      <div class="dropdown-menu-content">
-        <span class="label">Last</span>
-        <div class="btn-group">
-          <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Hour'}" ng-click="setRange({hour: 1})">1h</button>
-          <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last 12 Hours'}" ng-click="setRange({hours: 12})">12h</button>
-          <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Day'}" ng-click="setRange({day: 1})">Day</button>
-          <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Week'}" ng-click="setRange({week: 1})">Week</button>
-          <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Month'}" ng-click="setRange({month: 1})">Month</button>
-          <button type="button" class="btn btn-default" ng-class="{'active': offsetName === 'Last Year'}" ng-click="setRange({year: 1})">Year</button>
-        </div>
-      </div>
-    </div>
+  <li ng-class="getClass('/hawkular-ui/app/')">
+    <a href="/hawkular-ui/app/app-list">Application Servers</a>
   </li>
 </ul>
diff --git a/plugins/directives/plugins/topbar/ts/topbarDirective.ts b/plugins/directives/plugins/topbar/ts/topbarDirective.ts
@@ -30,45 +30,8 @@ module Topbar {
   export var TopbarController = _module.controller("Topbar.TopbarController",
     ['$scope', '$rootScope', '$location', '$route', '$routeParams', 'HawkularNav', 'HawkularInventory', ($scope, $rootScope, $location, $route, $routeParams, HawkularNav, HawkularInventory) => {
 
-      $scope.rangeNames = {
-        '3600000': 'Last Hour',
-        '43200000': 'Last 12 Hours',
-        '86400000': 'Last Day',
-        '604800000': 'Last Week',
-        '2592000000': 'Last Month',
-        '31536000000': 'Last Year'
-      };
-
-      $scope.getFormattedDate = function() {
-        var diff = $scope.hkParams.timeOffset;
-
-        // FIXME: Use moment ?
-        $scope.offsetName = $scope.rangeNames[$scope.hkParams.timeOffset] || 'Custom';
-
-        // TODO: Use this for custom
-        // var momStart = moment($scope.hkStartTimestamp);
-        // var momEnd = moment($scope.hkEndTimestamp);
-
-        var momStart = moment().subtract($scope.hkParams.timeOffset, 'milliseconds');
-        var momEnd = moment();
-
-        if (diff < 24 * 60 * 60 * 1000) {
-          return momStart.format('D MMM YYYY') + ' ' + momStart.format('HH:mm') + ' - ' + (momStart.day() !== momEnd.day() ? momEnd.format('D MMM YYYY ')  : '') + momEnd.format('HH:mm');
-        } else {
-          return momStart.format('D MMM YYYY') + ' - ' + momEnd.format('D MMM YYYY');
-        }
-      };
-
-      $scope.setRange = function(range) {
-        HawkularNav.setTimestamp(moment.duration(range).valueOf());
-      };
-
-      $scope.$watch(function() { return $location.path(); }, function(value) {
-        $rootScope.hideSidebar = ($location.path().indexOf('/metrics/add-url') === 0);
-      });
-
-      $scope.setSelection = function(resourceId) {
-        $route.updateParams({resourceId: resourceId.id});
+      $scope.getClass = function(path) {
+          return $location.path().indexOf(path) === 0 ? 'active' : '';
       };
 
     }]);