@@ -15,7 +15,6 @@ import { Item, ItemField, ItemsList } from "./components/ItemsList";
1515import { useWorkspaceSessions } from "./data/insights/list-workspace-sessions-query" ;
1616import { WorkspaceSessionGroup } from "./insights/WorkspaceSessionGroup" ;
1717import { gitpodHostUrl } from "./service/service" ;
18- import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from "@podkit/select/Select" ;
1918import dayjs from "dayjs" ;
2019import { Timestamp } from "@bufbuild/protobuf" ;
2120import { LoadingButton } from "@podkit/buttons/LoadingButton" ;
@@ -26,16 +25,11 @@ import { useToast } from "./components/toasts/Toasts";
2625import { useTemporaryState } from "./hooks/use-temporary-value" ;
2726import { DownloadIcon } from "lucide-react" ;
2827import { Button } from "@podkit/buttons/Button" ;
28+ import { DropdownMenu , DropdownMenuTrigger , DropdownMenuContent , DropdownMenuItem } from "@podkit/dropdown/DropDown" ;
29+ import { useInstallationConfiguration } from "./data/installation/default-workspace-image-query" ;
2930
3031export const Insights = ( ) => {
31- const [ prebuildsFilter , setPrebuildsFilter ] = useState < "week" | "month" | "year" > ( "week" ) ;
32- const [ upperBound , lowerBound ] = useMemo ( ( ) => {
33- const from = dayjs ( ) . subtract ( 1 , prebuildsFilter ) . startOf ( "day" ) ;
34-
35- const fromTimestamp = Timestamp . fromDate ( from . toDate ( ) ) ;
36- const toTimestamp = Timestamp . fromDate ( new Date ( ) ) ;
37- return [ fromTimestamp , toTimestamp ] ;
38- } , [ prebuildsFilter ] ) ;
32+ const toDate = useMemo ( ( ) => Timestamp . fromDate ( new Date ( ) ) , [ ] ) ;
3933 const {
4034 data,
4135 error : errorMessage ,
@@ -44,9 +38,11 @@ export const Insights = () => {
4438 hasNextPage,
4539 fetchNextPage,
4640 } = useWorkspaceSessions ( {
47- from : upperBound ,
48- to : lowerBound ,
41+ from : Timestamp . fromDate ( new Date ( 0 ) ) ,
42+ to : toDate ,
4943 } ) ;
44+ const { data : installationConfig } = useInstallationConfiguration ( ) ;
45+ const isDedicatedInstallation = ! ! installationConfig ?. isDedicatedInstallation ;
5046
5147 const hasMoreThanOnePage = ( data ?. pages . length ?? 0 ) > 1 ;
5248 const sessions = useMemo ( ( ) => data ?. pages . flatMap ( ( p ) => p ) ?? [ ] , [ data ] ) ;
@@ -59,21 +55,11 @@ export const Insights = () => {
5955 < div className = "app-container pt-5 pb-8" >
6056 < div
6157 className = { classNames (
62- "flex flex-col items-start space-y-3 justify-between " ,
58+ "flex flex-col items-start space-y-3 justify-end " ,
6359 "md:flex-row md:items-center md:space-x-4 md:space-y-0" ,
6460 ) }
6561 >
66- < Select value = { prebuildsFilter } onValueChange = { ( v ) => setPrebuildsFilter ( v as any ) } >
67- < SelectTrigger className = "w-[180px]" >
68- < SelectValue placeholder = "Select time range" />
69- </ SelectTrigger >
70- < SelectContent >
71- < SelectItem value = "week" > Last 7 days</ SelectItem >
72- < SelectItem value = "month" > Last 30 days</ SelectItem >
73- < SelectItem value = "year" > Last 365 days</ SelectItem >
74- </ SelectContent >
75- </ Select >
76- < DownloadUsage from = { upperBound } to = { lowerBound } />
62+ < DownloadUsage to = { toDate } />
7763 </ div >
7864
7965 < div
@@ -108,7 +94,7 @@ export const Insights = () => {
10894
10995 { isLoading && (
11096 < div className = "flex items-center justify-center w-full space-x-2 text-pk-content-primary text-sm pt-16 pb-40" >
111- < LoadingState />
97+ < LoadingState delay = { false } />
11298 < span > Loading usage...</ span >
11399 </ div >
114100 ) }
@@ -135,7 +121,7 @@ export const Insights = () => {
135121 { " " }
136122 workspaces
137123 </ a > { " " }
138- in the last 30 days or checked your other organizations?
124+ recently { ! isDedicatedInstallation && " or checked your other organizations" } ?
139125 </ Subheading >
140126 </ div >
141127 ) }
@@ -164,39 +150,51 @@ export const Insights = () => {
164150} ;
165151
166152type DownloadUsageProps = {
167- from : Timestamp ;
168153 to : Timestamp ;
169154} ;
170- export const DownloadUsage = ( { from , to } : DownloadUsageProps ) => {
155+ export const DownloadUsage = ( { to } : DownloadUsageProps ) => {
171156 const { data : org } = useCurrentOrg ( ) ;
172157 const { toast } = useToast ( ) ;
173158 // When we start the download, we disable the button for a short time
174159 const [ downloadDisabled , setDownloadDisabled ] = useTemporaryState ( false , 1000 ) ;
175160
176- const handleDownload = useCallback ( async ( ) => {
177- if ( ! org ) {
178- return ;
179- }
180-
181- setDownloadDisabled ( true ) ;
182- toast (
183- < DownloadInsightsToast
184- organizationName = { org ?. slug ?? org ?. id }
185- organizationId = { org . id }
186- from = { from }
187- to = { to }
188- /> ,
189- {
190- autoHide : false ,
191- } ,
192- ) ;
193- } , [ org , setDownloadDisabled , toast , from , to ] ) ;
161+ const handleDownload = useCallback (
162+ async ( { daysInPast } : { daysInPast : number } ) => {
163+ if ( ! org ) {
164+ return ;
165+ }
166+ const from = Timestamp . fromDate ( dayjs ( ) . subtract ( daysInPast , "day" ) . toDate ( ) ) ;
167+
168+ setDownloadDisabled ( true ) ;
169+ toast (
170+ < DownloadInsightsToast
171+ organizationName = { org ?. slug ?? org ?. id }
172+ organizationId = { org . id }
173+ from = { from }
174+ to = { to }
175+ /> ,
176+ {
177+ autoHide : false ,
178+ } ,
179+ ) ;
180+ } ,
181+ [ org , setDownloadDisabled , to , toast ] ,
182+ ) ;
194183
195184 return (
196- < Button variant = "secondary" onClick = { handleDownload } className = "gap-1" disabled = { downloadDisabled } >
197- < DownloadIcon strokeWidth = { 3 } className = "w-4" />
198- < span > Export as CSV</ span >
199- </ Button >
185+ < DropdownMenu >
186+ < DropdownMenuTrigger asChild >
187+ < Button variant = "secondary" className = "gap-1" disabled = { downloadDisabled } >
188+ < DownloadIcon strokeWidth = { 3 } className = "w-4" />
189+ < span > Export as CSV</ span >
190+ </ Button >
191+ </ DropdownMenuTrigger >
192+ < DropdownMenuContent >
193+ < DropdownMenuItem onClick = { ( ) => handleDownload ( { daysInPast : 7 } ) } > Last 7 days</ DropdownMenuItem >
194+ < DropdownMenuItem onClick = { ( ) => handleDownload ( { daysInPast : 30 } ) } > Last 30 days</ DropdownMenuItem >
195+ < DropdownMenuItem onClick = { ( ) => handleDownload ( { daysInPast : 365 } ) } > Last 365 days</ DropdownMenuItem >
196+ </ DropdownMenuContent >
197+ </ DropdownMenu >
200198 ) ;
201199} ;
202200
0 commit comments