diff --git a/webui/src/components/OperationTree.tsx b/webui/src/components/OperationTree.tsx index df266cb0..b037ccc3 100644 --- a/webui/src/components/OperationTree.tsx +++ b/webui/src/components/OperationTree.tsx @@ -42,7 +42,7 @@ export const OperationTree = ({ isPlanView?: boolean; }>) => { const alertApi = useAlertApi(); - const showModal = useShowModal(); + const setScreenWidth = useState(window.innerWidth)[1]; const [backups, setBackups] = useState([]); const [treeData, setTreeData] = useState<{ tree: OpTreeNode[]; @@ -50,6 +50,17 @@ export const OperationTree = ({ }>({ tree: [], expanded: [] }); const [selectedBackupId, setSelectedBackupId] = useState(null); + // track the screen width so we can switch between mobile and desktop layouts. + useEffect(() => { + const handleResize = () => { + setScreenWidth(window.innerWidth); + }; + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + // track backups for this operation tree view. useEffect(() => { setSelectedBackupId(null); @@ -65,7 +76,7 @@ export const OperationTree = ({ setBackups(flows); }, 100, - { leading: true, trailing: true } + { leading: true, trailing: true }, ); logState.subscribe((ids, flowIDs, event) => { @@ -75,7 +86,7 @@ export const OperationTree = ({ ) { for (const flowID of flowIDs) { const displayInfo = displayInfoForFlow( - logState.getByFlowID(flowID) || [] + logState.getByFlowID(flowID) || [], ); if (!displayInfo.hidden) { backupInfoByFlowID.set(flowID, displayInfo); @@ -117,20 +128,6 @@ export const OperationTree = ({ return; } setSelectedBackupId(backup!.flowID); - - if (useMobileLayout) { - showModal( - { - showModal(null); - }} - > - - - ); - } }} titleRender={(node: OpTreeNode): React.ReactNode => { if (node.title !== undefined) { @@ -158,7 +155,22 @@ export const OperationTree = ({ ); if (useMobileLayout) { - return backupTree; + const backup = backups.find((b) => b.flowID === selectedBackupId); + return ( + <> + { + setSelectedBackupId(null); + }} + width="60vw" + > + + + ,{backupTree} + + ); } return ( @@ -180,7 +192,7 @@ export const OperationTree = ({ const treeLeafCache = new WeakMap(); const buildTree = ( operations: FlowDisplayInfo[], - isForPlanView: boolean + isForPlanView: boolean, ): { tree: OpTreeNode[]; expanded: React.Key[] } => { const buildTreeInstanceID = (operations: FlowDisplayInfo[]): OpTreeNode[] => { const grouped = _.groupBy(operations, (op) => { @@ -238,7 +250,7 @@ const buildTree = ( const buildTreeDay = ( keyPrefix: string, - operations: FlowDisplayInfo[] + operations: FlowDisplayInfo[], ): OpTreeNode[] => { const grouped = _.groupBy(operations, (op) => { return localISOTime(op.displayTime).substring(0, 10); @@ -291,13 +303,13 @@ const buildTree = ( entries: OpTreeNode[], budget: number, d1: number, - d2: number + d2: number, ) => { let expanded: React.Key[] = []; const h2 = ( entries: OpTreeNode[], curDepth: number, - budget: number + budget: number, ): number => { if (curDepth >= d2) { for (const entry of entries) { @@ -443,7 +455,7 @@ const BackupView = ({ backup }: { backup?: FlowDisplayInfo }) => { planId: backup.planID!, repoId: backup.repoID!, snapshotId: backup.snapshotID!, - }) + }), ); alertApi!.success("Snapshot forgotten."); } catch (e) { @@ -472,7 +484,7 @@ const BackupView = ({ backup }: { backup?: FlowDisplayInfo }) => { selector: new OpSelector({ ids: backup.operations.map((op) => op.id), }), - }) + }), ); }} >