Skip to content

Commit 0a49d07

Browse files
buberddsbuberdds
authored
Merge pull request #12 from oasisprotocol/mz/machineDetailsMock
Machine details view with mock data
2 parents c75cfe2 + cacd0f9 commit 0a49d07

File tree

6 files changed

+191
-56
lines changed

6 files changed

+191
-56
lines changed

‎src/components/Layout/Header.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
SheetTitle,
1414
SheetTrigger,
1515
} from '@oasisprotocol/ui-library/src/components/ui/sheet';
16-
import { cn } from '@oasisprotocol/ui-library/src/lib/utils';
1716
import { useIsMobile } from '@oasisprotocol/ui-library/src/hooks/use-mobile';
1817
import { NavbarLink } from '../NavbarLink';
1918

@@ -56,7 +55,7 @@ export const Header: FC = () => {
5655
</Button>
5756
</div>
5857
</SheetTrigger>
59-
<SheetContent side="top" className={cn('w-full')}>
58+
<SheetContent side="top" className="w-full">
6059
<SheetHeader>
6160
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
6261
<div className="flex items-start px-3 py-2.5">

‎src/pages/Dashboard/MachinesDetails/MachineDetailsRow.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { FC } from 'react';
2+
import { cn } from '@oasisprotocol/ui-library/src/lib/utils';
3+
4+
type MachineDetailsRowProps = {
5+
className?: string;
6+
label: string;
7+
children: React.ReactNode;
8+
};
9+
10+
export const MachineDetailsRow: FC<MachineDetailsRowProps> = ({
11+
className,
12+
label,
13+
children,
14+
}) => {
15+
return (
16+
<div
17+
className={cn(
18+
'grid grid-cols-1 md:grid-cols-[minmax(200px,auto)_1fr]',
19+
className
20+
)}
21+
>
22+
<span className="text-foreground text-sm">{label}</span>
23+
<span className="text-muted-foreground text-sm">{children}</span>
24+
</div>
25+
);
26+
};

‎src/pages/Dashboard/MachinesDetails/MachineRestart.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import type { FC } from 'react';
2+
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button';
3+
import {
4+
Dialog,
5+
DialogClose,
6+
DialogContent,
7+
DialogDescription,
8+
DialogFooter,
9+
DialogHeader,
10+
DialogTitle,
11+
DialogTrigger,
12+
} from '@oasisprotocol/ui-library/src/components/ui/dialog';
13+
import { RotateCcw } from 'lucide-react';
14+
15+
export const MachineRestart: FC = () => {
16+
return (
17+
<Dialog>
18+
<DialogTrigger>
19+
<Button variant="outline" className="w-full md:w-auto md:ml-8">
20+
<RotateCcw />
21+
Restart
22+
</Button>
23+
</DialogTrigger>
24+
<DialogContent className="sm:max-w-[425px]">
25+
<DialogHeader>
26+
<DialogTitle>Please confirm your action</DialogTitle>
27+
<DialogDescription>
28+
This action will restart the machine and your app will not be
29+
available during this process.
30+
</DialogDescription>
31+
</DialogHeader>
32+
<DialogFooter>
33+
<DialogClose>
34+
<Button variant="outline">Cancel</Button>
35+
</DialogClose>
36+
<Button
37+
variant="destructive"
38+
onClick={() => console.log('trigger stop action')}
39+
>
40+
Confirm
41+
</Button>
42+
</DialogFooter>
43+
</DialogContent>
44+
</Dialog>
45+
);
46+
};

‎src/pages/Dashboard/MachinesDetails/MachineStop.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import type { FC } from 'react';
2+
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button';
3+
import {
4+
Dialog,
5+
DialogClose,
6+
DialogContent,
7+
DialogDescription,
8+
DialogFooter,
9+
DialogHeader,
10+
DialogTitle,
11+
DialogTrigger,
12+
} from '@oasisprotocol/ui-library/src/components/ui/dialog';
13+
import { CircleStop } from 'lucide-react';
14+
15+
export const MachineStop: FC = () => {
16+
return (
17+
<Dialog>
18+
<DialogTrigger>
19+
<Button variant="outline" className="w-full md:w-auto md:mr-8">
20+
<CircleStop />
21+
Stop
22+
</Button>
23+
</DialogTrigger>
24+
<DialogContent className="sm:max-w-[425px]">
25+
<DialogHeader>
26+
<DialogTitle>Please confirm your action</DialogTitle>
27+
<DialogDescription>
28+
This action will stop the machine and your app will not longer use
29+
this provider.
30+
</DialogDescription>
31+
</DialogHeader>
32+
<DialogFooter>
33+
<DialogClose>
34+
<Button variant="outline">Cancel</Button>
35+
</DialogClose>
36+
<Button
37+
variant="destructive"
38+
onClick={() => console.log('trigger stop action')}
39+
>
40+
Confirm
41+
</Button>
42+
</DialogFooter>
43+
</DialogContent>
44+
</Dialog>
45+
);
46+
};

‎src/pages/Dashboard/MachinesDetails/index.tsx‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,76 @@
11
import type { FC } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button';
4+
import {
5+
Tabs,
6+
TabsContent,
7+
TabsList,
8+
TabsTrigger,
9+
} from '@oasisprotocol/ui-library/src/components/ui/tabs';
10+
import { Clock, CircleArrowUp } from 'lucide-react';
11+
import { MachineStatusIcon } from '../../../components/MachineStatusIcon';
12+
import { MachineDetailsRow } from './MachineDetailsRow';
13+
import { MachineStop } from './MachineStop';
14+
import { MachineRestart } from './MachineRestart';
215

316
export const MachinesDetails: FC = () => {
4-
return <>MachinesDetails</>;
17+
return (
18+
<>
19+
<div>
20+
<Tabs defaultValue="details">
21+
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b py-5">
22+
<div className="flex items-center gap-2">
23+
<h1 className="text-2xl font-bold">OPF-1</h1>
24+
<MachineStatusIcon removed={false} />
25+
</div>
26+
<div className="flex flex-wrap gap-3">
27+
<div className="flex items-center gap-2 text-orange-400 px-3 py-1.5 ">
28+
<Clock className="h-4 w-4" />
29+
<span>9h 34min</span>
30+
</div>
31+
<Button variant="outline" className="w-full md:w-auto" disabled>
32+
<CircleArrowUp />
33+
Top up
34+
</Button>
35+
<MachineRestart />
36+
<MachineStop />
37+
38+
<TabsList className="w-full md:w-auto">
39+
<TabsTrigger value="details">Details</TabsTrigger>
40+
<TabsTrigger value="logs">Logs</TabsTrigger>
41+
</TabsList>
42+
</div>
43+
</div>
44+
<TabsContent value="details">
45+
<div className="space-y-4">
46+
<MachineDetailsRow label="App Running" className=" py-6 border-b">
47+
<Link to="/dashboard/apps" className="text-primary">
48+
WT3
49+
</Link>
50+
</MachineDetailsRow>
51+
<MachineDetailsRow label="Provider">OPF</MachineDetailsRow>
52+
<MachineDetailsRow label="Machine Size">
53+
Small (1CPU, 2GB RAM, 10GB Storage)
54+
</MachineDetailsRow>
55+
<MachineDetailsRow label="Node ID" className="pb-6 border-b">
56+
<a
57+
href="https://explorer.oasis.io/sapphire/rofl/node/0x4d3f5b2d3rP7lUVU2BSfSm53opnGui"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
className="text-primary"
61+
>
62+
oasis13Gmsfb2D3rP7lUVU2BSfSm53opnGui
63+
</a>
64+
</MachineDetailsRow>
65+
</div>
66+
</TabsContent>
67+
<TabsContent value="logs">
68+
<div className="whitespace-pre-wrap font-mono text-sm bg-card text-foreground mt-6 p-6 rounded-sm overflow-auto leading-relaxed">
69+
[2024-01-15 10:30:25] INFO: Application started
70+
</div>
71+
</TabsContent>
72+
</Tabs>
73+
</div>
74+
</>
75+
);
576
};

‎src/pages/Explore/ExploreAppCard.tsx‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

0 commit comments

Comments
 (0)