openvsx-webui-test 0.17.2 → 0.18.0-dev.1

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 React, { 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 React, { 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 React, { FC, 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 } = React.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

@@ -27,6 +27,10 @@ export const Welcome: FunctionComponent = props => {
                     <WelcomeLinkItem route={AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' description='Manage user roles, create new namespaces' />
                     <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' />
                 </Grid>
             </Paper>
         </Grid>

package/src/pages/extension-detail/extension-detail-overview.tsx

@@ -141,6 +141,13 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
         </>;
     };
 
+    const renderIdentifierSection = (): ReactNode => {
+        return <>
+            <Typography variant='h6'>Unique Identifier</Typography>
+            <Typography variant='body2'><code>{`${extension.namespace}.${extension.name}`}</code></Typography>
+        </>;
+    };
+
     const renderAliasesSection = (otherAliases: string[], sx: SxProps<Theme>): ReactNode => {
         const { extension } = props;
         const aliasButtons = otherAliases.length ?
@@ -321,6 +328,13 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                     (otherAliases.length || extension.versionAlias.length) ? <Box>{renderAliasesSection(otherAliases, tagButton)}</Box> : ''
                 }
             </Box>
+
+            <Box sx={resourcesGroup}>
+                <Box>
+                    {renderIdentifierSection()}
+                </Box>
+            </Box>
+
             <Box sx={resourcesGroup}>
                 {
                     extension.categories && extension.categories.length > 0 ?
@@ -331,7 +345,7 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                 }
                 {
                     tags && tags.length > 0 ?
-                        <Box mt={2}>
+                        <Box mt={extension.categories && extension.categories.length > 0 ? 2 : 0}>
                             {renderButtonList('search', 'Tags', tags, tagButton)}
                         </Box>
                         : null
@@ -392,4 +406,4 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
 export interface ExtensionDetailOverviewProps {
     extension: Extension;
     selectVersion: (version: string) => void;
-}
+}

package/src/pages/extension-detail/extension-detail-reviews.tsx

@@ -9,7 +9,17 @@
  ********************************************************************************/
 
 import React, { Fragment, FunctionComponent, ReactNode, useContext, useState, useEffect, useRef } from 'react';
-import { Box, Typography, Divider, Link } from '@mui/material';
+import {
+    Box,
+    Typography,
+    Divider,
+    Link,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogContentText,
+    DialogActions, Button
+} from '@mui/material';
 import { MainContext } from '../../context';
 import { toLocalTime } from '../../utils';
 import { ExtensionReview, Extension, ExtensionReviewList, isEqualUser, isError, UserData } from '../../extension-registry-types';
@@ -17,16 +27,30 @@ import { TextDivider } from '../../components/text-divider';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { ButtonWithProgress } from '../../components/button-with-progress';
 import { Timestamp } from '../../components/timestamp';
-import { ExportRatingStars } from './extension-rating-stars';
+import { ExtensionRatingStars } from './extension-rating-stars';
 import { ExtensionReviewDialog } from './extension-review-dialog';
 
 export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsProps> = props => {
     const [reviewList, setReviewList] = useState<ExtensionReviewList>();
     const [loading, setLoading] = useState<boolean>(true);
     const [revoked, setRevoked] = useState<boolean>(false);
+    const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
+    const [removeReviewSet, setRemoveReviewSet] = useState(new Set<string>());
     const context = useContext(MainContext);
     const abortController = useRef<AbortController>(new AbortController());
 
+    const addRemoveReviewRequest = (loginName: string) => {
+        const newSet = new Set<string>(removeReviewSet);
+        newSet.add(loginName);
+        setRemoveReviewSet(newSet);
+    };
+
+    const deleteRemoveReviewRequest = (loginName: string) => {
+        const newSet = new Set<string>(removeReviewSet);
+        newSet.delete(loginName);
+        setRemoveReviewSet(newSet);
+    };
+
     useEffect(() => {
         updateReviews();
         return () => abortController.current.abort();
@@ -87,6 +111,58 @@ export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsPro
         }
     };
 
+    const handleAdminRemoveReviewButton = async (r: ExtensionReview) => {
+        addRemoveReviewRequest(r.user.loginName);
+        try {
+            const result = await context.service.deleteUserReview(abortController.current, props.extension, r.user);
+            if (isError(result)) {
+                throw result;
+            }
+            saveCompleted();
+        } catch (err) {
+            context.handleError(err);
+        } finally {
+            deleteRemoveReviewRequest(r.user.loginName);
+        }
+    };
+
+    const renderAdminRemoveButton = (r: ExtensionReview): ReactNode => {
+        return <>
+            <Button
+                variant='contained'
+                color='error'
+                onClick={() => setRemoveDialogOpen(true)} >
+                Remove review
+            </Button>
+            <Dialog
+                open={removeDialogOpen}
+                onClose={() => setRemoveDialogOpen(false)}>
+                <DialogTitle>Remove Review</DialogTitle>
+                <DialogContent>
+                    <DialogContentText component='div'>
+                        <Typography>Confirm removal of review comment from <code>{r.user.loginName}</code>?</Typography>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        variant='contained'
+                        color='primary'
+                        onClick={() => setRemoveDialogOpen(false)} >
+                        Cancel
+                    </Button>
+                    <ButtonWithProgress
+                        autoFocus
+                        color='error'
+                        sx={{ ml: 1 }}
+                        working={removeReviewSet.has(r.user.loginName)}
+                        onClick={() => handleAdminRemoveReviewButton(r)} >
+                        Remove review
+                    </ButtonWithProgress>
+                </DialogActions>
+            </Dialog>
+            </>;
+    };
+
     const renderReviewList = (list?: ExtensionReviewList): ReactNode => {
         if (!list) {
             return '';
@@ -101,37 +177,47 @@ export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsPro
 
     const renderReview = (r: ExtensionReview): ReactNode => {
         return <Fragment key={r.user.loginName + r.timestamp}>
-            <Box my={2}>
-                <Box display='flex'>
-                    {
-                        r.timestamp ?
-                        <>
-                            <Typography variant='body2'><Timestamp value={r.timestamp}/></Typography>
-                            <TextDivider />
-                        </>
-                        : null
-                    }
-                    <Typography variant='body2'>
+            <Box display='flex' justifyContent='space-between'>
+                <Box my={2}>
+                    <Box display='flex'>
                         {
-                            r.user.homepage ?
-                            <Link
-                                href={r.user.homepage}
-                                color='text.primary'
-                                underline='hover'
-                            >
-                                {r.user.loginName}
-                            </Link>
-                            :
-                            r.user.loginName
+                            r.timestamp ?
+                            <>
+                                <Typography variant='body2'><Timestamp value={r.timestamp}/></Typography>
+                                <TextDivider />
+                            </>
+                            : null
                         }
-                    </Typography>
-                </Box>
-                <Box display='flex' alignItems='center'>
-                    <ExportRatingStars number={r.rating} />
-                </Box>
-                <Box overflow='auto'>
-                    <Typography variant='body1' sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.comment}</Typography>
+                        <Typography variant='body2'>
+                            {
+                                r.user.homepage ?
+                                <Link
+                                    href={r.user.homepage}
+                                    color='text.primary'
+                                    underline='hover'
+                                >
+                                    {r.user.loginName}
+                                </Link>
+                                :
+                                r.user.loginName
+                            }
+                        </Typography>
+                    </Box>
+                    <Box display='flex' alignItems='center'>
+                        <ExtensionRatingStars number={r.rating} />
+                    </Box>
+                    <Box overflow='auto'>
+                        <Typography variant='body1' sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.comment}</Typography>
+                    </Box>
                 </Box>
+                {
+                    context.user?.role === 'admin' ?
+                        <Box mb={2} display='flex' alignItems='end'>
+                            {renderAdminRemoveButton(r)}
+                        </Box>
+                        :
+                        null
+                }
             </Box>
             <Divider />
         </Fragment>;

package/src/pages/extension-detail/extension-detail.tsx

@@ -24,7 +24,7 @@ import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { HoverPopover } from '../../components/hover-popover';
 import { Extension, UserData, isError } from '../../extension-registry-types';
 import { TextDivider } from '../../components/text-divider';
-import { ExportRatingStars } from './extension-rating-stars';
+import { ExtensionRatingStars } from './extension-rating-stars';
 import { NamespaceDetailRoutes } from '../namespace-detail/namespace-detail';
 import { ExtensionDetailOverview } from './extension-detail-overview';
 import { ExtensionDetailChanges } from './extension-detail-changes';
@@ -399,7 +399,7 @@ export const ExtensionDetail: FunctionComponent = () => {
                             `Average rating: ${getRoundedRating(extension.averageRating)} out of 5 (${extension.reviewCount} reviews)`
                             : 'Not rated yet'
                     }>
-                    <ExportRatingStars number={extension.averageRating ?? 0} fontSize='small' />
+                    <ExtensionRatingStars number={extension.averageRating ?? 0} fontSize='small' />
                     ({reviewCountFormatted})
                 </StyledLink>
                 </Box>