#7326 stylize connection status widget

js/notebook/src/SparkUI.ts

@@ -15,6 +15,8 @@
  */
 
 import * as $ from "jquery";
+import {Widget} from "@phosphor/widgets";
+import BeakerXApi from "./tree/Utils/BeakerXApi";
 
 const widgets = require('./widgets');
 
@@ -33,7 +35,10 @@ class SparkUIModel extends widgets.VBoxModel {
 }
 
 class SparkUIView extends widgets.VBoxView {
-  private connectionStatus: HTMLElement;
+  private sparkStats: Widget;
+  private connectionLabelActive: HTMLElement;
+  private connectionLabelMemory: HTMLElement;
+  private connectionLabelDead: HTMLElement;
 
   public render() {
     super.render();
@@ -76,14 +81,32 @@ class SparkUIView extends widgets.VBoxView {
     }).outerWidth();
   }
 
+  private appendSparkStats(): void {
+    this.sparkStats = new Widget();
+    this.sparkStats.node.classList.add('bx-stats');
+    this.sparkStats.node.innerHTML = `
+      <div class="active label label-info" title="Active">0</div> <div
+      class="memory label label-default" title="Storage memory">0</div> <div
+      class="dead label label-danger" title="Dead">0</div>
+    `;
+
+    this.connectionLabelActive = this.sparkStats.node.querySelector('.active');
+    this.connectionLabelMemory = this.sparkStats.node.querySelector('.memory');
+    this.connectionLabelDead = this.sparkStats.node.querySelector('.dead');
+
+    this.el.querySelector('.bx-connection-status').insertAdjacentElement('afterend', this.sparkStats.node);
+  }
+
   private processConnectionWidget() {
     this.children_views.update(this.model.get('children')).then((views) => {
       views.forEach((view) => {
-        if (view instanceof widgets.LabelView) {
-          this.connectionStatus = view.pWidget;
-          this.connectionStatus.el.classList.add('bx-spark-connectionProgressBar');
-          this.connectionStatus.el.classList.add('progress');
-        }
+        view.children_views.update(view.model.get('children')).then((views) => {
+          views.forEach((view) => {
+            if (view instanceof widgets.LabelView && view.el.classList.contains('bx-connection-status')) {
+              this.appendSparkStats();
+            }
+          });
+        });
       });
     });
   }

js/notebook/src/shared/style/beakerx.scss

@@ -14,15 +14,22 @@
  *  limitations under the License.
  */
 
+@import "./variables";
+$colorBorder: #cfcfcf;
 $focusColor: #66bb6a;
 
 .improveFonts .context-menu-root .context-menu-item span {
   font-family: "Lato", Helvetica, sans-serif;
 }
 
-.BeakerX-button {
+.bx-button {
   &[class*="icon"] {
     font: normal normal normal 14px/1 FontAwesome;
+    border: 1px solid $altoColor;
+    width: auto;
+    height: 24px;
+    padding: 0 6px;
+    margin: 2px 4px;
   }
 
   &:before {
@@ -35,7 +42,7 @@ $focusColor: #66bb6a;
 }
 
 .bko-focused {
-  border: 1px solid $focusColor !important;
+  border: 1px solid $fernColor !important;
 
   &:before {
     position: absolute;
@@ -45,7 +52,7 @@ $focusColor: #66bb6a;
     width: 5px;
     height: calc(100% + 2px);
     content: '';
-    background: $focusColor;
+    background: $fernColor;
   }
 }
 
@@ -158,7 +165,7 @@ $focusColor: #66bb6a;
     font-size: 14px;
     line-height: 1.3em;
     padding: 0 2.2em;
-    border: 1px solid #ababab;
+    border: 1px solid $silverChaliceColor;
     border-top: 0;
     border-radius: 0 0 3px 3px;
     text-overflow: ellipsis;

js/notebook/src/shared/style/spark.scss

@@ -14,9 +14,7 @@
  *  limitations under the License.
  */
 
-$colorSuccess: #4CAF50;
-$colorWhite: #ffffff;
-$colorBorder: #cfcfcf;
+@import "./variables";
 
 .foldout-preview {
   & > .bx-spark-stagePanel {
@@ -30,11 +28,12 @@ $colorBorder: #cfcfcf;
   max-width: 600px;
 }
 
-.bx-spark-connectionProgressBar,
+.bx-connection-status,
 .bx-spark-stageProgressBar {
   margin: 0 10px;
 }
 
+.bx-stats,
 .bx-spark-stageProgressLabels {
   display: block;
   line-height: 100%;
@@ -48,14 +47,31 @@ $colorBorder: #cfcfcf;
   }
 }
 
-.bx-spark-connectionProgressBar {
-  background-color: transparent;
-  border: 1px solid $colorBorder;
+.bx-stats {
+  margin: 4px 0;
   height: 20px;
-  margin: 6px;
-  line-height: 18px;
+  line-height: 17px;
+}
+
+.bx-status-panel {
+  .bx-button {
+    margin-left: 10px;
+  }
+}
+
+.bx-connection-status {
+  background-color: transparent;
+  border: 1px solid $altoColor;
+  height: 20px !important;
+  line-height: 20px !important;
+  padding: 0 1em;
+  border-radius: 3px;
+  margin: 4px 6px;
+  min-width: 160px;
 
   &.connected {
-    background-color: $colorSuccess;
+    border: none;
+    background-color: $fruitSaladColor;
+    color: $whiteColor;
   }
 }

js/notebook/src/shared/style/variables.scss

@@ -0,0 +1,5 @@
+$altoColor: #cfcfcf;
+$fernColor: #66bb6a;
+$fruitSaladColor: #4CAF50;
+$whiteColor: #ffffff;
+$silverChaliceColor: #ababab;

kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUIManager.java

@@ -21,9 +21,8 @@
 import com.twosigma.beakerx.kernel.KernelManager;
 import com.twosigma.beakerx.message.Message;
 import org.apache.spark.sql.SparkSession;
-import java.util.Arrays;
-import java.util.HashMap;
-import java.util.Map;
+
+import java.util.*;
 
 import static com.twosigma.beakerx.kernel.PlainCode.createSimpleEvaluationObject;
 
@@ -149,20 +148,22 @@ private HBox createStatusPanel() {
     Label appStatus = createAppStatus();
     Button disconnect = createDisconnectButton();
     HBox statusPanel = new HBox(Arrays.asList(uiLink(), appStatus, disconnect));
+    statusPanel.setDomClasses(new ArrayList<>(Arrays.asList("bx-status-panel")));
     sparkUI.add(statusPanel);
     return statusPanel;
   }
 
   private Label createAppStatus() {
     Label appStatus = new Label();
-    appStatus.setValue("Connected to " + this.sparkManager.getSparkConf().get("spark.master"));
+    appStatus.setDomClasses(new ArrayList<>(Arrays.asList("bx-connection-status", "connected")));
+    appStatus.setValue(this.sparkManager.getSparkConf().get("spark.master"));
     return appStatus;
   }
 
   private Button createDisconnectButton() {
     Button disconnect = new Button();
     disconnect.registerOnClick((content, message) -> getSparkSession().sparkContext().stop());
-    disconnect.setDescription("Disconnect");
+    disconnect.setDomClasses(new ArrayList<>(Arrays.asList("bx-button", "icon-close")));
     return disconnect;
   }
 

test/ipynb/groovy/DomClassesSupport.ipynb

@@ -16,7 +16,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "bt.domClasses = [\"BeakerX-button\", \"icon-close\"]"
+    "bt.domClasses = [\"bx-button\", \"icon-close\"]"
    ]
   }
  ],