Different header background color for each cluster, show version at footer

jglambed · jglambed · commit 7d2b4cfb4302 · 2016-12-02T22:26:42.000+02:00
diff --git a/README.md b/README.md
@@ -58,6 +58,8 @@ var clusters = [
 
 ```
 With the use of KAFKA_TOPICS_UI you will be able to navigate to your selected connector topics.
+With the use of COLOR you can set different colors for each cluster.
+
 
 ### Supported Connectors
 For our [DM connectors](http://www.landoop.com/capabilities/kafka-connectors/)  we have a template of metadata within the `supported-connectors.js`. In any case you will be shown all the existing connectors in your classpath with all the required fields to set them up.
diff --git a/env.js b/env.js
@@ -4,7 +4,8 @@ var clusters = [
      NAME:"prod",
      KAFKA_CONNECT: "http://kafka-connect.prod.url",
      KAFKA_TOPICS_UI: "http://kafka-topics-ui.url",
-     KAFKA_TOPICS_UI_ENABLED: true
+     KAFKA_TOPICS_UI_ENABLED: true ,
+     COLOR: "#141414"
    },
    {
      NAME:"dev",
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
 
 <body ng-app="angularAPP" ngCloak>
 <md-progress-linear md-mode="indeterminate" ng-show="loading || rebalancing"></md-progress-linear>
-<header class="header" ng-controller="HeaderCtrl" >
+<header class="header" ng-controller="HeaderCtrl" style="background-color:{{color}}">
   <div layout="row" layout-xs="column">
     <div flex>
       <h5><a href="{{cluster ? '#/cluster/'+cluster.NAME : '#/'}}">KAFKA CONNECT</a></h5>
@@ -53,7 +53,9 @@ <h3 style="font-weight:300; color:red"><i class="fa fa-exclamation-triangle" ari
      NAME:"prod", //Required
      KAFKA_CONNECT: "http://kafka-connect.url", //Required
      KAFKA_TOPICS_UI: "http://kafka-topics-ui.url", //Optional
-     KAFKA_TOPICS_UI_ENABLED: true //Optional
+     KAFKA_TOPICS_UI_ENABLED: true, //Optional
+     COLOR: "#141414" // Optional
+
    },
    {
      NAME:"dev",
diff --git a/src/app.js b/src/app.js
@@ -19,6 +19,8 @@ angularAPP.controller('HeaderCtrl', function ($rootScope, $scope, $location, env
   $scope.$on('$routeChangeSuccess', function() {
      $scope.connectRestArray = env.getClusters();
      $scope.cluster = env.getSelectedCluster();
+     $scope.color = $scope.cluster.COLOR;
+     console.log($scope.cluster)
   });
 
   $scope.updateEndPoint = function(cluster) {
diff --git a/src/kafka-connect/config/config.controller.js b/src/kafka-connect/config/config.controller.js
@@ -1,6 +1,11 @@
 angularAPP.controller('KafkaConnectConfigCtrl', function ($scope, $http, $log, env, constants) {
   $scope.$on('$routeChangeSuccess', function() {
+     $scope.showVersion = false;
      $scope.kafkaConnectURL = env.KAFKA_CONNECT();
+         $http.get(env.KAFKA_CONNECT()).then(function(response){
+            $scope.showVersion = true;
+            $scope.version =response.data.version;
+        })
   })
   $scope.connectivityError = constants.CONFIG_CONNECTIVITY_ERROR;
 });
diff --git a/src/kafka-connect/config/config.html b/src/kafka-connect/config/config.html
@@ -1,6 +1,7 @@
 <md-card ng-controller="KafkaConnectConfigCtrl" class="config">
   <md-content flex layout-padding>
       <b>Kafka Connect :</b> {{kafkaConnectURL}} <br>
+      <span ng-show="showVersion"> <b>Kafka Connect Version :</b> {{version}} <br></span>
       <span ng-show="connectionFailure" class="red">{{connectivityError}}</span><br>
   </md-content>
 </md-card>
