diff --git a/js/notebook/src/SparkUI.ts b/js/notebook/src/SparkUI.ts
index 972212f606..b4f3ed2cd5 100644
--- a/js/notebook/src/SparkUI.ts
+++ b/js/notebook/src/SparkUI.ts
@@ -45,7 +45,7 @@ class SparkUIView extends widgets.VBoxView {
public render() {
super.render();
- this.processConnectionWidget();
+ this.addSparkMetricsWidget();
this.updateLabels();
}
@@ -53,7 +53,7 @@ class SparkUIView extends widgets.VBoxView {
super.update();
this.connectToApi();
- this.processConnectionWidget();
+ this.addSparkMetricsWidget();
this.updateLabels();
}
@@ -84,17 +84,20 @@ class SparkUIView extends widgets.VBoxView {
}).outerWidth();
}
- private appendSparkStats(): void {
+ private createSparkMetricsWidget(): void {
if (this.sparkStats) {
+ this.el.querySelector('.bx-connection-status')
+ .insertAdjacentElement('afterend', this.sparkStats.node);
+
return;
}
this.sparkStats = new Widget();
this.sparkStats.node.classList.add('bx-stats');
this.sparkStats.node.innerHTML = `
-
0
0
0
+ 0
0
0
`;
this.connectionLabelActive = this.sparkStats.node.querySelector('.active');
@@ -130,35 +133,54 @@ class SparkUIView extends widgets.VBoxView {
const sparkUrl = `${api.getApiUrl('sparkmetrics/executors')}/${this.sparkAppId}`;
const getMetrict = async () => {
try {
- const response = await fetch(sparkUrl);
+ const response = await fetch(sparkUrl, { method: 'GET', credentials: 'include' });
if (!response.ok) {
- console.log(response);
-
- return;
+ return this.clearApiCallInterval();
}
const data = await response.json();
this.updateMetrics(data);
- } catch(e) {
- clearInterval(this.apiCallIntervalId)
+ } catch(error) {
+ this.clearApiCallInterval();
}
};
+ this.clearApiCallInterval();
this.apiCallIntervalId = setInterval(getMetrict, 1000);
}
- private updateMetrics(data: object) {
- console.log(data);
+ private clearApiCallInterval() {
+ clearInterval(this.apiCallIntervalId);
+ this.sparkAppId = null;
+ }
+
+ private updateMetrics(data: Array) {
+ let activeTasks: number = 0;
+ let deadExecutors: number = 0;
+ let storageMemory: number = 0;
+
+ data.forEach(execData => {
+ if (execData.isActive) {
+ activeTasks += execData.activeTasks;
+ storageMemory += execData.memoryUsed;
+ } else {
+ deadExecutors += 1;
+ }
+ });
+
+ this.connectionLabelActive.innerText = `${activeTasks}`;
+ this.connectionLabelMemory.innerText = `${storageMemory}`;
+ this.connectionLabelDead.innerText = `${deadExecutors}`;
}
- private processConnectionWidget() {
+ private addSparkMetricsWidget() {
this.children_views.update(this.model.get('children')).then((views) => {
views.forEach((view) => {
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();
+ this.createSparkMetricsWidget();
}
});
});
diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
index ad99c6fd40..27a228a6f2 100644
--- a/js/notebook/src/shared/style/spark.scss
+++ b/js/notebook/src/shared/style/spark.scss
@@ -55,7 +55,7 @@
.bx-status-panel {
.bx-button {
- margin-left: 10px;
+ margin-left: 20px;
}
}