qpid-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From eal...@apache.org
Subject [qpid-dispatch] 04/04: DISPATCH-1284 Implement patternfly masthead
Date Tue, 12 Mar 2019 20:27:18 GMT
This is an automated email from the ASF dual-hosted git repository.

eallen pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/qpid-dispatch.git

commit 8196aa62ce580e06a9cbadbd75f4cc5ea1b26361
Author: Ernest Allen <eallen@redhat.com>
AuthorDate: Tue Mar 12 16:26:31 2019 -0400

    DISPATCH-1284 Implement patternfly masthead
---
 console/CMakeLists.txt                           |   8 +
 console/stand-alone/index.html                   | 146 +++++++++------
 console/stand-alone/main.js                      |  89 +++++++---
 console/stand-alone/plugin/css/dispatch.css      |  54 +++++-
 console/stand-alone/plugin/html/qdrList.html     | 217 ++++++++++++++---------
 console/stand-alone/plugin/html/qdrOverview.html | 109 ++++++------
 6 files changed, 387 insertions(+), 236 deletions(-)

diff --git a/console/CMakeLists.txt b/console/CMakeLists.txt
index d9c5758..66e4c0c 100644
--- a/console/CMakeLists.txt
+++ b/console/CMakeLists.txt
@@ -80,6 +80,11 @@ if(CONSOLE_INSTALL)
             ${CONSOLE_SOURCE_DIR}/main.js
             ${CONSOLE_SOURCE_DIR}/favicon-32x32.png
           )
+          ## Files copied to the img/ dir
+          set(IMAGES
+            ${CONSOLE_SOURCE_DIR}/plugin/img/bg-modal-about-pf.png
+            ${CONSOLE_SOURCE_DIR}/plugin/img/logo-alt.svg
+          )
           ## Files copied to the css/ dir
           set(CSS_FONTS
             ${CONSOLE_SOURCE_DIR}/plugin/css/brokers.ttf
@@ -128,6 +133,9 @@ if(CONSOLE_INSTALL)
           install(FILES ${VENDOR_FONTS}
             DESTINATION ${CONSOLE_STAND_ALONE_INSTALL_DIR}/fonts/
           )
+          install(FILES ${IMAGES}
+            DESTINATION ${CONSOLE_STAND_ALONE_INSTALL_DIR}/img/
+          )
           install(DIRECTORY ${CONSOLE_SOURCE_DIR}/plugin/data/
             DESTINATION ${CONSOLE_STAND_ALONE_INSTALL_DIR}/plugin/data
           )
diff --git a/console/stand-alone/index.html b/console/stand-alone/index.html
index ade7c68..220cf50 100644
--- a/console/stand-alone/index.html
+++ b/console/stand-alone/index.html
@@ -20,15 +20,15 @@ under the License.
 <html xmlns:ng="https://angularjs.org">
 
 <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Apache Qpid Dispatch Console</title>
 
     <link rel="shortcut icon" type="image/png" href="favicon-32x32.png" sizes="32x32"
/>
 
-    <link rel="stylesheet" href="css/vendor.min.css" type="text/css"/>
-    <link rel="stylesheet" href="css/dispatch.min.css" type="text/css"/>
+    <link rel="stylesheet" href="css/vendor.min.css" type="text/css" />
+    <link rel="stylesheet" href="css/dispatch.min.css" type="text/css" />
 
     <style>
         #installError {
@@ -36,67 +36,97 @@ under the License.
         }
     </style>
 </head>
+
 <body ng-app="QDR" ng-controller="QDR.Core">
 
 
-<nav class="navbar navbar-default navbar-pf navbar-fixed-top" role="navigation">
-    <div class="navbar-header">
-        <button type='button' class='navbar-toggle left page-menu-button' ng-click="pageMenuClicked()"
data-toggle="collapse" data-target=".page-menu">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-        </button>
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="/">
-            <span class="logo">Apache Qpid Dispatch Console</span>
-        </a>
-    </div>
-    
-    <div class="collapse navbar-collapse navbar-collapse-1">
-        <ul class="nav navbar-nav navbar-primary" ng-controller="QDR.NavBarController">
-            <li ng-repeat="link in breadcrumbs" title="{{link.title}}" ng-show="isValid(link)"
ng-class='{active : isActive(link.href), "pull-right" : isRight(link), haschart: hasChart(link)}'>
-                <a ng-href="{{link.href}}{{hash}}" ng-bind-html="link.content"></a>
-            </li>
-        </ul>
-    </div>
-</nav>
+    <nav class="navbar navbar-default navbar-pf navbar-fixed-top" role="navigation">
+        <div class="navbar-header">
+            <button type='button' class='navbar-toggle left page-menu-button' ng-click="pageMenuClicked()"
+                data-toggle="collapse" data-target=".page-menu">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="/">
+                <span class="logo">Apache Qpid Dispatch Console</span>
+            </a>
+            <div class="masthead-icons">
+                <div class="about" ng-controller="QDR.AboutController" title="About this
console">
+                    <span class="fa fa-question-circle-o" ng-click="open()"></span>
+                    <pf-about-modal is-open="isOpen" on-close="onClose()" additional-info="additionalInfo"
+                        product-info="productInfo" title="title" copyright="copyright" img-alt="imgAlt"
+                        img-src="imgSrc">
+                    </pf-about-modal>
+                </div>
+                <span class="pf pficon-user"></span>
+                <span class="user-name">{{user}}</span>
+                <div class="dropdown">
+                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
+                        data-toggle="dropdown">
+                        <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+                        <!-- logout is method of QDR.Core -->
+                        <li role="presentation" ng-click="logout()">
+                            <a role="menuitem" tabindex="-1">Log out</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
 
-<div class="container-fluid">
-    <div class="row">
-        <div id="main_container" class="col-md-12">
-            <div ng-view><div id="installError">There was an error when installing
the console. Please run make install for the router and check for errors.</div></div>
+        <div class="collapse navbar-collapse navbar-collapse-1">
+            <ul class="nav navbar-nav navbar-primary" ng-controller="QDR.NavBarController">
+                <li ng-repeat="link in breadcrumbs" title="{{link.title}}" ng-show="isValid(link)"
+                    ng-class='{active : isActive(link.href), "pull-right" : isRight(link),
haschart: hasChart(link)}'>
+                    <a ng-href="{{link.href}}{{hash}}" ng-bind-html="link.content"></a>
+                </li>
+            </ul>
         </div>
-    </div>
-</div>
+    </nav>
 
-<script type="module" src="main.js"></script>
-<script type="text/javascript" src="js/vendor.min.js"></script>
-<script defer nomodule>
-    var installError = document.getElementById('installError');
-    if (installError) {
-        installError.innerHTML = 'This browser is not supported because it does not support
es-2015 modules. <a href="https://www.ecma-international.org/ecma-262/6.0/">https://www.ecma-international.org/ecma-262/6.0/</a><br/>Please
use a different browser.';
-    }
-</script>
+    <div class="container-fluid">
+        <div class="row">
+            <div id="main_container" class="col-md-12">
+                <div ng-view>
+                    <div id="installError">There was an error when installing the console.
Please run make install for
+                        the router and check for errors.</div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<script>
-    // If angular hasn't loaded a page after 1 second, display the error message
-    setTimeout(function () {
+    <script type="module" src="main.js"></script>
+    <script type="text/javascript" src="js/vendor.min.js"></script>
+    <script defer nomodule>
         var installError = document.getElementById('installError');
-        if (installError)
-            installError.style.display = "block";
-    }, 1000);
-    $(function(){
-        $('.nav a').on('click', function(){
-            $('.navbar-collapse').collapse('hide');
-        });
-    })
-</script>
+        if (installError) {
+            installError.innerHTML = 'This browser is not supported because it does not support
es-2015 modules. <a href="https://www.ecma-international.org/ecma-262/6.0/">https://www.ecma-international.org/ecma-262/6.0/</a><br/>Please
use a different browser.';
+        }
+    </script>
+
+    <script>
+        // If angular hasn't loaded a page after 1 second, display the error message
+        setTimeout(function () {
+            var installError = document.getElementById('installError');
+            if (installError)
+                installError.style.display = "block";
+        }, 1000);
+        $(function () {
+            $('.nav a').on('click', function () {
+                $('.navbar-collapse').collapse('hide');
+            });
+        })
+    </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/console/stand-alone/main.js b/console/stand-alone/main.js
index 0fc5c30..2be7114 100644
--- a/console/stand-alone/main.js
+++ b/console/stand-alone/main.js
@@ -43,19 +43,20 @@ import { DetailDialogController, SubTable } from './plugin/js/dlgDetailControlle
 import { SettingsController } from './plugin/js/qdrSettings.js';
 import { SchemaController } from './plugin/js/qdrSchema.js';
 import { ChartsController } from './plugin/js/qdrCharts.js';
+import { AboutController } from './plugin/js/qdrAbout.js';
 import { posint } from './plugin/js/posintDirective.js';
 
-(function(QDR) {
+(function (QDR) {
 
   /**
    * This plugin's angularjs module instance
    */
   QDR.module = angular.module('QDR', ['ngRoute', 'ngSanitize', 'ngResource', 'ui.bootstrap',
     'ui.grid', 'ui.grid.selection', 'ui.grid.autoResize', 'ui.grid.resizeColumns', 'ui.grid.saveState',
-    'ui.slider', 'ui.checkbox', 'patternfly.charts', 'patternfly.card']);
+    'ui.slider', 'ui.checkbox', 'patternfly.charts', 'patternfly.card', 'patternfly.modals']);
 
   // set up the routing for this plugin
-  QDR.module.config(function($routeProvider) {
+  QDR.module.config(function ($routeProvider) {
     $routeProvider
       .when('/', {
         templateUrl: QDRTemplatePath + 'qdrOverview.html'
@@ -88,9 +89,9 @@ import { posint } from './plugin/js/posintDirective.js';
     $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
   });
 
-  QDR.module.filter('to_trusted', ['$sce', function($sce){
-    return function(text) {
-      return $sce.trustAsHtml(text+'');
+  QDR.module.filter('to_trusted', ['$sce', function ($sce) {
+    return function (text) {
+      return $sce.trustAsHtml(text + '');
     };
   }]);
 
@@ -105,19 +106,19 @@ import { posint } from './plugin/js/posintDirective.js';
       if (!str)
         return '';
       return str.replace(/(\w)(\w*)/g,
-        function(g0,g1,g2){return g1.toUpperCase() + g2.toLowerCase();});
+        function (g0, g1, g2) { return g1.toUpperCase() + g2.toLowerCase(); });
     };
   });
 
   QDR.module.filter('safePlural', function () {
     return function (str) {
       var es = ['x', 'ch', 'ss', 'sh'];
-      for (var i=0; i<es.length; ++i) {
+      for (var i = 0; i < es.length; ++i) {
         if (str.endsWith(es[i]))
           return str + 'es';
       }
       if (str.endsWith('y'))
-        return str.substr(0, str.length-2) + 'ies';
+        return str.substr(0, str.length - 2) + 'ies';
       if (str.endsWith('s'))
         return str;
       return str + 's';
@@ -142,7 +143,7 @@ import { posint } from './plugin/js/posintDirective.js';
   });
   // one-time initialization happens in the run function
   // of our module
-  QDR.module.run( ['$rootScope', '$route', '$timeout', '$location', '$log', 'QDRService',
'QDRChartService',  function ($rootScope, $route, $timeout, $location, $log, QDRService, QDRChartService)
{
+  QDR.module.run(['$rootScope', '$route', '$timeout', '$location', '$log', 'QDRService',
'QDRChartService', function ($rootScope, $route, $timeout, $location, $log, QDRService, QDRChartService)
{
     let QDRLog = new QDRLogger($log, 'main');
     QDRLog.info('************* creating Dispatch Console ************');
 
@@ -164,10 +165,10 @@ import { posint } from './plugin/js/posintDirective.js';
         if (search.org === 'connect')
           $location.search('org', 'overview');
       }
-      var connectOptions = {address: host, port: port};
-      QDRLog.info('Attempting AMQP over websockets connection using address:port of browser
('+host+':'+port+')');
+      var connectOptions = { address: host, port: port };
+      QDRLog.info('Attempting AMQP over websockets connection using address:port of browser
(' + host + ':' + port + ')');
       QDRService.management.connection.testConnect(connectOptions)
-        .then( function () {
+        .then(function () {
           // We didn't connect with reconnect: true flag.
           // The reason being that if we used reconnect:true and the connection failed, rhea
would keep trying. There
           // doesn't appear to be a way to tell it to stop trying to reconnect.
@@ -176,9 +177,9 @@ import { posint } from './plugin/js/posintDirective.js';
           connectOptions.reconnect = true;
           // complete the connection (create the sender/receiver)
           QDRService.connect(connectOptions)
-            .then( function () {
-            // register a callback for when the node list is available (needed for loading
saved charts)
-              QDRService.management.topology.addUpdatedAction('initChartService', function()
{
+            .then(function () {
+              // register a callback for when the node list is available (needed for loading
saved charts)
+              QDRService.management.topology.addUpdatedAction('initChartService', function
() {
                 QDRService.management.topology.delUpdatedAction('initChartService');
                 QDRChartService.init(); // initialize charting service after we are connected
               });
@@ -196,7 +197,7 @@ import { posint } from './plugin/js/posintDirective.js';
         });
     }
 
-    $rootScope.$on('$routeChangeSuccess', function() {
+    $rootScope.$on('$routeChangeSuccess', function () {
       var path = $location.path();
       if (path !== '/connect') {
         localStorage[QDR_LAST_LOCATION] = path;
@@ -204,7 +205,7 @@ import { posint } from './plugin/js/posintDirective.js';
     });
   }]);
 
-  QDR.module.controller ('QDR.MainController', ['$scope', '$log', '$location', function ($scope,
$log, $location) {
+  QDR.module.controller('QDR.MainController', ['$scope', '$log', '$location', function ($scope,
$log, $location) {
     let QDRLog = new QDRLogger($log, 'MainController');
     QDRLog.debug('started QDR.MainController with location.url: ' + $location.url());
     QDRLog.debug('started QDR.MainController with window.location.pathname : ' + window.location.pathname);
@@ -213,22 +214,22 @@ import { posint } from './plugin/js/posintDirective.js';
       id: 'qdr',
       content: 'Qpid Dispatch Router Console',
       title: 'Dispatch Router Console',
-      isValid: function() { return true; },
-      href: function() { return '#connect'; },
-      isActive: function() { return true; }
+      isValid: function () { return true; },
+      href: function () { return '#connect'; },
+      isActive: function () { return true; }
     });
   }]);
 
-  QDR.module.controller ('QDR.Core', function ($scope, $rootScope) {
+  QDR.module.controller('QDR.Core', function ($scope, $rootScope, $timeout, QDRService) {
     $scope.alerts = [];
     $scope.breadcrumb = {};
-    $scope.closeAlert = function(index) {
+    $scope.closeAlert = function (index) {
       $scope.alerts.splice(index, 1);
     };
-    $scope.$on('setCrumb', function(event, data) {
+    $scope.$on('setCrumb', function (event, data) {
       $scope.breadcrumb = data;
     });
-    $scope.$on('newAlert', function(event, data) {
+    $scope.$on('newAlert', function (event, data) {
       $scope.alerts.push(data);
       $scope.$apply();
     });
@@ -239,6 +240,41 @@ import { posint } from './plugin/js/posintDirective.js';
     $scope.pageMenuClicked = function () {
       $rootScope.$broadcast('pageMenuClicked');
     };
+    $scope.logout = function () {
+      QDRService.management.connection.disconnect();
+      location.href = "#/connect";
+    };
+    $scope.user = '';
+    let onConnected = function () {
+      if (!QDRService.management.connection.is_connected()) {
+        setTimeout(onConnected, 1000);
+        return;
+      }
+      QDRService.management.connection.addDisconnectAction(onDisconnect);
+      let parts = QDRService.management.connection.getReceiverAddress().split("/");
+      parts[parts.length - 1] = "$management";
+      let router = parts.join('/');
+      QDRService.management.topology.fetchEntity(router, "connection", [], function (nodeId,
entity, response) {
+        $timeout(function () {
+          response.results.some(result => {
+            let c = QDRService.utilities.flatten(response.attributeNames, result);
+            if (QDRService.utilities.isConsole(c)) {
+              $scope.user = c.user;
+              return true;
+            }
+            return false;
+          });
+        });
+      });
+    };
+
+    let onDisconnect = function () {
+      QDRService.management.connection.addConnectAction(onConnected);
+      $timeout(() => {
+        $scope.user = '';
+      });
+    };
+    onDisconnect();
   });
 
   QDR.module.controller('QDR.NavBarController', NavBarController);
@@ -254,7 +290,8 @@ import { posint } from './plugin/js/posintDirective.js';
   QDR.module.controller('QDR.ListController', ListController);
   QDR.module.controller('QDR.SchemaController', SchemaController);
   QDR.module.controller('QDR.ChartsController', ChartsController);
-  
+  QDR.module.controller('QDR.AboutController', AboutController);
+
   QDR.module.service('QDRService', QDRService);
   QDR.module.service('QDRChartService', QDRChartService);
   QDR.module.directive('posint', posint);
diff --git a/console/stand-alone/plugin/css/dispatch.css b/console/stand-alone/plugin/css/dispatch.css
index 39a7284..2a7472a 100644
--- a/console/stand-alone/plugin/css/dispatch.css
+++ b/console/stand-alone/plugin/css/dispatch.css
@@ -461,7 +461,7 @@ ul.qdrTopoModes {
 }
 
 .overview-tree, .qdr-attributes {
-  min-height: calc(100vh - 90px)
+  min-height: calc(100vh - 100px)
 }
 /*
 .treeContainer {
@@ -1660,13 +1660,11 @@ svg {
   }
 
 /* The following are for matching Patternfly styles */
-span.logo {
-    letter-spacing: 3px;
+  span.logo {
+    letter-spacing: 2px;
+    font-weight: bold;
   }
   
-  .navbar-pf .navbar-brand {
-    padding: 2px 0 2px;
-  }
   /* using fancytree instead of treeview */
   
   #overtree ul.fancytree-container,
@@ -1874,7 +1872,7 @@ span.logo {
   
   .pane-bar {
     float: right;
-    height: calc(100vh - 75px);
+    height: calc(100vh - 89px);
     width: 6px;
     background-color: white;
     border: 1px solid #e0e0e0;
@@ -2023,7 +2021,7 @@ span.logo {
   }
   
   .navbar-fixed-top + .container-fluid {
-    padding-top: 71px;
+    padding-top: 83px;
   }
   
   @media (max-width: 768px) {
@@ -2039,7 +2037,7 @@ span.logo {
   @media (min-width: 768px) {
     .navbar-collapse.page-menu {
       padding-right: 0;
-      /* height: calc(100vh - 74px) !important; */
+      /* height: calc(100vh - 84px) !important; */
     }
   }
   @media (max-width: 768px) {
@@ -2103,3 +2101,41 @@ span.logo {
     color: white;
     background-color: #444444;
   }
+
+  .masthead-icons {
+    position: absolute;
+    right: 1em;
+    color: white;
+    padding-top: 5px;
+    font-size: large;
+    cursor: pointer;
+  }
+
+  .masthead-icons div.about {
+    display: inline-block;
+    margin-right: 1em;
+  }
+
+  .masthead-icons div.dropdown {
+    display: inline-block;
+  }
+
+  .masthead-icons div.dropdown button {
+    border: 0px;
+    background: transparent;
+    color: #F8F8F8;
+    font-weight: bold;
+  }
+
+  .masthead-icons .dropdown-menu {
+    right: 0;
+    left: auto;
+  }
+
+  .masthead-icons span.caret {
+    font-weight: bold;
+  }
+
+  .masthead-icons span.user-name {
+    font-size: 12px;
+  }
diff --git a/console/stand-alone/plugin/html/qdrList.html b/console/stand-alone/plugin/html/qdrList.html
index fc9b19c..845339d 100644
--- a/console/stand-alone/plugin/html/qdrList.html
+++ b/console/stand-alone/plugin/html/qdrList.html
@@ -18,61 +18,59 @@ under the License.
 -->
 
 <style>
-.list-grid {
-    padding-left: 300px;
-}
-
-span.fancytree-icon {
-    margin-left: 0;
-}
-
-._treeContainer {
-    width: 300px;
-    padding-right: 10px;
-}
-
-.tree-header {
-    z-index: 4;
-}
-
-#list-controller .tree-header {
-  height: auto;
-}
-
-#list-controller select {
-  height: 25px;
-  width: 300px;
-  background-color: #333333;
-  border: 0;
-}
-
-#list-controller div.list-grid select {
-    background-color: white;
-}
-
-.list-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% - 40px);
-    margin-left: 20px;
-}
-
-@media (min-width: 768px) {
-    .navbar-collapse.page-menu {
-        padding-right: 0;
-        min-height: calc(100vh - 71px) !important;
+    .list-grid {
+        padding-left: 300px;
+    }
+
+    span.fancytree-icon {
+        margin-left: 0;
+    }
+
+    ._treeContainer {
+        width: 300px;
+        padding-right: 10px;
+    }
+
+    .tree-header {
+        z-index: 4;
+    }
+
+    #list-controller .tree-header {
+        height: auto;
+    }
+
+    #list-controller select {
+        height: 25px;
+        width: 300px;
+        background-color: #333333;
+        border: 0;
+    }
+
+    #list-controller div.list-grid select {
+        background-color: white;
+    }
+
+    .list-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(100% - 40px);
+        margin-left: 20px;
+    }
+
+    @media (min-width: 768px) {
+        .navbar-collapse.page-menu {
+            padding-right: 0;
+            min-height: calc(100vh - 84px) !important;
+        }
     }
-}
 </style>
 
 <div id="list-controller" ng-controller="QDR.ListController">
 
     <div class="page-menu navbar-collapse collapse">
-        <div class="tree-header"><select id="routerSelect"
-            ng-options="node as node.name for node in nodes" 
-            ng-model="currentNode" 
-            ng-change="selectNode(currentNode)"></select></div>
+        <div class="tree-header"><select id="routerSelect" ng-options="node as node.name
for node in nodes"
+                ng-model="currentNode" ng-change="selectNode(currentNode)"></select></div>
         <div class="_treeContainer">
             <div id="entityTree" onSelect="onTreeSelected" onRoot="onRootReady" hideRoot="true"></div>
             <div ng-init="treeReady()"></div>
@@ -82,17 +80,20 @@ span.fancytree-icon {
     <div class="list-grid">
         <div class="row-fluid qdrListActions">
             <ul class="nav nav-tabs">
-                <li ng-repeat="mode in modes" ng-show="isValid(mode)" ng-click="selectMode(mode)"
ng-class="{active : isModeSelected(mode)}" title="{{mode.title}}" ng-bind-html="mode.content">
</li>
+                <li ng-repeat="mode in modes" ng-show="isValid(mode)" ng-click="selectMode(mode)"
+                    ng-class="{active : isModeSelected(mode)}" title="{{mode.title}}" ng-bind-html="mode.content">
</li>
             </ul>
             <h4>{{selectedRecordName | to_trusted}}</h4>
             <div ng-show="currentMode.id === 'attributes'" class="selectedItems">
-                <div ng-show="selectedRecordName === selectedEntity" class="no-content">There
are no {{selectedEntity | safePlural | to_trusted}}</div>
-                <div id='details-grid' ng-hide="selectedRecordName === selectedEntity"
ui-grid="details" ui-grid-resize-columns ui-grid-save-state
-                ui-grid-auto-resize ng-style="getTableHeight()"></div>
+                <div ng-show="selectedRecordName === selectedEntity" class="no-content">There
are no
+                    {{selectedEntity | safePlural | to_trusted}}</div>
+                <div id='details-grid' ng-hide="selectedRecordName === selectedEntity"
ui-grid="details"
+                    ui-grid-resize-columns ui-grid-save-state ui-grid-auto-resize ng-style="getTableHeight()"></div>
             </div>
             <div ng-show="currentMode.id === 'delete'">
                 <div class="delete" ng-show="selectedRecordName !== selectedEntity">
-                    <button class="btn btn-primary" ng-click="remove()">Delete</button>
{{selectedRecordName | to_trusted}}
+                    <button class="btn btn-primary" ng-click="remove()">Delete</button>
+                    {{selectedRecordName | to_trusted}}
                 </div>
                 <div ng-hide="selectedRecordName !== selectedEntity">
                     There are no {{selectedEntity | safePlural | to_trusted}}
@@ -105,28 +106,61 @@ span.fancytree-icon {
                             <th>Attribute</th>
                             <th>Value</th>
                         </tr>
-                    <tr title="{{attribute.title}}" ng-repeat="attribute in detailFields">
-                        <td><label for="{{attribute.name}}">{{attribute.name
| humanify | to_trusted}}</label></td>
-                        <!-- we can't do <input type="{angular expression}"> because...
jquery throws an exception because... -->
-                        <td>
-                        <div ng-if="attribute.input == 'input'">
-                            <!-- ng-pattern="testPattern(attribute)" -->
-                            <div ng-if="attribute.type == 'number'"><input type="number"
name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.rawValue" ng-required="attribute.required"
ng-class="{required: attribute.required, unique: attribute.unique}" class="ui-widget-content
ui-corner-all"/><span ng-if="attribute.required" title="required" class="required-indicator"></span><span
ng-if="attribute.unique" title="unique" class="unique-indicator"></span></div>
-                            <div ng-if="attribute.type == 'text'"><input type="text"
name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.attributeValue" ng-required="attribute.required"
ng-class="{required: attribute.required, unique: attribute.unique}" class="ui-widget-content
ui-corner-all"/><span ng-if="attribute.required" title="required" class="required-indicator"></span><span
ng-if="attribute.unique" title="unique" class="unique-indicator"></span></div>
-                            <div ng-if="attribute.type == 'textarea'"><textarea
name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.attributeValue" ng-required="attribute.required"
ng-class="{required: attribute.required, unique: attribute.unique}" class="ui-widget-content
ui-corner-all"></textarea><span ng-if="attribute.required" title="required" class="required-indicator"></span><span
ng-if="attribute.unique" title="unique" class="unique-indicator"></span></div>
-                            <span ng-if="attribute.type == 'disabled'" >{{getAttributeValue(attribute)
| to_trusted}}</span>
-                        </div>
-                        <div ng-if="attribute.input == 'select'">
-                            <select id="{{attribute.name}}" ng-model="attribute.selected"
ng-required="attribute.required" ng-class="{required: attribute.required, unique: attribute.unique}"
ng-options="item for item in attribute.rawtype track by item"></select>
-                            <span ng-if="attribute.required" title="required" class="required-indicator"></span><span
ng-if="attribute.unique" title="unique" class="unique-indicator"></span>
-                        </div>
-                        <div ng-if="attribute.input == 'boolean'" class="boolean">
-                            <label><input type="radio" ng-model="attribute.rawValue"
ng-value="true"> True</label>
-                            <label><input type="radio" ng-model="attribute.rawValue"
ng-value="false"> False</label>
-                        </div>
-                        </td>
-                    </tr>
-                    <tr><td></td><td><button class="btn btn-primary"
type="button" ng-click="ok()">{{operation | Pascalcase | to_trusted}}</button></td></tr>
+                        <tr title="{{attribute.title}}" ng-repeat="attribute in detailFields">
+                            <td><label for="{{attribute.name}}">{{attribute.name
| humanify | to_trusted}}</label></td>
+                            <!-- we can't do <input type="{angular expression}">
because... jquery throws an exception because... -->
+                            <td>
+                                <div ng-if="attribute.input == 'input'">
+                                    <!-- ng-pattern="testPattern(attribute)" -->
+                                    <div ng-if="attribute.type == 'number'"><input
type="number"
+                                            name="{{attribute.name}}" id="{{attribute.name}}"
+                                            ng-model="attribute.rawValue" ng-required="attribute.required"
+                                            ng-class="{required: attribute.required, unique:
attribute.unique}"
+                                            class="ui-widget-content ui-corner-all" /><span
ng-if="attribute.required"
+                                            title="required" class="required-indicator"></span><span
+                                            ng-if="attribute.unique" title="unique" class="unique-indicator"></span>
+                                    </div>
+                                    <div ng-if="attribute.type == 'text'"><input
type="text" name="{{attribute.name}}"
+                                            id="{{attribute.name}}" ng-model="attribute.attributeValue"
+                                            ng-required="attribute.required"
+                                            ng-class="{required: attribute.required, unique:
attribute.unique}"
+                                            class="ui-widget-content ui-corner-all" /><span
ng-if="attribute.required"
+                                            title="required" class="required-indicator"></span><span
+                                            ng-if="attribute.unique" title="unique" class="unique-indicator"></span>
+                                    </div>
+                                    <div ng-if="attribute.type == 'textarea'"><textarea
name="{{attribute.name}}"
+                                            id="{{attribute.name}}" ng-model="attribute.attributeValue"
+                                            ng-required="attribute.required"
+                                            ng-class="{required: attribute.required, unique:
attribute.unique}"
+                                            class="ui-widget-content ui-corner-all"></textarea><span
+                                            ng-if="attribute.required" title="required"
+                                            class="required-indicator"></span><span
ng-if="attribute.unique"
+                                            title="unique" class="unique-indicator"></span></div>
+                                    <span
+                                        ng-if="attribute.type == 'disabled'">{{getAttributeValue(attribute)
| to_trusted}}</span>
+                                </div>
+                                <div ng-if="attribute.input == 'select'">
+                                    <select id="{{attribute.name}}" ng-model="attribute.selected"
+                                        ng-required="attribute.required"
+                                        ng-class="{required: attribute.required, unique:
attribute.unique}"
+                                        ng-options="item for item in attribute.rawtype track
by item"></select>
+                                    <span ng-if="attribute.required" title="required"
+                                        class="required-indicator"></span><span
ng-if="attribute.unique" title="unique"
+                                        class="unique-indicator"></span>
+                                </div>
+                                <div ng-if="attribute.input == 'boolean'" class="boolean">
+                                    <label><input type="radio" ng-model="attribute.rawValue"
ng-value="true">
+                                        True</label>
+                                    <label><input type="radio" ng-model="attribute.rawValue"
ng-value="false">
+                                        False</label>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td></td>
+                            <td><button class="btn btn-primary" type="button"
+                                    ng-click="ok()">{{operation | Pascalcase | to_trusted}}</button></td>
+                        </tr>
                     </table>
                 </fieldset>
             </div>
@@ -137,17 +171,23 @@ span.fancytree-icon {
                             <td align="left" colspan="2">{{entry.time}}</td>
                         </tr>
                         <tr>
-                            <td>Type</td><td>{{entry.type}}</td>
+                            <td>Type</td>
+                            <td>{{entry.type}}</td>
                         </tr>
                         <tr>
-                            <td>Source</td><td>{{entry.source}}:{{entry.line}}</td>
+                            <td>Source</td>
+                            <td>{{entry.source}}:{{entry.line}}</td>
                         </tr>
                         <tr>
-                            <td valign="middle">Message</td><td valign="middle"><pre>{{entry.message}}</pre></td>
+                            <td valign="middle">Message</td>
+                            <td valign="middle">
+                                <pre>{{entry.message}}</pre>
+                            </td>
                         </tr>
                     </table>
                 </div>
-                <div ng-if="logResults.length == 0 && !fetchingLog">No log
entries for {{selectedRecordName | to_trusted}}</div>
+                <div ng-if="logResults.length == 0 && !fetchingLog">No log
entries for
+                    {{selectedRecordName | to_trusted}}</div>
                 <div ng-if="fetchingLog">Fetching logs for {{selectedRecordName | to_trusted}}</div>
             </div>
         </div>
@@ -156,14 +196,15 @@ span.fancytree-icon {
 
 <style>
     @media (min-width: 768px) {
-      .list-grid {
-        padding-left: 300px;
-      }
+        .list-grid {
+            padding-left: 300px;
+        }
     }
+
     @media (max-width: 768px) {
-      .list-grid {
-          padding-left: 0;
-      }
-    
+        .list-grid {
+            padding-left: 0;
+        }
+
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/console/stand-alone/plugin/html/qdrOverview.html b/console/stand-alone/plugin/html/qdrOverview.html
index e1a1fce..98d7027 100644
--- a/console/stand-alone/plugin/html/qdrOverview.html
+++ b/console/stand-alone/plugin/html/qdrOverview.html
@@ -18,72 +18,72 @@ under the License.
 -->
 
 <style>
-@media (min-width: 768px) {
-  .overview-grid {
-    padding-left: 300px;
-  }
-}
-@media (max-width: 768px) {
-  .overview-grid {
-      padding-left: 0;
-  }
+    @media (min-width: 768px) {
+        .overview-grid {
+            padding-left: 300px;
+        }
+    }
 
-}
+    @media (max-width: 768px) {
+        .overview-grid {
+            padding-left: 0;
+        }
 
-span.fancytree-icon {
-    margin-left: 0;
-}
+    }
 
-.treeContainer {
-    width: 300px;
-    padding-right: 10px;
-}
+    span.fancytree-icon {
+        margin-left: 0;
+    }
 
-  .gridDetails .aChart {
-    margin-left: -1em;
-    margin-right: 2em;
-    width: 400px;
-  }
+    .treeContainer {
+        width: 300px;
+        padding-right: 10px;
+    }
 
-@media (max-width: 768px) {
-  .gridDetails .aChart {
-    margin-right: 1em;
-    width: 380px;
-  }
-}
+    .gridDetails .aChart {
+        margin-left: -1em;
+        margin-right: 2em;
+        width: 400px;
+    }
 
-.page-menu {
-    top: 0;
-}
+    @media (max-width: 768px) {
+        .gridDetails .aChart {
+            margin-right: 1em;
+            width: 380px;
+        }
+    }
 
-.overview-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% - 40px);
-    margin-left: 20px;
-}
+    .page-menu {
+        top: 0;
+    }
 
-@media (min-width: 768px) {
-    .navbar-collapse.page-menu {
-        padding-right: 0;
-        min-height: calc(100vh - 71px) !important;
+    .overview-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(100% - 40px);
+        margin-left: 20px;
     }
-}
 
-div.chartContainer {
-    clear: both;
-    width: 100%;
-}
+    @media (min-width: 768px) {
+        .navbar-collapse.page-menu {
+            padding-right: 0;
+            min-height: calc(100vh - 84px) !important;
+        }
+    }
 
-.line-chart-pf .c3-zoom-rect {
-    opacity: 0 !important;
-}
+    div.chartContainer {
+        clear: both;
+        width: 100%;
+    }
 
-.trend-header-compact-pf {
-    width: 11em;
-}
+    .line-chart-pf .c3-zoom-rect {
+        opacity: 0 !important;
+    }
 
+    .trend-header-compact-pf {
+        width: 11em;
+    }
 </style>
 
 <div id="overview-controller" ng-controller="QDR.OverviewController">
@@ -311,5 +311,4 @@ div.chartContainer {
     <div class="modal-footer">
         <button class="btn btn-primary" type="button" ng-click="ok()">Close</button>
     </div>
-</script>
-
+</script>
\ No newline at end of file


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org


Mime
View raw message