89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
import { useDispatch, useSelector } from "react-redux";
|
|
import SimpleTable, { TableCellCustomizer, TablePropetyConfig } from "../features/table"
|
|
import { RootState } from "../store";
|
|
import { useEffect } from "react";
|
|
import { useStompClient } from "react-stomp-hooks";
|
|
import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
|
|
import IconRefresh from '@mui/icons-material/Refresh'
|
|
import IconCompleted from '@mui/icons-material/Check'
|
|
import IconWorking from '@mui/icons-material/Engineering';
|
|
|
|
const columns: Array<TablePropetyConfig> = [
|
|
{ label: "Title", accessor: "givenTitle" },
|
|
{ label: "Type", accessor: "determinedType" },
|
|
{ label: "Collection", accessor: "givenCollection" },
|
|
{ label: "Encoded", accessor: "eventEncoded" }
|
|
];
|
|
|
|
|
|
|
|
export default function LaunchPage() {
|
|
const dispatch = useDispatch();
|
|
const muiTheme = useTheme();
|
|
const client = useStompClient();
|
|
const simpleList = useSelector((state: RootState) => state.kafkaComposedFlat)
|
|
useEffect(() => {
|
|
if (simpleList.items.filter((item) => item.encodingTimeLeft !== null).length > 0) {
|
|
columns.push({
|
|
label: "Completion",
|
|
accessor: "encodingTimeLeft"
|
|
})
|
|
}
|
|
}, [simpleList, dispatch])
|
|
|
|
const onRefresh = () => {
|
|
client?.publish({
|
|
"destination": "/app/items",
|
|
"body": "Potato"
|
|
})
|
|
}
|
|
|
|
|
|
return (
|
|
<Box display="block">
|
|
<Box sx={{
|
|
height: 50,
|
|
width: "100%",
|
|
maxHeight: "100%",
|
|
overflow: "hidden",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
backgroundColor: muiTheme.palette.background.paper
|
|
}}>
|
|
<Box sx={{
|
|
display: "flex",
|
|
}}>
|
|
<Button
|
|
startIcon={ <IconRefresh /> }
|
|
onClick={onRefresh} sx={{
|
|
borderRadius: 5,
|
|
textTransform: 'none'
|
|
}}>Refresh</Button >
|
|
<Button
|
|
startIcon={ <IconCompleted /> }
|
|
onClick={onRefresh} sx={{
|
|
borderRadius: 5,
|
|
textTransform: 'none'
|
|
}}>Completed</Button >
|
|
<Button
|
|
startIcon={ <IconWorking /> }
|
|
onClick={onRefresh} sx={{
|
|
borderRadius: 5,
|
|
textTransform: 'none'
|
|
}}>Working</Button >
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{
|
|
display: "block",
|
|
height: "calc(100% - 120px)",
|
|
overflow: "hidden",
|
|
position: "absolute",
|
|
width: "100%"
|
|
}}>
|
|
<SimpleTable items={simpleList.items} columns={columns} />
|
|
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |