feat: adding rate limiting tab to user settings (#1707)

Author: gnugomez

webui/src/components/rate-limiting/customer/general-details.tsx

@@ -0,0 +1,106 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FC, type ReactNode } from 'react';
+import {
+    Box,
+    Typography,
+    Paper,
+    type PaperProps,
+    Chip,
+    Stack,
+    Divider,
+    Grid,
+} from '@mui/material';
+import type { Customer } from '../../../extension-registry-types';
+
+const sectionPaperProps: PaperProps = { elevation: 1, sx: { p: 3, mb: 3 } };
+
+export interface GeneralDetailsProps {
+    customer: Customer;
+    headerAction?: ReactNode;
+}
+
+export const GeneralDetails: FC<GeneralDetailsProps> = ({ customer, headerAction }) => {
+    const tier = customer.tier;
+    return (
+        <Paper {...sectionPaperProps}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Typography variant='h6'>General Information</Typography>
+                {headerAction && <Box sx={{ ml: 'auto' }}>{headerAction}</Box>}
+            </Box>
+            <Divider sx={{ mb: 2 }} />
+            <Grid container spacing={2}>
+                <Grid item xs={12} sm={6} md={4}>
+                    <Typography variant='subtitle2' color='text.secondary'>Name</Typography>
+                    <Typography variant='body1'>{customer.name}</Typography>
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                    <Typography variant='subtitle2' color='text.secondary'>State</Typography>
+                    <Box sx={{ mt: 0.5 }}>
+                        <Chip
+                            label={customer.state}
+                            size='small'
+                            color='secondary'
+                        />
+                    </Box>
+                </Grid>
+                {tier ? (
+                    <>
+                        <Grid item xs={12} sm={6} md={4}>
+                            <Typography variant='subtitle2' color='text.secondary'>Tier</Typography>
+                            <Box sx={{ mt: 0.5 }}>
+                                <Chip label={tier.name} size='small' />
+                            </Box>
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={4}>
+                            <Typography variant='subtitle2' color='text.secondary'>Tier Type</Typography>
+                            <Typography variant='body2'>{tier.tierType}</Typography>
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={4}>
+                            <Typography variant='subtitle2' color='text.secondary'>Capacity</Typography>
+                            <Typography variant='body2'>{tier.capacity} requests / {tier.duration}s</Typography>
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={4}>
+                            <Typography variant='subtitle2' color='text.secondary'>Refill Strategy</Typography>
+                            <Typography variant='body2'>{tier.refillStrategy}</Typography>
+                        </Grid>
+                        {tier.description && (
+                            <Grid item xs={12}>
+                                <Typography variant='subtitle2' color='text.secondary'>Tier Description</Typography>
+                                <Typography variant='body2'>{tier.description}</Typography>
+                            </Grid>
+                        )}
+                    </>
+                ) : (
+                    <Grid item xs={12} sm={6} md={4}>
+                        <Typography variant='subtitle2' color='text.secondary'>Tier</Typography>
+                        <Typography variant='body2' color='text.secondary'>No tier assigned</Typography>
+                    </Grid>
+                )}
+                <Grid item xs={12}>
+                    <Typography variant='subtitle2' color='text.secondary'>CIDR Blocks</Typography>
+                    {customer.cidrBlocks.length > 0 ? (
+                        <Stack direction='row' spacing={0.5} sx={{ mt: 0.5 }} flexWrap='wrap' useFlexGap>
+                            {customer.cidrBlocks.map((cidr) => (
+                                <Chip key={cidr} label={cidr} size='small' variant='outlined' />
+                            ))}
+                        </Stack>
+                    ) : (
+                        <Typography variant='body2' color='text.secondary'>None configured</Typography>
+                    )}
+                </Grid>
+            </Grid>
+        </Paper>
+    );
+};

webui/src/components/rate-limiting/customer/index.ts

@@ -0,0 +1,21 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+export { GeneralDetails } from './general-details';
+export type { GeneralDetailsProps } from './general-details';
+
+export { Members } from './members';
+export type { MembersProps } from './members';
+
+export { UsageStats } from './usage-stats';
+export type { UsageStatsProps } from './usage-stats';

webui/src/components/rate-limiting/customer/members.tsx

@@ -0,0 +1,68 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FC, type ReactNode } from 'react';
+import {
+    Box,
+    Typography,
+    Paper,
+    type PaperProps,
+    Divider,
+    Avatar,
+    List,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+} from '@mui/material';
+import type { UserData } from '../../../extension-registry-types';
+
+const sectionPaperProps: PaperProps = { elevation: 1, sx: { p: 3, mb: 3 } };
+
+export interface MembersProps {
+    users: UserData[];
+    headerAction?: ReactNode;
+    renderUserAction?: (user: UserData) => ReactNode;
+    renderUserPrimary?: (user: UserData) => ReactNode;
+}
+
+export const Members: FC<MembersProps> = ({ users, headerAction, renderUserAction, renderUserPrimary }) => (
+    <Paper {...sectionPaperProps}>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+            <Typography variant='h6'>Members</Typography>
+            {headerAction && <Box sx={{ ml: 'auto' }}>{headerAction}</Box>}
+        </Box>
+        <Divider sx={{ mb: 1 }} />
+        {users.length === 0 ? (
+            <Typography variant='body2' color='text.secondary' sx={{ py: 1 }}>
+                No members assigned to this customer.
+            </Typography>
+        ) : (
+            <List dense disablePadding>
+                {users.map(user => (
+                    <ListItem
+                        key={`${user.loginName}-${user.provider}`}
+                        secondaryAction={renderUserAction?.(user)}
+                    >
+                        <ListItemAvatar>
+                            <Avatar src={user.avatarUrl} sx={{ width: 32, height: 32 }} />
+                        </ListItemAvatar>
+                        <ListItemText
+                            primary={renderUserPrimary ? renderUserPrimary(user) : user.loginName}
+                            secondary={user.fullName}
+                        />
+                    </ListItem>
+                ))}
+            </List>
+        )}
+    </Paper>
+);

webui/src/components/rate-limiting/customer/usage-stats.tsx

@@ -0,0 +1,50 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FC } from 'react';
+import {
+    Typography,
+    Paper,
+    type PaperProps,
+    Divider,
+} from '@mui/material';
+import type { Customer, UsageStats as UsageStatsType } from '../../../extension-registry-types';
+import type { DateTime } from 'luxon';
+import { UsageStatsChart } from '../usage-stats/usage-stats-chart';
+
+const sectionPaperProps: PaperProps = { elevation: 1, sx: { p: 3, mb: 3 } };
+
+export interface UsageStatsProps {
+    usageStats: readonly UsageStatsType[];
+    customer: Customer;
+    startDate: DateTime;
+    onStartDateChange: (date: DateTime) => void;
+    compact?: boolean;
+}
+
+export const UsageStats: FC<UsageStatsProps> = ({ usageStats, customer, startDate, onStartDateChange, compact }) => (
+    <Paper {...sectionPaperProps}>
+        <Typography variant='h6' gutterBottom>
+            Usage Statistics
+        </Typography>
+        <Divider sx={{ mb: 2 }} />
+        <UsageStatsChart
+            usageStats={usageStats}
+            customer={customer}
+            startDate={startDate}
+            onStartDateChange={onStartDateChange}
+            embedded
+            compact={compact}
+        />
+    </Paper>
+);

…hboard/usage-stats/usage-stats-chart.tsx …miting/usage-stats/usage-stats-chart.tsxwebui/src/pages/admin-dashboard/usage-stats/usage-stats-chart.tsx renamed to webui/src/components/rate-limiting/usage-stats/usage-stats-chart.tsx webui/src/pages/admin-dashboard/usage-stats/usage-stats-chart.tsx renamed to webui/src/components/rate-limiting/usage-stats/usage-stats-chart.tsx

@@ -42,14 +42,16 @@ interface UsageStatsChartProps {
     startDate: DateTime;
     onStartDateChange: (date: DateTime) => void;
     embedded?: boolean;
+    compact?: boolean;
 }
 
 export const UsageStatsChart: FC<UsageStatsChartProps> = ({
     usageStats,
     customer,
     startDate,
     onStartDateChange,
-    embedded = false
+    embedded = false,
+    compact = false
 }) => {
     const dayStart = startDate.startOf('day').toMillis() / 1000;
     const dayEnd = startDate.endOf('day').toMillis() / 1000;
@@ -134,8 +136,8 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                             color: 'lightgray',
                         }]}
 
-                        height={400}
-                        margin={{ top: 10 }}
+                        height={compact ? 300 : 400}
+                        margin={{ top: 30 }}
                         xAxis={[
                             {
                                 id: 'date',
@@ -172,11 +174,13 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                             label='Time (UTC)'
                             position='bottom'
                             axisId='date'
-                            tickInterval={(value, index) => {
-                                return new Date(value).getMinutes() === 0;
+                            tickInterval={(value) => {
+                                const d = new Date(value);
+                                return d.getMinutes() === 0 && (!compact || d.getHours() % 3 === 0);
                             }}
-                            tickLabelInterval={(value, index) => {
-                                return new Date(value).getMinutes() === 0;
+                            tickLabelInterval={(value) => {
+                                const d = new Date(value);
+                                return d.getMinutes() === 0 && (!compact || d.getHours() % 3 === 0);
                             }}
                             tickLabelStyle={{
                                 fontSize: 10,
@@ -202,4 +206,4 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
             }
         </LocalizationProvider>
     );
-};
+};

…shboard/usage-stats/usage-stats-utils.ts …imiting/usage-stats/usage-stats-utils.tswebui/src/pages/admin-dashboard/usage-stats/usage-stats-utils.ts renamed to webui/src/components/rate-limiting/usage-stats/usage-stats-utils.ts webui/src/pages/admin-dashboard/usage-stats/usage-stats-utils.ts renamed to webui/src/components/rate-limiting/usage-stats/usage-stats-utils.ts

@@ -0,0 +1,70 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { useContext, useState, useEffect, useRef, useCallback } from "react";
+import { MainContext } from "../../../context";
+import type { UsageStats } from "../../../extension-registry-types";
+import { handleError } from "../../../utils";
+import { getDefaultStartDate } from "./usage-stats-utils";
+import { DateTime } from "luxon";
+
+export const useUsageStats = (customerName: string | undefined) => {
+    const abortController = useRef(new AbortController());
+    const { service } = useContext(MainContext);
+
+    const [usageStats, setUsageStats] = useState<readonly UsageStats[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [internalStartDate, setInternalStartDate] = useState<DateTime>(getDefaultStartDate);
+
+    const startDateRef = useRef(internalStartDate);
+    startDateRef.current = internalStartDate;
+
+    const fetchUsageStats = useCallback(async (date: DateTime) => {
+        if (!customerName) {
+            setUsageStats([]);
+            setLoading(false);
+            return;
+        }
+
+        try {
+            setLoading(true);
+            setError(null);
+            const data = await service.getUsageStatsForUser(
+                abortController.current,
+                customerName,
+                date.toJSDate()
+            );
+            setUsageStats(data.stats);
+        } catch (err) {
+            setError(handleError(err as Error));
+        } finally {
+            setLoading(false);
+        }
+    }, [service, customerName]);
+
+    const setStartDate = useCallback((date: DateTime) => {
+        setInternalStartDate(date);
+        fetchUsageStats(date);
+    }, [fetchUsageStats]);
+
+    useEffect(() => {
+        fetchUsageStats(startDateRef.current);
+        return () => {
+            abortController.current.abort();
+            abortController.current = new AbortController();
+        };
+    }, [fetchUsageStats]);
+
+    return { usageStats, loading, error, startDate: internalStartDate, setStartDate };
+};