fix status flickering when sql has sub queries

spark-ui/src/reducers/SqlReducer.ts

@@ -9,23 +9,23 @@ import {
   ParsedNodePlan,
   SparkSQLStore,
 } from "../interfaces/AppStore";
+import { SQLNodePlan, SQLPlan, SQLPlans } from "../interfaces/SQLPlan";
 import { SparkSQL, SparkSQLs, SqlStatus } from "../interfaces/SparkSQLs";
 import { NodesMetrics } from "../interfaces/SqlMetrics";
-import { SQLNodePlan, SQLPlan, SQLPlans } from "../interfaces/SQLPlan";
 import {
-  timeStringToMilliseconds,
   timeStrToEpocTime,
+  timeStringToMilliseconds,
 } from "../utils/FormatUtils";
 import { parseCollectLimit } from "./PlanParsers/CollectLimitParser";
 import { parseExchange } from "./PlanParsers/ExchangeParser";
 import { parseFilter } from "./PlanParsers/FilterParser";
-import { parseHashAggregate } from "./PlanParsers/hashAggregateParser";
 import { parseJoin } from "./PlanParsers/JoinParser";
 import { parseProject } from "./PlanParsers/ProjectParser";
 import { parseFileScan } from "./PlanParsers/ScanFileParser";
 import { parseSort } from "./PlanParsers/SortParser";
 import { parseTakeOrderedAndProject } from "./PlanParsers/TakeOrderedAndProjectParser";
 import { parseWriteToHDFS } from "./PlanParsers/WriteToHDFSParser";
+import { parseHashAggregate } from "./PlanParsers/hashAggregateParser";
 import {
   calcNodeMetrics,
   calcNodeType,
@@ -412,7 +412,9 @@ export function updateSqlNodeMetrics(
     codegenNodes: codegenNodes,
     metricUpdateId: uuidv4(),
   };
-  return { ...currentStore, sqls: [...notEffectedSqls, updatedSql] };
+  const notEffectedSqlsBefore = currentStore.sqls.filter((sql) => sql.id < sqlId);
+  const notEffectedSqlsAfter = currentStore.sqls.filter((sql) => sql.id > sqlId);
+  return { ...currentStore, sqls: [...notEffectedSqlsBefore, updatedSql, ...notEffectedSqlsAfter] };
 }
 function calcCodegenDuration(metrics: EnrichedSqlMetric[]): number | undefined {
   return getMetricDuration("duration", metrics);

spark-ui/src/services/SparkApi.tsx

@@ -244,7 +244,7 @@ class SparkAPI {
           .filter((sql) => sql.status === SqlStatus.Running)
           .map((sql) => sql.id);
         if (runningSqlIds.length !== 0) {
-          const sqlId = runningSqlIds[0];
+          const sqlId = runningSqlIds.slice(-1)[0];
           const nodesMetrics: NodesMetrics = await this.queryData(
             this.getSqlMetricsPath(sqlId),
           );

spark-ui/src/tabs/StatusTab.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import { useAppSelector } from "../Hooks";
 import NoQuery from "../components/NoQuery/NoQuery";
 import SqlContainer from "../components/SqlContainer";
 import StatusBar from "../components/StatusBar";
-import { useAppSelector } from "../Hooks";
 import { MixpanelService } from "../services/MixpanelService";
 
 export default function StatusTab() {
@@ -41,7 +41,7 @@ export default function StatusTab() {
               margin: "2px 0 5px 0",
             }}
           >
-            {sql.sqls[sql.sqls.length - 1].description}
+            {sql.sqls.slice(-1)[0].description}
           </div>
           <SqlContainer />
         </div>