From f9dca5f34bcdbc984265787f681c7762639aef91 Mon Sep 17 00:00:00 2001
From: Anthony Grasso <anthony@thelastpickle.com>
Date: Tue, 22 Jan 2019 23:14:57 +1100
Subject: [PATCH] Update cluster list to include model with JMX credential
 information from server

---
 src/ui/app/jsx/cluster-list.jsx | 40 ++++++++++++++++++++++++++++++---
 src/ui/app/style.scss           | 20 +++++++++++++++++
 src/ui/webpack.config.js        |  2 +-
 3 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/ui/app/jsx/cluster-list.jsx b/src/ui/app/jsx/cluster-list.jsx
index b4e52d4e8..0988bfdbe 100644
--- a/src/ui/app/jsx/cluster-list.jsx
+++ b/src/ui/app/jsx/cluster-list.jsx
@@ -94,6 +94,8 @@ const Cluster = React.createClass({
     let repairProgress = "";
     let totalLoad = 0;
 
+    let jmxPasswordString = this.state.clusterStatus.jmx_password_is_set ? "*******" : "";
+
     if (this.state.clusterStatus.repair_runs) {
       runningRepairs = this.state.clusterStatus.repair_runs.reduce(function(previousValue, repairRun){
                               return previousValue + (repairRun.state === 'RUNNING' ? 1: 0);
@@ -104,7 +106,7 @@ const Cluster = React.createClass({
                                    style={progressStyle} 
                                    label={repairRun.keyspace_name}
                                    key={repairRun.id}/>
-      )
+      );
     }
     
     if(this.state.nodes_status != null) {
@@ -140,16 +142,48 @@ const Cluster = React.createClass({
       <div className="panel panel-default" style={clusterDisplayStyle}>
         <div className="panel-body">
           <div className="row">
-            <div className="col-lg-2"><a href={'repair.html?currentCluster=' + this.props.name}><h4>{this.props.name} <span className="badge">{humanFileSize(totalLoad,1024)}</span></h4></a><div>Running repairs: {runningRepairsBadge}<br/>{repairProgress}</div>
-              <button type="button" className="btn btn-xs btn-danger" onClick={this._onDelete}>Forget cluster</button>
+            <div className="col-lg-2">
+              <div className="row">
+                <div className="col-lg-8">
+                  <a href={'repair.html?currentCluster=' + this.props.name}><h4>{this.props.name}</h4></a>
+                </div>
+                <div className="col-lg-1">
+                  <button
+                    type="button"
+                    className="cluster-info-button btn btn-lg glyphicon glyphicon-info-sign"
+                    data-toggle="modal"
+                    data-target="#clusterInfoModal">
+                  </button>
+                </div>
+              </div>
+              <div className="font-bold">Total load: <span className="badge">{humanFileSize(totalLoad,1024)}</span></div>
+              <div className="font-bold">Running repairs: {runningRepairsBadge}</div>
+              <button type="button" className="forget-cluster-button btn btn-xs btn-danger" onClick={this._onDelete}>Forget cluster</button>
             </div>
             <div className="col-lg-10">
               <div className="row" style={rowDivStyle}>
                 {datacenters}
               </div>
+              <div className="repair-progress-bar">
+                {repairProgress}
+              </div>
             </div>
           </div>
         </div>
+
+        <!-- Cluster Information -->
+        <div className="modal fade" id="clusterInfoModal">
+          <Modal.Dialog>
+            <Modal.Header>
+              <Modal.Title><span className="text-center"><h2>{this.props.name} Information</h2></span></Modal.Title>
+              <button type="button" className="close" data-dismiss="modal">×</button>
+            </Modal.Header>
+            <Modal.Body>
+              <p><span className="font-bold">JMX username:</span> {this.state.clusterStatus.jmx_username}</p>
+              <p><span className="font-bold">JMX password:</span> {jmxPasswordString}</p>
+            </Modal.Body>
+          </Modal.Dialog>
+        </div>
       </div>
     );
   },
diff --git a/src/ui/app/style.scss b/src/ui/app/style.scss
index 656dc2897..4806d7764 100644
--- a/src/ui/app/style.scss
+++ b/src/ui/app/style.scss
@@ -145,6 +145,26 @@ td > button {
 	margin-right: .5em;
 }
 
+.font-bold {
+    font-weight: bold;
+}
+
+.cluster-info-button {
+    position: relative;
+    right: 30px;
+    top: -2px;
+}
+
+.forget-cluster-button {
+    position: relative;
+    top: 10px;
+}
+
+.repair-progress-bar {
+    position: relative;
+    top: 15px;
+}
+
 $font-size: 16px;
 $input-height: 2.5em; // at 16px, this an even 40px
 
diff --git a/src/ui/webpack.config.js b/src/ui/webpack.config.js
index ed987150e..b666eff8f 100644
--- a/src/ui/webpack.config.js
+++ b/src/ui/webpack.config.js
@@ -128,7 +128,7 @@ module.exports = {
       title: ' - Login',
       template: path.join(__dirname, 'app', 'html_template.ejs'),
       inject: 'head',
-      bbaseUrl: isDev ? '/' : '/webui/'
+      baseUrl: isDev ? '/' : '/webui/'
     }),
     new webpack.ProvidePlugin({
       $: "jquery",