Add workers pages to the Preview Web UI

core/trino-web-ui/src/main/resources/webapp-preview/src/App.tsx

@@ -32,6 +32,7 @@ import { routers } from './router.tsx'
 import { useConfigStore, Theme as ThemeStore } from './store'
 import { darkTheme, lightTheme } from './theme'
 import trinoLogo from './assets/trino.svg'
+import { WorkerStatus } from './components/WorkerStatus.tsx'
 
 const App = () => {
     const config = useConfigStore()
@@ -74,6 +75,7 @@ const Screen = () => {
                 {routers.flatMap((router) => {
                     return [<Route {...router.routeProps} key={router.itemKey} />]
                 })}
+                <Route path="/workers/:nodeId" element={<WorkerStatus />} />
                 <Route path="/" element={<Navigate to="/dashboard" />} />
                 <Route path="*" element={<NotFound />} key={'*'} />
             </Routes>

core/trino-web-ui/src/main/resources/webapp-preview/src/api/webapp/api.ts

@@ -27,6 +27,65 @@ export interface Stats {
     totalCpuTimeSecs: number
 }
 
+export interface Worker {
+    coordinator: boolean
+    nodeId: string
+    nodeIp: string
+    nodeVersion: string
+    state: string
+}
+
+export interface MemoryAllocationItem {
+    tag: string
+    allocation: number
+}
+
+export interface MemoryUsagePool {
+    freeBytes: number
+    maxBytes: number
+    reservedBytes: number
+    reservedRevocableBytes: number
+    queryMemoryAllocations: {
+        [key: string]: MemoryAllocationItem
+    }
+    queryMemoryReservations: {
+        [key: string]: number
+    }
+    queryMemoryRevocableReservations: {
+        [key: string]: number
+    }
+}
+
+export interface WorkerStatusInfo {
+    coordinator: boolean
+    environment: string
+    externalAddress: string
+    heapAvailable: number
+    heapUsed: number
+    internalAddress: string
+    memoryInfo: {
+        availableProcessors: number
+        pool: MemoryUsagePool
+    }
+    nodeId: string
+    nodeVersion: {
+        version: string
+    }
+    nonHeapUsed: number
+    processCpuLoad: number
+    processors: number
+    systemCpuLoad: number
+    uptime: string
+}
+
 export async function statsApi(): Promise<ApiResponse<Stats>> {
     return await api.get<Stats>('/ui/api/stats')
 }
+
+export async function workerApi(): Promise<ApiResponse<Worker[]>> {
+    return await api.get<Worker[]>('/ui/api/worker')
+}
+
+export async function workerStatusApi(nodeId: string): Promise<ApiResponse<WorkerStatusInfo>> {
+    return await api.get<WorkerStatusInfo>(`/ui/api/worker/${nodeId}/status`)
+}

core/trino-web-ui/src/main/resources/webapp-preview/src/components/Dashboard.tsx

@@ -157,7 +157,7 @@ export const Dashboard = () => {
                         <MetricCard title="Running Queries" values={clusterStats.runningQueries} />
                     </Grid>
                     <Grid size={{ xs: 12, sm: 12, md: 6, lg: 4 }}>
-                        <MetricCard title="Active Workers" values={clusterStats.activeWorkers} />
+                        <MetricCard title="Active Workers" values={clusterStats.activeWorkers} link="/workers" />
                     </Grid>
                     <Grid size={{ xs: 12, sm: 12, md: 6, lg: 4 }}>
                         <MetricCard title="Rows/sec" values={clusterStats.rowInputRate} numberFormatter={formatCount} />

core/trino-web-ui/src/main/resources/webapp-preview/src/components/MetricCard.tsx

@@ -11,28 +11,47 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Link as RouterLink } from 'react-router-dom'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
 import { Grid2 as Grid } from '@mui/material'
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart'
+import { styled } from '@mui/material/styles'
 
 interface IMetricCardProps {
     title: string
     values: number[]
     numberFormatter?: (n: number | null) => string
+    link?: string
 }
 
+const StyledLink = styled(RouterLink)(({ theme }) => ({
+    textDecoration: 'none',
+    color: theme.palette.info.main,
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+}))
+
 export const MetricCard = (props: IMetricCardProps) => {
-    const { title, values, numberFormatter } = props
+    const { title, values, numberFormatter, link } = props
     const lastValue = values[values.length - 1]
 
     return (
         <Card variant="outlined" sx={{ minWidth: 275 }}>
             <CardContent sx={{ flex: '1 0 auto' }}>
-                <Typography variant="h6" color="info" gutterBottom>
-                    {title}
-                </Typography>
+                {link ? (
+                    <StyledLink to={link}>
+                        <Typography variant="h6" gutterBottom>
+                            {title}
+                        </Typography>
+                    </StyledLink>
+                ) : (
+                    <Typography variant="h6" color="info" gutterBottom>
+                        {title}
+                    </Typography>
+                )}
                 <Grid container>
                     <Grid sx={{ display: 'flex', flexGrow: 1 }}>
                         <Grid