Merge pull request #18 from Landoop/0.7.2

v0.7.2

src/app.js

@@ -39,7 +39,11 @@ angularAPP.config(function ($routeProvider) {
       templateUrl: 'src/kafka-topics/new/new-topic.html',
       controller: 'HeaderCtrl'
     })
-    .when('/topic/:topicName', {
+    .when('/topic/:topicCategoryUrl/:topicName/', {
+        templateUrl: 'src/kafka-topics/view/view.html',
+        controller: 'ViewTopicCtrl'
+      })
+    .when('/topic/:topicCategoryUrl/:topicName/:selectedTabIndex', {
       templateUrl: 'src/kafka-topics/view/view.html',
       controller: 'ViewTopicCtrl'
     }).otherwise({
@@ -48,6 +52,20 @@ angularAPP.config(function ($routeProvider) {
   // $locationProvider.html5Mode(true);
 });
 
+angularAPP.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
+    var original = $location.path;
+    $location.path = function (path, reload) {
+        if (reload === false) {
+            var lastRoute = $route.current;
+            var un = $rootScope.$on('$locationChangeSuccess', function () {
+                $route.current = lastRoute;
+                un();
+            });
+        }
+        return original.apply($location, [path]);
+    };
+}])
+
 // ng-show="x | isEmpty"
 angularAPP.filter('isEmpty', function () {
   var bar;

src/assets/css/styles.css

@@ -63,7 +63,18 @@ a:link, header.a:visited, header.a:hover, header.a:active {
     border: 1px solid #ddd;
     z-index: 2;
 }
+.normalcontent.ng-scope {
+    overflow:initial}
+}
+
+.leftlistPagination .pagination {
+    margin:0;
+}
 
+.toggleconfig {
+    float: right;
+    color: #448AFF;
+}
 .example1:after {
     content: "Register a Complex Schema";
 }

src/factories/dirPagination.js

@@ -225,7 +225,7 @@
 
     function dirPaginationControlsTemplateInstaller($templateCache) {
       var strVar="";
-      strVar += "<section style=\"margin: 0;margin-top: 5px;margin-bottom: -15px;\" layout=\"row\" layout-align=\"center\" ng-if=\"1 < pages.length || !autoHide\" class=\"pagination\"> <md-button aria-label=\"Previous page\" ng-if=\"boundaryLinks\" ng-disabled=\"pagination.current===1\" ng-click=\"setCurrent(1)\"> <ng-md-icon icon=\"first_page\"><\/ng-md-icon> <\/md-button> <md-button aria-label=\"First page\" ng-if=\"directionLinks\" ng-disabled=\"pagination.current===1\" ng-click=\"setCurrent(pagination.current - 1)\"> <ng-md-icon class=\"fa fa-chevron-left\"><\/ng-md-icon> <\/md-button> <md-button ng-repeat=\"pageNumber in pages track by tracker(pageNumber, $index)\" ng-class=\"{'md-primary' : pagination.current==pageNumber}\" ng-disabled=\"pageNumber==='...'\" ng-click=\"setCurrent(pageNumber)\">{{pageNumber}}<\/md-button> <md-button aria-label=\"Last page\" ng-if=\"directionLinks\" ng-disabled=\"pagination.current===pagination.last\" ng-click=\"setCurrent(pagination.current + 1)\"> <ng-md-icon class=\"fa fa-chevron-right\"><\/ng-md-icon> <\/md-button> <md-button ng-if=\"boundaryLinks\" ng-disabled=\"pagination.current===pagination.last\" ng-click=\"setCurrent(pagination.last)\"> <ng-md-icon icon=\"last_page\"><\/ng-md-icon> <\/md-button><\/section>";
+      strVar += "<section  layout=\"row\" layout-align=\"center\" ng-if=\"1 < pages.length || !autoHide\" class=\"pagination\"> <md-button aria-label=\"Previous page\" ng-if=\"boundaryLinks\" ng-disabled=\"pagination.current===1\" ng-click=\"setCurrent(1)\"> <ng-md-icon icon=\"first_page\"><\/ng-md-icon> <\/md-button> <md-button aria-label=\"First page\" ng-if=\"directionLinks\" ng-disabled=\"pagination.current===1\" ng-click=\"setCurrent(pagination.current - 1)\"> <ng-md-icon class=\"fa fa-chevron-left\"><\/ng-md-icon> <\/md-button> <md-button ng-repeat=\"pageNumber in pages track by tracker(pageNumber, $index)\" ng-class=\"{'md-primary' : pagination.current==pageNumber}\" ng-disabled=\"pageNumber==='...'\" ng-click=\"setCurrent(pageNumber)\">{{pageNumber}}<\/md-button> <md-button aria-label=\"Last page\" ng-if=\"directionLinks\" ng-disabled=\"pagination.current===pagination.last\" ng-click=\"setCurrent(pagination.current + 1)\"> <ng-md-icon class=\"fa fa-chevron-right\"><\/ng-md-icon> <\/md-button> <md-button ng-if=\"boundaryLinks\" ng-disabled=\"pagination.current===pagination.last\" ng-click=\"setCurrent(pagination.last)\"> <ng-md-icon icon=\"last_page\"><\/ng-md-icon> <\/md-button><\/section>";
 
       $templateCache.put('angularUtils.directives.dirPagination.template', strVar);
     }

src/factories/kafka-rest-proxy-factory.js

@@ -24,6 +24,7 @@ angularAPP.factory('KafkaRestProxyFactory', function ($rootScope, $http, $log, $
       function success(response) {
         $log.debug("  curl -X GET " + url + " in [ " + (new Date().getTime() - start) + " ] msec");
         var topicNames = response.data;
+
         deferred.resolve(topicNames);
       },
       function failure(response) {

src/kafka-topics/list/control-topics-list.html

@@ -12,13 +12,14 @@
     <!--Topics List-->
     <div flex>
       <md-list class="md-dense" flex>
-        <md-list-item
-                dir-paginate="topic in controlTopics| orderBy:'topic' | filter : search | itemsPerPage: 7"
+        <md-list-item dir-paginate="topic in controlTopics| orderBy:'topic' | filter : search | itemsPerPage: topicsPerPage"
                 pagination-id="controlTopics"
                 ng-click="listClick(topic)"
                 class="md-2-line"
-                ng-class="{ 'selectedListItem': topic == topicName }">
+                current-page="controlTopicPage"
+                ng-class="{ 'selectedListItem': topic == topicName }"
 
+        >
           <div ng-show="hasExtraConfig(topic) != ''">
             <i class="fa fa-asterisk" aria-hidden="true" style="color:red; padding-right:15px; font-size:10px;"></i>
           </div>
@@ -40,8 +41,8 @@ <h4>{{shortenControlCenterName(topic)}}</h4>
     </div>
 
     <!--Pagination-->
-    <div flex>
-      <dir-pagination-controls pagination-id="controlTopics" style="margin:0;"></dir-pagination-controls>
+    <div flex class="leftlistPagination">
+      <dir-pagination-controls on-page-change="getTopicPage(newPageNumber, oldPageNumber)" pagination-id="controlTopics" style="margin:0;"></dir-pagination-controls>
     </div>
 
     <!--Notes-->

src/kafka-topics/list/left-list.html

@@ -1,29 +1,18 @@
 <md-card>
-
-  <md-toolbar ng-show="!displayingControlTopics" class="md-hue-2">
+  <md-toolbar  class="md-hue-2">
     <div class="md-toolbar-tools">
       <h2>
-        <span><b>{{topics.length}}</b> Topics</span>
+        <span ng-show="!displayingControlTopics"><b>{{topics.length}}</b> Topics</span>
+        <span ng-show="displayingControlTopics"><b>{{controlTopics.length}}</b> Topics</span>
       </h2>
-      <span flex></span>
-      <md-switch style="font-size:14px"  class="md-icon-button" ng-model='displayingControlTopics' aria-label="Show system topics" >
-        <div ng-if="displayingControlTopics"><b>System Topics</b></div>
-        <div ng-if="!displayingControlTopics">System Topics</div>
-      </md-switch>
-    </div>
-  </md-toolbar>
 
-  <md-toolbar ng-show="displayingControlTopics" class="md-hue-2">
-    <div class="md-toolbar-tools">
-      <h2>
-        <span><b>{{controlTopics.length}}</b> Topics</span>
-      </h2>
       <span flex></span>
       <md-switch style="font-size:14px"  class="md-icon-button" ng-model='displayingControlTopics' aria-label="Show system topics" >
         <div ng-if="displayingControlTopics"><b>System Topics</b></div>
-        <div ng-if="!displayingControlTopics">System Topics</div>
+        <div ng-if="!displayingControlTopics"><b>System Topics</b></div>
       </md-switch>
     </div>
+
   </md-toolbar>
 
   <div ng-show="!displayingControlTopics" ng-include="'src/kafka-topics/list/topics-list.html'"></div>

src/kafka-topics/list/topics-list.controller.js

@@ -2,7 +2,14 @@ angularAPP.controller('KafkaTopicsListCtrl', function ($scope, $rootScope, $loca
 
   $log.info("Starting kafka-topics controller : list (getting topic info)");
   toastFactory.hideToast();
-  $scope.displayingControlTopics = false;
+
+  $rootScope.$watch('topicCategoryUrl' ,function(){
+    $scope.displayingControlTopics = false;
+    if ($rootScope.topicCategoryUrl =='c') {
+      $scope.displayingControlTopics = true;
+      }
+    },true);
+
   KafkaRestProxyFactory.loadSchemas();
 
   /**
@@ -28,6 +35,20 @@ angularAPP.controller('KafkaTopicsListCtrl', function ($scope, $rootScope, $loca
           $log.error('Failed: ' + reason);
         });
 
+      $scope.topicsPerPage = 7;
+
+      $scope.controlTopicIndex = $scope.controlTopics.indexOf($rootScope.topicName );
+      $scope.controlTopicPage = Math.ceil($scope.controlTopicIndex / $scope.topicsPerPage);
+      if ($scope.controlTopicPage < 1) {
+        $scope.controlTopicPage = 1
+      }
+
+      $scope.normalTopicIndex = $scope.topics.indexOf($rootScope.topicName );
+      $scope.normalTopicPage = Math.ceil($scope.normalTopicIndex / $scope.topicsPerPage);
+      if ($scope.normalTopicPage < 1) {
+        $scope.normalTopicPage = 1
+      }
+
     }, function (reason) {
       $log.error('Failed: ' + reason);
       toastFactory.showSimpleToast("No connectivity. Could not get topic names");
@@ -47,6 +68,8 @@ angularAPP.controller('KafkaTopicsListCtrl', function ($scope, $rootScope, $loca
     return KafkaRestProxyFactory.isNormalTopic(topicName);
   };
 
+  $scope.displayingControlTopics = $scope.isNormalTopic;
+
   $scope.hasExtraConfig = function (topicName) {
     return KafkaRestProxyFactory.hasExtraConfig(topicName);
   };
@@ -60,7 +83,12 @@ angularAPP.controller('KafkaTopicsListCtrl', function ($scope, $rootScope, $loca
   }
 
   $scope.listClick = function (topicName) {
-    $location.url("topic/" + topicName);
+    if (KafkaRestProxyFactory.isNormalTopic(topicName) == false) {
+      $scope.CategoryTopicUrls = 'c';
+    } else {
+      $scope.CategoryTopicUrls = 'n';
+    }
+    $location.path("topic/" +  $scope.CategoryTopicUrls + "/" + topicName);
   }
 
   function doCountsForTopic(topicName) {

src/kafka-topics/list/topics-list.html

@@ -13,9 +13,10 @@
     <!--Topics List-->
     <div flex>
       <md-list class="md-dense" flex>
-        <md-list-item dir-paginate="topic in topics| orderBy:'topic' | filter : search | itemsPerPage: 7"
+        <md-list-item dir-paginate="topic in topics| orderBy:'topic' | filter : search | itemsPerPage:topicsPerPage"
                       pagination-id="topics"
                       ng-click="listClick(topic)" class="md-2-line"
+                      current-page="normalTopicPage"
                       ng-class="{ 'selectedListItem': topic == topicName }">
 
           <div ng-show="hasExtraConfig(topic) != ''">
@@ -39,8 +40,8 @@ <h4>{{topic}}</h4>
     </div>
 
     <!--Pagination-->
-    <div flex>
-      <dir-pagination-controls pagination-id="topics" style="margin:0;"></dir-pagination-controls>
+    <div flex class="leftlistPagination">
+      <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" pagination-id="topics" style="margin:0;"></dir-pagination-controls>
     </div>
 
     <!--Notes-->

src/kafka-topics/view/templates/flat_table.html

@@ -1,6 +1,4 @@
 <!-- Custom rendering for OTHER topics -->
-<md-tab  ng-if="topicType != 'binary'">
-    <md-tab-label>Table</md-tab-label>
     <md-tab-body>
         <md-content class="padding:0">
                 <table class="flat-table">
@@ -10,29 +8,28 @@
                         <th rowspan="2" class="td-center">partition</th>
                         <th ng-if="cols3.length==0" rowspan="2" class="td-center" colspan="{{extraColsNumKeys}}" >key</th>
                         <th ng-if="cols3.length > 0" class="td-center" colspan="{{extraColsNumKeys}}" >key</th>
-                        <th colspan="{{extraColsNumValues}}" style="background-color: #85bddd">value</th>
+                        <th colspan="{{extraColsNumValues}}" >value</th>
                     </tr>
                     <tr>
                         <th ng-repeat="c3 in cols3" class="td-left">{{c3}}</th>
-                        <th ng-repeat="c in cols2" class="td-left" style="background-color: #85bddd">{{c}}</th>
+                        <th ng-repeat="c in cols2" class="td-left" >{{c}}</th>
                     </tr>
                     <tr style="display:none;">
                         <th ng-repeat="column in cols">{{column}}</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr dir-paginate="row in flatRows | filter : searchMessages| itemsPerPage: paginationItems"  pagination-id="flatView">
-                        <td nowrap ng-repeat="column in cols" class="{{ column.indexOf('value') == 0 ? 'blue' : 'td-center' }}">
+                        <td nowrap ng-repeat="column in cols" class="{{ column.indexOf('value') == 0 ? '' : 'td-center' }}">
                             <span>{{row[column]}}</span>
                         </td>
                     </tr>
                     </tbody>
                 </table>
 
                 <div flex>
-                    <dir-pagination-controls pagination-id="treeView" style="margin:0;"></dir-pagination-controls>
+                    <dir-pagination-controls pagination-id="flatView" style="margin:0;"></dir-pagination-controls>
                 </div>
 
         </md-content>
-    </md-tab-body>
-</md-tab>
+    </md-tab-body>

src/kafka-topics/view/templates/normal.html

@@ -1,8 +1,7 @@
 <!-- Custom rendering for OTHER topics -->
-<md-tab  ng-if="topicType != 'binary'">
-  <md-tab-label>Topic</md-tab-label>
+
   <md-tab-body>
-    <md-content class="padding:0">
+    <md-content class="normalcontent">
         <table>
           <thead>
           <tr>
@@ -31,9 +30,8 @@
         </table>
 
         <div flex>
-          <dir-pagination-controls pagination-id="treeView" style="margin:0px"></dir-pagination-controls>
+          <dir-pagination-controls pagination-id="treeView"></dir-pagination-controls>
         </div>
 
     </md-content>
   </md-tab-body>
-</md-tab>

src/kafka-topics/view/templates/raw_data.html

@@ -1,5 +1,4 @@
 <!-- RAW DATA in JSon rendering -->
-<md-tab md-on-select="onTabSelected(1)" label="Raw Data">
   <div id="left"
        ng-model="aceString" ng-readonly="true" ui-ace="{
                           useWrapMode: true,
@@ -11,4 +10,3 @@
                           onChange: aceChanged,
                           showPrintMargin:false
                           }"></div>
-</md-tab>

src/kafka-topics/view/templates/withConfiguration.html

@@ -1,49 +1,45 @@
 <!-- Custom rendering for Config overrides -->
-<md-tab ng-if="hasExtraConfig(topicName) != ''">
-  <md-tab-label>
-    <i aria-hidden="true"></i> Configuration
-  </md-tab-label>
   <md-tab-body>
     <md-content class="md-padding">
-      <md-card>
-        <md-card-content style="padding:0">
-          <md-menu ng-show="apps">
-            <md-button aria-label="menu" class="md-fab md-mini light-blue" ng-click="$mdOpenMenu($event)">
-              <i class="fa fa-bars" style="padding-right:10px;" aria-hidden="true"></i>
-            </md-button>
-            <md-menu-content width="5">
-            </md-menu-content>
-          </md-menu>
-        </md-card-content>
+        <table class="flat-table"  ng-if ="hasExtraConfig(topicName) != ''">
+          <thead>
+          <tr>
+            <th class="td-center">Comfiguration</th>
+            <th  class="td-center">Value</th>
+            <th  class="td-center">Default Value</th>
+            <th  class="td-center">Description</th>
+          </tr>
+          </thead>
+          <tbody>
 
-      </md-card>
-
-      <div ng-repeat="(key,value) in getExtraConfig(topicName) track by $index">
-        <span
-          style="box-shadow: rgba(0, 0, 0, 0.458824) 0px 0px 0px 0px;font-weight: 600;text-transform: none;color: white;float: left;padding: 8px; border: 2px solid;border-radius: 15px;background-color: rgba(255, 0, 0, 0.6);">
-      {{key}}
-        </span>
-        <span style="color:black;font-weight: 600;float: left;padding: 8px; border: 2px solid white;border-radius: 15px;">
-          is
-        </span>
-        <span
-          style="font-weight: 600;color: #525252;;float: left;padding: 8px; border: 0px solid;border-radius: 15px;background-color: rgba(152, 206, 166, 0.6);">
-        {{value}}
-        </span>
-        <span style="color:black;font-weight: 600;float: left;padding: 8px; border: 2px solid white;border-radius: 15px;">
-          instead of
-        </span>
-        <p
-          style="background-color: rgba(185, 185, 185, 0.6);font-weight: 600;color: #525252;float: left;padding: 8px; border: 0px solid;border-radius: 15px;">
-        {{getDefautConfigValue(key)}}
-        </p>
-        <br>
-        <br>
-        <p style="font-weight: 500; padding: 15px;">
-        {{getConfigDescription(key)}}
-          </p>
-      </div>
+          <tr ng-repeat="(key,value) in getExtraConfig(topicName) track by $index">
+            <td  class="td-center">
+              <span>{{key}}</span>
+            </td>
+            <td  class="td-center">
+              <span>{{value}}</span>
+            </td>
+            <td  class="td-center">
+              <span>{{getDefautConfigValue(key)}}</span>
+            </td>
+            <td style="max-width:500px;" ng-title="{{getConfigDescription(key)}}" class=" td-left">
+              <span ng-hide="showMoreDesc">{{ getConfigDescription(key) | limitTo:100 }}...</span>
+              <span ng-show="showMoreDesc">{{ getConfigDescription(key)}}</span>
 
+              <span class="toggleconfig" ng-click="ToggleMoreDesc()">
+                <span ng-show="showMoreDesc" aria-hidden="true">Show Less</span>
+                <span ng-hide="showMoreDesc" aria-hidden="true">Show More</span>
+                </span>
+            </td>
+          </tr>
+          </tbody>
+          </table>
+        <div class="container-fluid-centered ng-scope" ng-if ="hasExtraConfig(topicName) == ''" style="height: 352px;">
+            <div class="row-fluid">
+                <div class="centering text-center">
+                  This topic retains the default configuration
+                </div>
+            </div>
+        </div>
     </md-content>
   </md-tab-body>
-</md-tab>