diff --git a/apps/ui/web/src/App.tsx b/apps/ui/web/src/App.tsx index 50eaef7c..9e748cb9 100644 --- a/apps/ui/web/src/App.tsx +++ b/apps/ui/web/src/App.tsx @@ -20,7 +20,6 @@ import FolderIcon from '@mui/icons-material/Folder'; import QueueIcon from '@mui/icons-material/Queue'; import AppsIcon from '@mui/icons-material/Apps'; import ConstructionIcon from '@mui/icons-material/Construction'; -import ProcesserTasksPage from './app/page/ProcesserTasksPage'; import DashboardIcon from '@mui/icons-material/Dashboard'; import GraphicEqIcon from '@mui/icons-material/GraphicEq'; import HomeRepairServiceIcon from '@mui/icons-material/HomeRepairService'; @@ -110,7 +109,6 @@ function App() { }}> - } /> } /> } /> } /> diff --git a/apps/ui/web/src/app/features/table/expandableTable.tsx b/apps/ui/web/src/app/features/table/expandableTable.tsx index 6d0bbf91..4010a18f 100644 --- a/apps/ui/web/src/app/features/table/expandableTable.tsx +++ b/apps/ui/web/src/app/features/table/expandableTable.tsx @@ -1,37 +1,28 @@ import { Box, TableContainer, Table, TableHead, TableRow, TableCell, Typography, TableBody, useTheme } from "@mui/material"; import { useState, useEffect, useMemo } from "react"; -import { TablePropetyConfig, TableCellCustomizer, TableRowActionEvents } from "./table"; +import { TablePropetyConfig, TableCellCustomizer, TableRowActionEvents, SortByAccessor, TableRowItem, DefaultTableContainer, ITableRow, SortBy, TableSorter } from "./table"; import IconArrowUp from '@mui/icons-material/ArrowUpward'; import IconArrowDown from '@mui/icons-material/ArrowDownward'; -export interface ExpandableItem { - tag: string; - expandElement: JSX.Element | null; -} -export type ExpandableRender = (item: T) => ExpandableItem | null; -export interface ExpandableTableItem { - rowId: string -} +export type ExpandableRender = (item: T) => JSX.Element | null; -export interface SortByAccessor { - accessor: string - order: 'asc' | 'desc' -} -export default function ExpandableTable({ items, columns, cellCustomizer: customizer, expandableRender, onRowClickedEvent, defaultSort}: { items: Array, columns: Array, cellCustomizer?: TableCellCustomizer, expandableRender: ExpandableRender, onRowClickedEvent?: TableRowActionEvents, defaultSort?: SortByAccessor }) { +export default function ExpandableTable, U>({ items, columns, cellCustomizer: customizer, expandableRender, onRowClickedEvent, defaultSort, sorter }: { items: Array, columns: Array, cellCustomizer?: TableCellCustomizer, expandableRender: ExpandableRender, onRowClickedEvent?: TableRowActionEvents, defaultSort?: SortByAccessor, sorter?: TableSorter }) { const muiTheme = useTheme(); - const [order, setOrder] = useState<'asc' | 'desc'>('asc'); - const [orderBy, setOrderBy] = useState(''); + const [order, setOrder] = useState<'asc' | 'desc'>(defaultSort?.order ?? 'asc'); + const [orderBy, setOrderBy] = useState(defaultSort?.accessor ?? columns[0].accessor ?? ''); const [expandedRowIds, setExpandedRowIds] = useState>(new Set()); - const [selectedRow, setSelectedRow] = useState(null); + const [selectedRow, setSelectedRow] = useState(null); const [selectedRowId, setSelectedRowId] = useState(null); - const tableRowSingleClicked = (row: T | null) => { + const tableRowSingleClicked = (row: R | null) => { + console.log("tableRowSingleClicked", row) if (row != null && 'rowId' in row) { setExpandedRowIds(prev => { const newExpandedRows = new Set(prev); + console.log("newExpandedRows", newExpandedRows) if (newExpandedRows.has(row.rowId)) { newExpandedRows.delete(row.rowId); } else { @@ -53,27 +44,23 @@ export default function ExpandableTable({ items, } } - const tableRowDoubleClicked = (row: T | null) => { + const tableRowDoubleClicked = (row: R | null) => { setSelectedRow(row); if (row && onRowClickedEvent) { onRowClickedEvent.doubleClick(row); } } - const tableRowContextMenu = (e: React.MouseEvent , row: T | null) => { + const tableRowContextMenu = (e: React.MouseEvent , row: R | null) => { if (row && onRowClickedEvent && onRowClickedEvent.contextMenu) { e.preventDefault() onRowClickedEvent.contextMenu(row, e.pageX, e.pageY) } } - const handleSort = (property: string) => { - const isAsc = orderBy === property && order === 'asc'; - setOrder(isAsc ? 'desc' : 'asc'); - setOrderBy(property); - }; const compareValues = (a: any, b: any, orderBy: string) => { + console.log("compareValues", a, b, orderBy) if (typeof a[orderBy] === 'string') { return a[orderBy].localeCompare(b[orderBy]); } else if (typeof a[orderBy] === 'number') { @@ -84,22 +71,19 @@ export default function ExpandableTable({ items, const sortedData = useMemo(() => { - return items.slice().sort((a, b) => { - if (order === 'asc') { - return compareValues(a, b, orderBy); + return [...items].sort((a, b) => { + if (sorter) { + return sorter(a, b, order, orderBy); } else { - return compareValues(b, a, orderBy); + if (order === 'asc') { + return compareValues(a, b, orderBy); + } else { + return compareValues(b, a, orderBy); + } } - }); - }, [items, order, orderBy]); - - useEffect(() => { - handleSort(columns[0].accessor) - if (defaultSort) { - setOrder(defaultSort.order); - setOrderBy(defaultSort.accessor); } - }, [defaultSort]) + ); + }, [items, order, orderBy]); useEffect(() => { if (selectedRowId) { @@ -113,20 +97,17 @@ export default function ExpandableTable({ items, } }, [items, selectedRowId]); + + const handleSort = (property: string) => { + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); + setOrderBy(property); + console.log("handleSort", property, isAsc ? 'desc' : 'asc') + }; + return ( - - - + +
({ items, - {sortedData?.map((row: T, rowIndex: number) => [ + {sortedData?.map((row: R, rowIndex: number) => [ tableRowSingleClicked(row)} onDoubleClick={() => tableRowDoubleClicked(row)} @@ -172,7 +153,7 @@ export default function ExpandableTable({ items, ( { - expandableRender(row)?.expandElement + expandableRender(row) } ): null @@ -180,7 +161,6 @@ export default function ExpandableTable({ items, ])}
- - + ) } \ No newline at end of file diff --git a/apps/ui/web/src/app/features/table/sortableGroupedTable.tsx b/apps/ui/web/src/app/features/table/sortableGroupedTable.tsx index 297207bb..2630c5a5 100644 --- a/apps/ui/web/src/app/features/table/sortableGroupedTable.tsx +++ b/apps/ui/web/src/app/features/table/sortableGroupedTable.tsx @@ -4,18 +4,14 @@ import { RootState } from "../../store"; import IconArrowUp from '@mui/icons-material/ArrowUpward'; import IconArrowDown from '@mui/icons-material/ArrowDownward'; import { Table, TableHead, TableRow, TableCell, TableBody, Typography, Box, useTheme, TableContainer, IconButton } from "@mui/material"; -import { TablePropetyConfig, TableCellCustomizer, TableRowActionEvents } from "./table"; +import { TablePropetyConfig, TableCellCustomizer, TableRowActionEvents, TableRowGroupedItem, DefaultTableContainer } from "./table"; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; -export interface TableItemGroup { - title: string - items: Array -} -export default function SortableGroupedTable({ items, columns, customizer, onRowClickedEvent }: { items: Array>, columns: Array, customizer?: TableCellCustomizer, onRowClickedEvent?: TableRowActionEvents }) { +export default function SortableGroupedTable>({ items, columns, customizer, onRowClickedEvent }: { items: Array, columns: Array, customizer?: TableCellCustomizer, onRowClickedEvent?: TableRowActionEvents }) { const muiTheme = useTheme(); - + const [order, setOrder] = useState<'asc' | 'desc'>('asc'); const [orderBy, setOrderBy] = useState(''); const [selectedRow, setSelectedRow] = useState(null); @@ -45,7 +41,7 @@ export default function SortableGroupedTable({ items, columns, customizer, on } } - const tableRowContextMenu = (e: React.MouseEvent , row: T | null) => { + const tableRowContextMenu = (e: React.MouseEvent, row: T | null) => { if (row && onRowClickedEvent && onRowClickedEvent.contextMenu) { e.preventDefault() onRowClickedEvent.contextMenu(row, e.pageX, e.pageY) @@ -67,7 +63,11 @@ export default function SortableGroupedTable({ items, columns, customizer, on return 0; }; - const sortedData: Array> = items.map((item: TableItemGroup) => { + /*const sortedData: Array> = items.map((item: RowTableItem) => { + if (items.length === 0 || !item.items) { + console.log(item); + return item; // Return the item as is if there are no items to sort + } return { title: item.title, items: item.items.slice().sort((a, b) => { @@ -78,8 +78,20 @@ export default function SortableGroupedTable({ items, columns, customizer, on } }) } - }); + });*/ + const sortedData: Array> = items.map((item: TableRowGroupedItem) => { + return { + ...item, + items: item.items?.slice().sort((a, b) => { + if (order === 'asc') { + return compareValues(a, b, orderBy); + } else { + return compareValues(b, a, orderBy); + } + }) + } + }); useEffect(() => { @@ -88,86 +100,74 @@ export default function SortableGroupedTable({ items, columns, customizer, on return ( - - - - - - {columns.map((column) => ( - handleSort(column.accessor)} sx={{ cursor: "pointer" }}> - - {orderBy === column.accessor ? - (order === "asc" ? () : ()) : ( - - ) - } - {column.label} - - - ))} - - - - {sortedData.map((item, index) => ( - <> - +
+ + + {columns.map((column) => ( + handleSort(column.accessor)} sx={{ cursor: "pointer" }}> + + {orderBy === column.accessor ? + (order === "asc" ? () : ()) : ( + + ) + } + {column.label} + + + ))} + + + + {sortedData.map((item, index) => ( + <> + - - - toggleExpand(index)} sx={{ display: "flex", justifyContent: "space-between" }}> - {item.title} - toggleExpand(index)}> - {expandedRows.has(index) ? : } - - - + + + toggleExpand(index)} sx={{ display: "flex", justifyContent: "space-between" }}> + {item.title} + toggleExpand(index)}> + {expandedRows.has(index) ? : } + + + + + + + {item.items?.map((row: T, rowIndex: number) => ( + tableRowSingleClicked(row)} + onDoubleClick={() => tableRowDoubleClicked(row)} + onContextMenu={(e) => { + tableRowContextMenu(e, row); + tableRowSingleClicked(row); + }} + style={{ cursor: "pointer", backgroundColor: selectedRow === row ? muiTheme.palette.action.selected : '' }} + > + {columns.map((column) => ( + + {customizer && customizer(column.accessor, row) !== null + ? customizer(column.accessor, row) + : {(row as any)[column.accessor]}} + + ))} - - - {item.items?.map((row: T, rowIndex: number) => ( - tableRowSingleClicked(row)} - onDoubleClick={() => tableRowDoubleClicked(row)} - onContextMenu={(e) => { - tableRowContextMenu(e, row); - tableRowSingleClicked(row); - }} - style={{ cursor: "pointer", backgroundColor: selectedRow === row ? muiTheme.palette.action.selected : '' }} - > - {columns.map((column) => ( - - {customizer && customizer(column.accessor, row) !== null - ? customizer(column.accessor, row) - : {(row as any)[column.accessor]}} - - ))} - - ))} - - - ))} + ))} + + + ))} -
- - + + ) } \ No newline at end of file diff --git a/apps/ui/web/src/app/features/table/table.ts b/apps/ui/web/src/app/features/table/table.ts deleted file mode 100644 index 01ed24d5..00000000 --- a/apps/ui/web/src/app/features/table/table.ts +++ /dev/null @@ -1,17 +0,0 @@ - - -export interface TablePropetyConfig { - label: string - accessor: string -} - -export interface TableCellCustomizer { - (accessor: string, data: T): JSX.Element | null -} - -type NullableTableRowActionEvents = TableRowActionEvents | null; -export interface TableRowActionEvents { - click: (row: T) => void; - doubleClick: (row: T) => void; - contextMenu?: (row: T, x: number, y: number) => void; -} \ No newline at end of file diff --git a/apps/ui/web/src/app/features/types.ts b/apps/ui/web/src/app/features/types.ts index b2a68fbd..24d2551b 100644 --- a/apps/ui/web/src/app/features/types.ts +++ b/apps/ui/web/src/app/features/types.ts @@ -3,4 +3,4 @@ export interface CoordinatorOperationRequest { file: string; source: string; mode: "FLOW" | "MANUAL"; - } \ No newline at end of file +} \ No newline at end of file diff --git a/apps/ui/web/src/app/page/EventsChainPage.tsx b/apps/ui/web/src/app/page/EventsChainPage.tsx index 660ac7cb..48039b4e 100644 --- a/apps/ui/web/src/app/page/EventsChainPage.tsx +++ b/apps/ui/web/src/app/page/EventsChainPage.tsx @@ -9,10 +9,12 @@ import { Box, Button, Typography, useTheme } from "@mui/material"; import { Tree } from "react-d3-tree"; import { EventChain, EventGroup, EventGroups, set } from "../store/chained-events-slice"; import { toUnixTimestamp, UnixTimestamp } from "../features/UxTc"; -import { TableCellCustomizer, TablePropetyConfig } from "../features/table/table"; -import ExpandableTable, { ExpandableItem } from "../features/table/expandableTable"; +import { TableCellCustomizer, TablePropetyConfig, TableRowGroupedItem } from "../features/table/table"; +import ExpandableTable from "../features/table/expandableTable"; import { CustomNodeElementProps } from 'react-d3-tree'; +export type ExpandableItemRow = TableRowGroupedItem & EventGroup + interface RawNodeDatum { name: string; @@ -37,12 +39,8 @@ const transformEventChain = (eventChain: EventChain): RawNodeDatum => ({ }); // Transformasjonsfunksjon for EventGroups -const transformEventGroups = (group: EventGroup): RawNodeDatum[] => { - return group.events.map(transformEventChain); -} - -interface EventGroupToTreeView extends EventGroup { - underView: JSX.Element +const transformEventGroups = (group: ExpandableItemRow): RawNodeDatum[] => { + return group.items.map(transformEventChain); } export default function EventsChainPage() { @@ -51,12 +49,25 @@ export default function EventsChainPage() { const client = useStompClient(); const cursor = useSelector((state: RootState) => state.chained) const [useReferenceId, setUseReferenceId] = useState(null); - const [treeData, setTreeData] = useState(null); + const [tableItems, setTableItems] = useState>([]); useWsSubscription>("/topic/chained/all", (response) => { dispatch(set(response)) + console.log(response) }); + useEffect(() => { + const items = cursor.groups.map((group: EventGroup) => { + return { + rowId: group.referenceId, + title: group.fileName ?? group.referenceId, + items: group.events, + referenceId: group.referenceId, + } as ExpandableItemRow + }); + setTableItems(items); + console.log("tableItems", items) + }, [cursor]); useEffect(() => { client?.publish({ @@ -67,23 +78,10 @@ export default function EventsChainPage() { const onRefresh = () => { client?.publish({ "destination": "/app/chained/all", - "body": "Potato" }) } - useEffect(() => { - if (useReferenceId) { - const eventGroup = cursor.groups.find((group) => group.referenceId === useReferenceId); - if (eventGroup) { - const data = transformEventGroups(eventGroup); - console.log({ - "info": "Tree data", - "data": data - }) - setTreeData(data); - } - } - }, [useReferenceId, cursor]) + const createTableCell: TableCellCustomizer = (accessor, data) => { switch (accessor) { @@ -101,7 +99,7 @@ export default function EventsChainPage() { const columns: Array = [ { label: "ReferenceId", accessor: "referenceId" }, - { label: "File", accessor: "fileName" }, + { label: "File", accessor: "title" }, { label: "Created", accessor: "created" }, ]; @@ -144,27 +142,23 @@ export default function EventsChainPage() { ); } - function renderExpandableItem(item: EventGroup): ExpandableItem | null { - return { - tag: item.referenceId, - expandElement: (() => { - const data = transformEventGroups(item); - return ( - <> - {(data) ? ( -
- -
- ) : Tree data not available} - - ); - })() - }; + function renderExpandableItem(item: ExpandableItemRow): JSX.Element | null { + console.log(item); + const data = transformEventGroups(item); + return ( + <> + {(data) ? ( +
+ +
+ ) : Tree data not available} + + ); } @@ -185,7 +179,7 @@ export default function EventsChainPage() { position: "absolute", width: "100%" }}> - + diff --git a/apps/ui/web/src/app/page/EventsPage.tsx b/apps/ui/web/src/app/page/EventsPage.tsx index bd61205a..d63602c4 100644 --- a/apps/ui/web/src/app/page/EventsPage.tsx +++ b/apps/ui/web/src/app/page/EventsPage.tsx @@ -17,10 +17,10 @@ import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion'; import { client } from "stompjs"; import { useStompClient } from "react-stomp-hooks"; import { useDispatch, useSelector } from "react-redux"; -import { ContentEventState, ProcesserEventInfo, Status, update, updateEncodeProgress, WorkStatus } from "../store/work-slice"; -import ExpandableTable, { ExpandableItem } from "../features/table/expandableTable"; +import { ContentEventState, ContentEventStateItems, ProcesserEventInfo, Status, update, updateEncodeProgress, WorkStatus } from "../store/work-slice"; +import ExpandableTable from "../features/table/expandableTable"; import { RootState } from "../store"; -import { TableCellCustomizer, TablePropetyConfig } from "../features/table/table"; +import { KeybasedComparator, SortBy, TableCellCustomizer, TablePropetyConfig, TableRowItem } from "../features/table/table"; import SimpleTable from "../features/table/sortableTable"; import { UnixTimestamp } from "../features/UxTc"; import ProgressbarWithLabel from "../features/components/ProgressbarWithLabel"; @@ -169,12 +169,24 @@ const transformToSteps = (state: ContentEventState): RawNodeDatum => ({ ] }); +export type ExpandableItemRow = TableRowItem export default function EventsPage() { const client = useStompClient(); const dispatch = useDispatch(); - const events = useSelector((state: RootState) => state.work); + const events: ContentEventStateItems = useSelector((state: RootState) => state.work); + const [tableItems, setTableItems] = useState>([]); + useEffect(() => { + const items = events.items.map((event: ContentEventState) => { + return { + rowId: event.referenceId, + title: event.referenceId, + item: event + } as ExpandableItemRow + }); + setTableItems(items); + }, [events]); useWsSubscription>("/topic/tasks/all", (response) => { console.log(response) @@ -192,7 +204,7 @@ export default function EventsPage() { }) }, [client]); - const createCellTable: TableCellCustomizer = (accessor, data) => { + const createCellTable: TableCellCustomizer = (accessor, data) => { switch (accessor) { case "runners": { return (<> @@ -206,7 +218,7 @@ export default function EventsPage() { x: 24, y: 24 }} - data={transformToSteps(data)} + data={transformToSteps(data.item)} orientation="horizontal" separation={{ nonSiblings: 1, @@ -226,8 +238,8 @@ export default function EventsPage() { ) }; case "created": { - if (typeof data[accessor] === "number") { - return UnixTimestamp({ timestamp: data[accessor] }); + if (typeof data.item[accessor] === "number") { + return UnixTimestamp({ timestamp: data.item[accessor] }); } return null; } @@ -235,33 +247,36 @@ export default function EventsPage() { } }; - function renderExpandableItem(item: ContentEventState): ExpandableItem | null { - const progress = item.encodeWork?.progress?.progress ?? undefined; - const showProgressbar = [WorkStatus.Pending, WorkStatus.Started, WorkStatus.Working, WorkStatus.Completed].includes(item?.encodeWork?.status) + const sorter = (a: ExpandableItemRow, b: ExpandableItemRow, orderBy: SortBy, accessor: string) => { + if (orderBy === "asc") { + return KeybasedComparator(a.item, b.item, "created") + } else { + return KeybasedComparator(b.item, a.item, "created") + } + } - const processer = item.encodeWork // events.encodeWork[item.referenceId]; + function renderExpandableItem(item: ExpandableItemRow): JSX.Element | null { + const data = item.item; + const progress = data.encodeWork?.progress?.progress ?? undefined; + const showProgressbar = [WorkStatus.Pending, WorkStatus.Started, WorkStatus.Working, WorkStatus.Completed].includes(data?.encodeWork?.status) + + const processer = data.encodeWork // events.encodeWork[item.referenceId]; const showIndeterminate = processer?.status in [WorkStatus.Pending, WorkStatus.Started] || processer?.progress?.progress <= 0 console.log({ type: "info", processer: processer, showIndeterminate: showIndeterminate, showProgressbar: showProgressbar, - isWorking: item.encodeWork?.status == WorkStatus.Working + isWorking: data.encodeWork?.status == WorkStatus.Working }); - return { - tag: item.referenceId, - expandElement: (() => { - //const data = transformEventGroups(item); - return ( - <> - {item.encodeWork?.progress?.timeLeft} - {(showProgressbar) ? - : null - } - - ); - })() - }; + return ( + <> + {data.encodeWork?.progress?.timeLeft} + {(showProgressbar) ? + : null + } + + ); } const columns: Array = [ @@ -279,10 +294,10 @@ export default function EventsPage() { return ( <> - + }} sorter={sorter} /> ) } \ No newline at end of file diff --git a/apps/ui/web/src/app/page/ProcesserTasksPage.tsx b/apps/ui/web/src/app/page/ProcesserTasksPage.tsx deleted file mode 100644 index fdd381fb..00000000 --- a/apps/ui/web/src/app/page/ProcesserTasksPage.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { useStompClient } from "react-stomp-hooks"; -import { Box, Button, Grid, TextField, Typography, useTheme } from '@mui/material'; -import { ExplorerItem } from "../../types"; -import { ContextMenuItem } from "../features/ContextMenu"; -import { RootState } from "../store"; -import { useWsSubscription } from "../ws/subscriptions"; -import SimpleTable from "../features/table/sortableTable"; -import { TableCellCustomizer, TablePropetyConfig } from "../features/table/table"; -import MultiListSortedTable from "../features/table/multiListSortedTable"; -import { TableTaskGroup, Task, TaskGroup, update } from "../store/tasks-slice"; -import SortableGroupedTable from "../features/table/sortableGroupedTable"; -import { UnixTimestamp } from "../features/UxTc"; - -const columns: Array = [ - { label: "Name", accessor: "data.inputFile" }, - { label: "Task", accessor: "task" }, - { label: "Status", accessor: "status" }, - { label: "Created", accessor: "created" }, -]; - -const createTableCell: TableCellCustomizer = (accessor, data) => { - switch (accessor) { - case "created": { - if (typeof data[accessor] === "string") { - return UnixTimestamp({ timestamp: Date.parse(data[accessor]) }); - } - return null; - } - case "data.inputFile": { - const parts = data.data?.inputFile.split("/") ?? []; - return {parts[parts?.length - 1]} - } - default: - return null; - } - }; - - -export default function ProcesserTasksPage() { - const muiTheme = useTheme(); - const dispatch = useDispatch(); - const client = useStompClient(); - const taskGroups = useSelector((state: RootState) => state.tasks); - - useWsSubscription>("/topic/tasks/all", (response) => { - console.log(response) - dispatch(update(response)) - }); - - useWsSubscription("/topic/processer/encode/progress", (response) => { - console.log(response) - }); - - useEffect(() => { - client?.publish({ - destination: "/app/tasks/all" - }); - }, [client, dispatch]); - - return ( - <> - - - - Tasks - - - - - - - - - - - - - - ) -} \ No newline at end of file diff --git a/apps/ui/web/src/app/store/chained-events-slice.ts b/apps/ui/web/src/app/store/chained-events-slice.ts index 6320a5af..8a132a19 100644 --- a/apps/ui/web/src/app/store/chained-events-slice.ts +++ b/apps/ui/web/src/app/store/chained-events-slice.ts @@ -1,10 +1,9 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit" -import { ExpandableTableItem } from "../features/table/expandableTable"; -export interface EventGroup extends ExpandableTableItem { +export interface EventGroup { referenceId: string, created: number, - fileName: string|null, + fileName?: string, events: EventChain[] } diff --git a/apps/ui/web/src/app/store/tasks-slice.ts b/apps/ui/web/src/app/store/tasks-slice.ts index 2df36d11..84c91f4e 100644 --- a/apps/ui/web/src/app/store/tasks-slice.ts +++ b/apps/ui/web/src/app/store/tasks-slice.ts @@ -66,6 +66,7 @@ export interface TaskGroupList { } export interface TableTaskGroup extends TableItemGroup { + referenceId: string title: string items: Array } @@ -84,6 +85,7 @@ const tasksSlice = createSlice({ reducers: { update(state, action: PayloadAction>) { state.items = action.payload.map((value) => ({ + referenceId: value.referenceId, title: value.referenceId, items: value.tasks })) ?? [] diff --git a/apps/ui/web/src/app/store/work-slice.ts b/apps/ui/web/src/app/store/work-slice.ts index 4064b564..1df7a4d5 100644 --- a/apps/ui/web/src/app/store/work-slice.ts +++ b/apps/ui/web/src/app/store/work-slice.ts @@ -1,5 +1,4 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit" -import { ExpandableTableItem } from "../features/table/expandableTable" export enum WorkStatus { Pending = "Pending", @@ -38,7 +37,7 @@ export enum Status { -export interface ContentEventState extends ExpandableTableItem { +export interface ContentEventState { referenceId: string title: string encode: Status diff --git a/apps/ui/web/src/index.tsx b/apps/ui/web/src/index.tsx index 8952b503..1c332418 100644 --- a/apps/ui/web/src/index.tsx +++ b/apps/ui/web/src/index.tsx @@ -29,8 +29,8 @@ root.render( { if (str === "Opening Web Socket...") { + console.log("Connecting with Web Socket...") } - console.log(str); }} onUnhandledMessage={(val) => { console.log("Unhandled message", val)