[Ballista] Add executor last seen info to the ui (#895)

Author: msathis

ballista/rust/scheduler/src/api/handlers.rs

@@ -11,27 +11,40 @@
 // limitations under the License.
 
 use crate::SchedulerServer;
-use ballista_core::{serde::scheduler::ExecutorMeta, BALLISTA_VERSION};
+use ballista_core::BALLISTA_VERSION;
 use warp::Rejection;
 
 #[derive(Debug, serde::Serialize)]
 struct StateResponse {
-    executors: Vec<ExecutorMeta>,
+    executors: Vec<ExecutorMetaResponse>,
     started: u128,
     version: &'static str,
 }
 
+#[derive(Debug, serde::Serialize)]
+pub struct ExecutorMetaResponse {
+    pub id: String,
+    pub host: String,
+    pub port: u16,
+    pub last_seen: u128,
+}
+
 pub(crate) async fn scheduler_state(
     data_server: SchedulerServer,
 ) -> Result<impl warp::Reply, Rejection> {
     // TODO: Display last seen information in UI
-    let executors: Vec<ExecutorMeta> = data_server
+    let executors: Vec<ExecutorMetaResponse> = data_server
         .state
         .get_executors_metadata()
         .await
         .unwrap_or_default()
         .into_iter()
-        .map(|(metadata, _duration)| metadata)
+        .map(|(metadata, duration)| ExecutorMetaResponse {
+            id: metadata.id,
+            host: metadata.host,
+            port: metadata.port,
+            last_seen: duration.as_millis(),
+        })
         .collect();
     let response = StateResponse {
         executors,

ballista/ui/scheduler/src/components/DataTable.tsx

@@ -60,6 +60,25 @@ interface DataTableProps {
   maxW?: number;
   pb?: number;
 }
+
+export const ElapsedCell: (props: any) => React.ReactNode = (props: any) => {
+  const time = new Date(new Date().getTime() - props.value);
+  return (
+    <TimeAgo
+      date={time}
+      formatter={(
+        value: number,
+        unit: TimeAgo.Unit,
+        suffix: TimeAgo.Suffix
+      ) => {
+        if (unit === "second") return "just now";
+        const plural: string = value !== 1 ? "s" : "";
+        return `${value} ${unit}${plural} ${suffix}`;
+      }}
+    />
+  );
+};
+
 export const DateCell: (props: any) => React.ReactNode = (props: any) => {
   return (
     <TimeAgo

ballista/ui/scheduler/src/components/NodesList.tsx

@@ -17,7 +17,7 @@
 
 import React from "react";
 import { Box } from "@chakra-ui/react";
-import { Column, DateCell, DataTable } from "./DataTable";
+import { Column, ElapsedCell, DataTable } from "./DataTable";
 
 export enum NodeStatus {
   RUNNING = "RUNNING",
@@ -50,9 +50,9 @@ const columns: Column<any>[] = [
     accessor: "status",
   },
   {
-    Header: "Started",
-    accessor: "started",
-    Cell: DateCell,
+    Header: "Last Seen",
+    accessor: "last_seen",
+    Cell: ElapsedCell,
   },
 ];