openvsx-webui-test 0.18.0-security.5 → 0.19.0-dev.1

package/src/pages/admin-dashboard/tiers/tiers.tsx

@@ -0,0 +1,254 @@
+/******************************************************************************
+ * 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, useContext, useState, useEffect, useRef, useMemo } from "react";
+import {
+  Box,
+  Button,
+  Paper,
+  Typography,
+  CircularProgress,
+  Alert,
+  IconButton
+} from "@mui/material";
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import { MainContext } from "../../../context";
+import type { Tier } from "../../../extension-registry-types";
+import { TierFormDialog } from "./tier-form-dialog";
+import { DeleteTierDialog } from "./delete-tier-dialog";
+import { handleError } from "../../../utils";
+import { createMultiSelectFilterOperators } from "../components";
+
+export const Tiers: FC = () => {
+  const abortController = useRef<AbortController>(new AbortController());
+  const { service } = useContext(MainContext);
+  const [tiers, setTiers] = useState<readonly Tier[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [formDialogOpen, setFormDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedTier, setSelectedTier] = useState<Tier | undefined>();
+
+  // load all tiers
+  const loadTiers = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await service.admin.getTiers(abortController.current);
+      setTiers(data.tiers);
+    } catch (err: any) {
+      setError(handleError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadTiers();
+    return () => abortController.current.abort();
+  }, []);
+
+  const handleCreateClick = () => {
+    setSelectedTier(undefined);
+    setFormDialogOpen(true);
+  };
+
+  const handleEditClick = (tier: Tier) => {
+    setSelectedTier(tier);
+    setFormDialogOpen(true);
+  };
+
+  const handleDeleteClick = (tier: Tier) => {
+    setSelectedTier(tier);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleFormSubmit = async (formData: Tier) => {
+    if (selectedTier) {
+      // update existing tier
+      await service.admin.updateTier(abortController.current, selectedTier.name, formData);
+    } else {
+      // create new tier
+      await service.admin.createTier(abortController.current, formData);
+    }
+    await loadTiers();
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (selectedTier) {
+      await service.admin.deleteTier(abortController.current, selectedTier.name);
+      await loadTiers();
+    }
+  };
+
+  const handleFormDialogClose = () => {
+    setFormDialogOpen(false);
+    setSelectedTier(undefined);
+  };
+
+  const handleDeleteDialogClose = () => {
+    setDeleteDialogOpen(false);
+    setSelectedTier(undefined);
+  };
+
+  // Extract unique values for filter dropdowns
+  const tierTypeOptions = useMemo(() =>
+          [...new Set(tiers.map(t => t.tierType).filter(Boolean))],
+      [tiers]
+  );
+
+  const refillStrategyOptions = useMemo(() =>
+    [...new Set(tiers.map(t => t.refillStrategy).filter(Boolean))],
+    [tiers]
+  );
+
+  const columns: GridColDef[] = [
+    {
+      field: 'name',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 150
+    },
+    {
+      field: 'description',
+      headerName: 'Description',
+      flex: 2,
+      minWidth: 200,
+      valueGetter: (value: string) => value || '-'
+    },
+    {
+      field: 'tierType',
+      headerName: 'Tier Type',
+      width: 150,
+      filterOperators: createMultiSelectFilterOperators(tierTypeOptions)
+    },
+    {
+      field: 'capacity',
+      headerName: 'Capacity',
+      type: 'number',
+      width: 120,
+      valueFormatter: (value: number) => value.toLocaleString()
+    },
+    {
+      field: 'duration',
+      headerName: 'Duration (s)',
+      type: 'number',
+      width: 130,
+      valueFormatter: (value: number) => value.toLocaleString()
+    },
+    {
+      field: 'refillStrategy',
+      headerName: 'Refill Strategy',
+      width: 150,
+      filterOperators: createMultiSelectFilterOperators(refillStrategyOptions)
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions',
+      width: 120,
+      sortable: false,
+      filterable: false,
+      renderCell: (params: GridRenderCellParams<Tier>) => (
+        <>
+          <IconButton
+            size='small'
+            onClick={() => handleEditClick(params.row)}
+            title='Edit tier'
+            color='primary'
+          >
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            size='small'
+            onClick={() => handleDeleteClick(params.row)}
+            title='Delete tier'
+            color='error'
+          >
+            <DeleteIcon />
+          </IconButton>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <Box sx={{ p: 3, height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
+        <Typography variant='h4' component='h1'>
+          Tier Management
+        </Typography>
+        <Button
+          variant='contained'
+          startIcon={<AddIcon />}
+          onClick={handleCreateClick}
+          disabled={loading}
+        >
+          Create Tier
+        </Button>
+      </Box>
+
+      { error &&
+        <Alert severity='error' sx={{ mb: 2 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      }
+
+      { loading &&
+        <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+          <CircularProgress />
+        </Box>
+      }
+
+      { !loading && tiers.length === 0 &&
+        <Paper elevation={0} sx={{ p: 3, textAlign: "center" }}>
+          <Typography color='textSecondary' gutterBottom>
+            No tiers found. Create one to get started.
+          </Typography>
+        </Paper>
+      }
+
+      { !loading && tiers.length > 0 &&
+        <Paper elevation={0} sx={{ flex: 1, minHeight: 400, width: '100%', display: 'flex', flexDirection: 'column' }}>
+          <DataGrid
+            rows={tiers as Tier[]}
+            columns={columns}
+            getRowId={(row) => row.name}
+            pageSizeOptions={[20, 35, 50]}
+            initialState={{
+              pagination: { paginationModel: { pageSize: 20 } },
+            }}
+            disableRowSelectionOnClick
+            sx={{ flex: 1 }}
+          />
+        </Paper>
+      }
+
+      <TierFormDialog
+        open={formDialogOpen}
+        tier={selectedTier}
+        onClose={handleFormDialogClose}
+        onSubmit={handleFormSubmit}
+      />
+
+      <DeleteTierDialog
+        open={deleteDialogOpen}
+        tier={selectedTier}
+        onClose={handleDeleteDialogClose}
+        onConfirm={handleDeleteConfirm}
+      />
+    </Box>
+  );
+};

package/src/pages/admin-dashboard/usage-stats/usage-stats-chart.tsx

@@ -0,0 +1,189 @@
+/******************************************************************************
+ * 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, useMemo } from "react";
+import {
+    Box,
+    Paper,
+    Typography,
+    Alert,
+    Stack
+} from "@mui/material";
+import { BarPlot } from "@mui/x-charts/BarChart";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import type { Customer, UsageStats } from "../../../extension-registry-types";
+import { addDays, format, startOfDay } from "date-fns";
+import {
+    ChartsReferenceLine,
+    ChartsTooltip,
+    ChartsXAxis,
+    ChartsYAxis,
+    ResponsiveChartContainer
+} from "@mui/x-charts";
+
+interface UsageStatsChartProps {
+    usageStats: readonly UsageStats[];
+    customer: Customer | null;
+    startDate: Date;
+    onStartDateChange: (date: Date) => void;
+}
+
+export const UsageStatsChart: FC<UsageStatsChartProps> = ({
+    usageStats,
+    customer,
+    startDate,
+    onStartDateChange
+}) => {
+    const dayStart = startOfDay(startDate).getTime() / 1000;
+    const dayEnd = startOfDay(addDays(startDate, 1)).getTime() / 1000;
+
+    // we have 5min steps
+    const step = 5 * 60;
+    const tierCapacity =
+        customer?.tier !== undefined ? customer.tier.capacity * step / customer.tier.duration : 0;
+
+    const data: UsageStats[] = useMemo(
+        () => {
+            const arr: UsageStats[] = [];
+
+            for (let idx = dayStart; idx < dayEnd; idx += step) {
+                arr.push({
+                    windowStart: idx,
+                    duration: step,
+                    count: 0
+                });
+            }
+
+            for (const stat of usageStats) {
+                const idx = (stat.windowStart - dayStart) / step;
+                arr[idx].count = stat.count;
+            }
+            return arr;
+        }, [usageStats]
+    );
+
+    const maxDataValue: number = useMemo(
+        () => {
+            if (usageStats.length === 0) {
+                return 0;
+            } else {
+                return Math.max(...usageStats.map(v => v.count));
+            }
+        }, [usageStats]
+    );
+
+    const totalRequests = useMemo(
+        () => usageStats.reduce((sum, d) => sum + d.count, 0),
+        [usageStats]
+    );
+
+    return (
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <Paper sx={{ p: 2, mb: 3 }}>
+                <Typography variant='subtitle2' gutterBottom color='text.secondary'>
+                    Filters
+                </Typography>
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} alignItems='center'>
+                    <DatePicker
+                        label='Start Date'
+                        value={startDate}
+                        onChange={onStartDateChange}
+                        slotProps={{ textField: { size: 'small' } }}
+                    />
+                </Stack>
+            </Paper>
+
+            {usageStats.length === 0 ?
+                <Alert severity='info'>No usage data available for this customer.</Alert>
+             :
+                <>
+                <Paper sx={{ p: 2 }}>
+                    <ResponsiveChartContainer
+                        series={[{
+                            type: 'bar',
+                            data: data.map(d => d.count),
+                            label: 'Request Count',
+                            color: 'lightgray',
+                        }]}
+
+                        height={400}
+                        margin={{ top: 10 }}
+                        xAxis={[
+                            {
+                                id: 'date',
+                                data: data.map((value) => new Date(value.windowStart * 1000)),
+                                scaleType: 'band',
+                                valueFormatter: (value) => format(new Date(value), 'HH:mm'),
+                            },
+                        ]}
+                        yAxis={[
+                            {
+                                id: 'requests',
+                                scaleType: 'linear',
+                                min: 0,
+                                max: Math.max(tierCapacity, maxDataValue) + 10
+                            },
+                        ]}
+                    >
+                        <BarPlot />
+
+                        {tierCapacity > 0 &&
+                            <ChartsReferenceLine
+                                y={tierCapacity}
+                                label='Tier Limit'
+                                labelAlign='end'
+                                lineStyle={{
+                                    strokeDasharray: '10 5',
+                                    strokeWidth: 2,
+                                    stroke: '#a83244',
+                                }}
+                            />
+                        }
+
+                        <ChartsXAxis
+                            label='Time'
+                            position='bottom'
+                            axisId='date'
+                            tickInterval={(value, index) => {
+                                return new Date(value).getMinutes() === 0;
+                            }}
+                            tickLabelInterval={(value, index) => {
+                                return new Date(value).getMinutes() === 0;
+                            }}
+                            tickLabelStyle={{
+                                fontSize: 10,
+                            }}
+                        />
+                        <ChartsYAxis
+                            label='Requests'
+                            position='left'
+                            axisId='requests'
+                            tickLabelStyle={{ fontSize: 10 }}
+                        />
+                        <ChartsTooltip />
+                    </ResponsiveChartContainer>
+                </Paper>
+
+                <Box mt={2}>
+                    <Typography variant='body2' color='text.secondary'>
+                        Total requests in selected range: {totalRequests.toLocaleString()}
+                        {usageStats.length > 0 && <> ({usageStats.length} data points)</>}
+                    </Typography>
+                </Box>
+                </>
+            }
+        </LocalizationProvider>
+    );
+};

package/src/pages/admin-dashboard/usage-stats/usage-stats-search.tsx

@@ -0,0 +1,83 @@
+/******************************************************************************
+ * 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 { Paper, Autocomplete, InputBase, IconButton } from "@mui/material";
+import SearchIcon from '@mui/icons-material/Search';
+import type { Customer } from "../../../extension-registry-types";
+
+interface CustomerSearchProps {
+    customers: Customer[];
+    selectedCustomer: Customer | null;
+    loading: boolean;
+    onCustomerChange: (_: unknown, value: Customer | null) => void;
+    pageSettings?: { themeType?: string };
+}
+
+export const CustomerSearch: FC<CustomerSearchProps> = ({
+    customers,
+    selectedCustomer,
+    loading,
+    onCustomerChange,
+    pageSettings
+}) => {
+    const searchIconColor = pageSettings?.themeType === 'dark' ? '#111111' : '#ffffff';
+
+    return (
+        <Autocomplete
+            key='customer-search'
+            options={customers}
+            getOptionLabel={(option) => option.name}
+            value={selectedCustomer}
+            onChange={onCustomerChange}
+            loading={loading}
+            renderInput={(params) => {
+                const { ref, color, size, ...inputProps } = params.inputProps;
+                return (
+                    <Paper
+                        ref={params.InputProps.ref}
+                        elevation={3}
+                        sx={{
+                            flex: 2,
+                            display: 'flex',
+                            mr: { xs: 0, sm: 0, md: 1, lg: 1, xl: 1 },
+                            mb: { xs: 2, sm: 2, md: 0, lg: 0, xl: 0 },
+                        }}
+                    >
+                        <InputBase
+                            inputRef={ref}
+                            {...inputProps}
+                            autoFocus
+                            sx={{ flex: 1, pl: 1 }}
+                            placeholder='Search Customer'
+                        />
+                        <IconButton
+                            color='primary'
+                            sx={{
+                                bgcolor: 'secondary.main',
+                                borderRadius: '0 4px 4px 0',
+                                padding: 1,
+                                transition: 'all 0s',
+                                '&:hover': {
+                                    filter: 'invert(100%)',
+                                }
+                            }}
+                        >
+                            <SearchIcon sx={{ color: searchIconColor }} />
+                        </IconButton>
+                    </Paper>
+                );
+            }}
+        />
+    );
+};

package/src/pages/admin-dashboard/usage-stats/usage-stats-utils.ts

@@ -0,0 +1,16 @@
+/******************************************************************************
+ * 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 const getDefaultStartDate = () => {
+    return new Date();
+};

package/src/pages/admin-dashboard/usage-stats/usage-stats.tsx

@@ -0,0 +1,127 @@
+/******************************************************************************
+ * 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, useContext, useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { Box, Alert } from "@mui/material";
+import { useParams, useNavigate } from "react-router-dom";
+import { MainContext } from "../../../context";
+import type { UsageStats, Customer } from "../../../extension-registry-types";
+import { handleError } from "../../../utils";
+import { AdminDashboardRoutes } from "../admin-dashboard";
+import { SearchListContainer } from "../search-list-container";
+import { CustomerSearch } from "./usage-stats-search";
+import { UsageStatsChart } from "./usage-stats-chart";
+import { getDefaultStartDate } from "./usage-stats-utils";
+
+export const UsageStatsView: FC = () => {
+    const { customer } = useParams<{ customer: string }>();
+    const navigate = useNavigate();
+    const abortController = useRef(new AbortController());
+    const { service, pageSettings } = useContext(MainContext);
+
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [customersLoading, setCustomersLoading] = useState(true);
+    const [usageStats, setUsageStats] = useState<readonly UsageStats[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [startDate, setStartDate] = useState<Date>(getDefaultStartDate);
+
+    // Load customers for autocomplete
+    useEffect(() => {
+        const loadCustomers = async () => {
+            try {
+                setCustomersLoading(true);
+                const data = await service.admin.getCustomers(abortController.current);
+                setCustomers(data.customers);
+            } catch (err) {
+                setError(handleError(err as Error));
+            } finally {
+                setCustomersLoading(false);
+            }
+        };
+        loadCustomers();
+        return () => abortController.current.abort();
+    }, [service]);
+
+    const selectedCustomer = useMemo(
+        () => customers.find(c => c.name === customer) || null,
+        [customers, customer]
+    );
+
+    const handleCustomerChange = (_: unknown, value: Customer | null) => {
+        if (value) {
+            navigate(`${AdminDashboardRoutes.USAGE_STATS}/${value.name}`);
+        } else {
+            navigate(AdminDashboardRoutes.USAGE_STATS);
+        }
+    };
+
+    const loadUsageStats = useCallback(async () => {
+        if (!customer) {
+            setUsageStats([]);
+            setLoading(false);
+            return;
+        }
+
+        try {
+            setLoading(true);
+            setError(null);
+            const data = await service.admin.getUsageStats(
+                abortController.current,
+                customer,
+                startDate
+            );
+            setUsageStats(data.stats);
+        } catch (err) {
+            setError(handleError(err as Error));
+        } finally {
+            setLoading(false);
+        }
+    }, [service, customer, startDate]);
+
+    useEffect(() => {
+        if (customer) {
+            loadUsageStats();
+        }
+    }, [loadUsageStats, customer]);
+
+    if (error) {
+        return <Alert severity='error'>{error}</Alert>;
+    }
+
+    return (
+        <Box>
+            <SearchListContainer
+                searchContainer={[
+                    <CustomerSearch
+                        key='customer-search'
+                        customers={customers}
+                        selectedCustomer={selectedCustomer}
+                        loading={customersLoading}
+                        onCustomerChange={handleCustomerChange}
+                        pageSettings={pageSettings}
+                    />
+                ]}
+                listContainer={!customer && <Alert severity='info'>Select a customer to view usage statistics.</Alert>}
+                loading={loading || customersLoading}
+            />
+            {customer && (
+              <UsageStatsChart
+                usageStats={usageStats}
+                customer={selectedCustomer}
+                startDate={startDate}
+                onStartDateChange={setStartDate}
+            />)}
+        </Box>
+    );
+};

package/src/pages/admin-dashboard/welcome.tsx

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { Typography, Grid, Paper } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import { Link } from 'react-router-dom';
@@ -28,6 +28,10 @@ export const Welcome: FunctionComponent = props => {
                     <WelcomeLinkItem route={AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' description='Search for extensions and remove certain versions' />
                     <WelcomeLinkItem route={AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' description='Search for publishers and revoke their contributions' />
                     <WelcomeLinkItem route={AdminDashboardRoutes.SCANS_ADMIN} label='Scans' description='View security scan results and manage quarantined extensions' />
+                    <WelcomeLinkItem route={AdminDashboardRoutes.TIERS} label='Tiers' description='Manage rate-limit tiers' />
+                    <WelcomeLinkItem route={AdminDashboardRoutes.CUSTOMERS} label='Customers' description='Manage rate-limit customers' />
+                    <WelcomeLinkItem route={AdminDashboardRoutes.USAGE_STATS} label='Usage Stats' description='Show usage stats for customers' />
+                    <WelcomeLinkItem route={AdminDashboardRoutes.LOGS} label='Logs' description='Browse admin logs' />
                 </Grid>
             </Paper>
         </Grid>