|
1 | 1 | import { useRead } from "@lib/hooks"; |
2 | 2 | import { RequiredResourceComponents } from "@types"; |
3 | | -import { |
4 | | - Card, |
5 | | - CardContent, |
6 | | - CardDescription, |
7 | | - CardHeader, |
8 | | - CardTitle, |
9 | | -} from "@ui/card"; |
10 | | -import { FolderSync } from "lucide-react"; |
| 3 | +import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card"; |
| 4 | +import { Clock, FolderSync } from "lucide-react"; |
11 | 5 | import { Link } from "react-router-dom"; |
12 | 6 | import { DeleteResource, NewResource } from "../common"; |
13 | 7 | import { ResourceSyncTable } from "./table"; |
14 | 8 | import { Types } from "@monitor/client"; |
15 | | -import { ResourceSyncConfig } from "./config"; |
16 | | -import { useState } from "react"; |
17 | | -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs"; |
18 | 9 | import { ExecuteSync, RefreshSync } from "./actions"; |
19 | | -import { sanitizeOnlySpan, sync_no_changes } from "@lib/utils"; |
20 | | -import { Section } from "@components/layouts"; |
| 10 | +import { PendingOrConfig } from "./pending-or-config"; |
| 11 | +import { |
| 12 | + bg_color_class_by_intention, |
| 13 | + resource_sync_state_intention, |
| 14 | +} from "@lib/color"; |
| 15 | +import { cn } from "@lib/utils"; |
| 16 | +import { HoverCard, HoverCardContent, HoverCardTrigger } from "@ui/hover-card"; |
| 17 | +import { fmt_date } from "@lib/formatting"; |
21 | 18 |
|
22 | 19 | const useResourceSync = (id?: string) => |
23 | 20 | useRead("ListResourceSyncs", {}).data?.find((d) => d.id === id); |
24 | 21 |
|
25 | | -const PENDING_TYPE_KEYS: Array<[string, string]> = [ |
26 | | - ["Server", "server_updates"], |
27 | | - ["Deployment", "deployment_updates"], |
28 | | - ["Build", "build_updates"], |
29 | | - ["Repo", "repo_updates"], |
30 | | - ["Procedure", "procedure_updates"], |
31 | | - ["Alerter", "alerter_updates"], |
32 | | - ["Builder", "builder_updates"], |
33 | | - ["Server Template", "server_template_updates"], |
34 | | - ["Resource Sync", "resource_sync_updates"], |
35 | | - ["Variable", "variable_updates"], |
36 | | - ["User Group", "user_group_updates"], |
37 | | -]; |
38 | | - |
39 | | -const PendingOrConfig = ({ id }: { id: string }) => { |
40 | | - const [view, setView] = useState("Pending"); |
41 | | - |
42 | | - const sync = useRead("GetResourceSync", { sync: id }).data; |
43 | | - |
44 | | - const pendingDisabled = !sync || sync_no_changes(sync); |
45 | | - const currentView = view === "Pending" && pendingDisabled ? "Config" : view; |
46 | | - |
47 | | - const tabsList = ( |
48 | | - <TabsList className="justify-start w-fit"> |
49 | | - <TabsTrigger |
50 | | - value="Pending" |
51 | | - className="w-[110px]" |
52 | | - disabled={pendingDisabled} |
53 | | - > |
54 | | - Pending |
55 | | - </TabsTrigger> |
56 | | - <TabsTrigger value="Config" className="w-[110px]"> |
57 | | - Config |
58 | | - </TabsTrigger> |
59 | | - </TabsList> |
60 | | - ); |
61 | | - return ( |
62 | | - <Tabs value={currentView} onValueChange={setView} className="grid gap-4"> |
63 | | - <TabsContent value="Config"> |
64 | | - <ResourceSyncConfig id={id} titleOther={tabsList} /> |
65 | | - </TabsContent> |
66 | | - <TabsContent value="Pending"> |
67 | | - <Section titleOther={tabsList}> |
68 | | - {PENDING_TYPE_KEYS.map(([type, key]) => ( |
69 | | - <PendingView |
70 | | - key={type} |
71 | | - type={type} |
72 | | - pending={sync?.info?.pending?.[key]} |
73 | | - /> |
74 | | - ))} |
75 | | - </Section> |
76 | | - </TabsContent> |
77 | | - </Tabs> |
78 | | - ); |
79 | | -}; |
80 | | - |
81 | | -const PendingView = ({ |
82 | | - type, |
83 | | - pending, |
84 | | -}: { |
85 | | - type: string; |
86 | | - pending: Types.SyncUpdate | undefined; |
87 | | -}) => { |
88 | | - if (!pending) return; |
89 | | - |
90 | | - return ( |
91 | | - <Card> |
92 | | - <CardHeader className="flex items-center justify-between gap-4"> |
93 | | - <CardTitle>{type} Updates</CardTitle> |
94 | | - <div className="flex gap-4 items-center"> |
95 | | - {pending.to_create && ( |
96 | | - <div className="flex gap-2 items-center"> |
97 | | - To Create: {pending.to_create} |
98 | | - </div> |
99 | | - )} |
100 | | - {pending.to_update && ( |
101 | | - <div className="flex gap-2 items-center"> |
102 | | - To Update: {pending.to_update} |
103 | | - </div> |
104 | | - )} |
105 | | - {pending.to_delete && ( |
106 | | - <div className="flex gap-2 items-center"> |
107 | | - To Delete: {pending.to_delete} |
108 | | - </div> |
109 | | - )} |
110 | | - </div> |
111 | | - </CardHeader> |
112 | | - <CardContent> |
113 | | - <pre |
114 | | - dangerouslySetInnerHTML={{ |
115 | | - __html: sanitizeOnlySpan(pending.log), |
116 | | - }} |
117 | | - /> |
118 | | - </CardContent> |
119 | | - </Card> |
120 | | - ); |
121 | | -}; |
122 | | - |
123 | 22 | export const ResourceSyncComponents: RequiredResourceComponents = { |
124 | 23 | list_item: (id) => useResourceSync(id), |
125 | 24 |
|
@@ -151,9 +50,55 @@ export const ResourceSyncComponents: RequiredResourceComponents = { |
151 | 50 | Icon: () => <FolderSync className="w-4 h-4" />, |
152 | 51 | BigIcon: () => <FolderSync className="w-8 h-8" />, |
153 | 52 |
|
154 | | - Status: {}, |
| 53 | + Status: { |
| 54 | + State: ({ id }) => { |
| 55 | + const state = useResourceSync(id)?.info.state; |
| 56 | + const color = bg_color_class_by_intention( |
| 57 | + resource_sync_state_intention(state) |
| 58 | + ); |
| 59 | + return ( |
| 60 | + <Card className={cn("w-fit", color)}> |
| 61 | + <CardHeader className="py-0 px-2">{state}</CardHeader> |
| 62 | + </Card> |
| 63 | + ); |
| 64 | + }, |
| 65 | + Status: ({ id }) => { |
| 66 | + const info = useResourceSync(id)?.info; |
| 67 | + if (info?.last_sync_hash && info?.last_sync_message) { |
| 68 | + return ( |
| 69 | + <HoverCard openDelay={200}> |
| 70 | + <HoverCardTrigger asChild> |
| 71 | + <Card className="px-3 py-2 hover:bg-accent/50 transition-colors cursor-pointer"> |
| 72 | + <div className="text-muted-foreground text-sm text-nowrap overflow-hidden overflow-ellipsis"> |
| 73 | + last sync: {info.last_sync_hash} |
| 74 | + </div> |
| 75 | + </Card> |
| 76 | + </HoverCardTrigger> |
| 77 | + <HoverCardContent align="start"> |
| 78 | + <div className="grid"> |
| 79 | + <div className="text-muted-foreground">commit message:</div> |
| 80 | + {info.last_sync_message} |
| 81 | + </div> |
| 82 | + </HoverCardContent> |
| 83 | + </HoverCard> |
| 84 | + ); |
| 85 | + } else { |
| 86 | + return <div className="text-muted-foreground">{"Never synced"}</div>; |
| 87 | + } |
| 88 | + }, |
| 89 | + }, |
155 | 90 |
|
156 | | - Info: {}, |
| 91 | + Info: { |
| 92 | + LastSync: ({ id }) => { |
| 93 | + const last_ts = useResourceSync(id)?.info.last_sync_ts; |
| 94 | + return ( |
| 95 | + <div className="flex items-center gap-2"> |
| 96 | + <Clock className="w-4 h-4" /> |
| 97 | + {last_ts ? fmt_date(new Date(last_ts)) : "Never"} |
| 98 | + </div> |
| 99 | + ); |
| 100 | + }, |
| 101 | + }, |
157 | 102 |
|
158 | 103 | Actions: { RefreshSync, ExecuteSync }, |
159 | 104 |
|
|
0 commit comments