diff --git a/js/notebook/src/SparkUI.ts b/js/notebook/src/SparkUI.ts
index 1156cf0704..ef0169f2e2 100644
--- a/js/notebook/src/SparkUI.ts
+++ b/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 = `
+
0
0
0
+ `;
+
+ 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();
+ }
+ });
+ });
});
});
}
diff --git a/js/notebook/src/shared/style/beakerx.scss b/js/notebook/src/shared/style/beakerx.scss
index d8c83ab9ca..6cadaa4bcd 100644
--- a/js/notebook/src/shared/style/beakerx.scss
+++ b/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;
diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
index 95d91fa58e..ad99c6fd40 100644
--- a/js/notebook/src/shared/style/spark.scss
+++ b/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;
}
}
diff --git a/js/notebook/src/shared/style/variables.scss b/js/notebook/src/shared/style/variables.scss
new file mode 100644
index 0000000000..d8303a42ff
--- /dev/null
+++ b/js/notebook/src/shared/style/variables.scss
@@ -0,0 +1,5 @@
+$altoColor: #cfcfcf;
+$fernColor: #66bb6a;
+$fruitSaladColor: #4CAF50;
+$whiteColor: #ffffff;
+$silverChaliceColor: #ababab;
diff --git a/kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUIManager.java b/kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUIManager.java
index c2db0ee17b..168f512364 100644
--- a/kernel/sparkex/src/main/java/com/twosigma/beakerx/widget/SparkUIManager.java
+++ b/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;
}
diff --git a/test/ipynb/groovy/DomClassesSupport.ipynb b/test/ipynb/groovy/DomClassesSupport.ipynb
index 8989cc2946..cb453b0918 100644
--- a/test/ipynb/groovy/DomClassesSupport.ipynb
+++ b/test/ipynb/groovy/DomClassesSupport.ipynb
@@ -16,7 +16,7 @@
"metadata": {},
"outputs": [],
"source": [
- "bt.domClasses = [\"BeakerX-button\", \"icon-close\"]"
+ "bt.domClasses = [\"bx-button\", \"icon-close\"]"
]
}
],