diff --git a/src/App.tsx b/src/App.tsx index 8c37e9f..e32dd10 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,7 @@ type Theme = 'light' | 'dark' type TokenStatus = 'idle' | 'loading' | 'success' | 'error' type RegisterStatus = 'idle' | 'loading' | 'success' | 'error' type NodesStatus = 'idle' | 'loading' | 'success' | 'error' +type ClusterStatus = 'idle' | 'loading' | 'success' | 'error' type RegisterNodePayload = { node_name: string @@ -188,6 +189,14 @@ const deleteNodeInterface = async ( return response.json() as Promise } +const createCluster = async () => { + await new Promise((resolve) => { + window.setTimeout(resolve, 500) + }) + + return { status: 'success' } +} + function App() { const [isCollapsed, setIsCollapsed] = useState(false) const [activePage, setActivePage] = useState(getSavedPage) @@ -201,6 +210,8 @@ function App() { const [nodesStatus, setNodesStatus] = useState('idle') const [nodesError, setNodesError] = useState('') const [deletingNodeId, setDeletingNodeId] = useState(null) + const [clusterStatus, setClusterStatus] = useState('idle') + const [clusterError, setClusterError] = useState('') const nextTheme = theme === 'light' ? 'dark' : 'light' const loadNodeInterfaces = async () => { @@ -327,6 +338,26 @@ function App() { } } + const handleCreateClusterClick = async () => { + setClusterStatus('loading') + setClusterError('') + + try { + const clusterResponse = await createCluster() + + if (clusterResponse.status !== 'success') { + throw new Error('Failed to create cluster') + } + + setClusterStatus('success') + } catch (error) { + setClusterStatus('error') + setClusterError( + error instanceof Error ? error.message : 'Failed to create cluster', + ) + } + } + return (
-

Clusters

+
+

Clusters

+ +
+ + {clusterStatus === 'success' && ( +

Dummy API triggered.

+ )} + + {clusterStatus === 'error' && ( +

{clusterError}

+ )} )}