Feature 612. Create a separate view for dataset replicas

src/component-library/atoms/misc/ProgressBar.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/component-library/utils';
+
+interface ProgressBarProps {
+    className?: string;
+    percentage: number;
+}
+
+export default function ProgressBar({ className, percentage }: ProgressBarProps) {
+    const validPercentage = Math.min(Math.max(percentage, 0), 100);
+
+    const progressBarClasses = `rounded-full h-2.5 w-full bg-neutral-100 dark:bg-neutral-700 border border-neutral-900 border-opacity-10 dark:border-none`;
+    const progressClasses = `h-2.5 rounded-full bg-base-success-500 bg-opacity-80 dark:bg-opacity-60`;
+
+    return (
+        <div className={cn(progressBarClasses, className)}>
+            <div className={progressClasses} style={{ width: `${validPercentage}%` }} />
+        </div>
+    );
+}

src/component-library/outputtailwind.css

@@ -1330,6 +1330,10 @@ html {
   white-space: nowrap;
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .whitespace-normal {
   white-space: normal;
 }

src/component-library/pages/DID/details/DetailsDID.tsx

@@ -19,6 +19,7 @@ import { DetailsDIDParents } from '@/component-library/pages/DID/details/views/D
 import { DetailsDIDContents } from '@/component-library/pages/DID/details/views/DetailsDIDContents';
 import { DetailsDIDContentsReplicas } from '@/component-library/pages/DID/details/views/DetailsDIDContentsReplicas';
 import { WarningField } from '@/component-library/features/fields/WarningField';
+import { DetailsDIDDatasetReplicas } from './views/DetailsDIDDatasetReplicas';
 
 type DetailsDIDTablesProps = {
     scope: string;
@@ -30,6 +31,7 @@ export const DetailsDIDTables = ({ scope, name, type }: DetailsDIDTablesProps) =
     const allTabs: Map<string, DetailsDIDView> = new Map([
         ['Attributes', DetailsDIDAttributes],
         ['Replicas', DetailsDIDFileReplicas],
+        ['Dataset Replicas', DetailsDIDDatasetReplicas],
         ['Rules', DetailsDIDRules],
         ['Parents', DetailsDIDParents],
         ['Contents', DetailsDIDContents],
@@ -38,7 +40,7 @@ export const DetailsDIDTables = ({ scope, name, type }: DetailsDIDTablesProps) =
 
     const tabsByType: Record<DIDType, string[]> = {
         File: ['Replicas', 'Parents', 'Attributes'],
-        Dataset: ['Rules', 'Replicas', 'Contents Replicas', 'Attributes'],
+        Dataset: ['Rules', 'Dataset Replicas', 'Contents Replicas', 'Attributes'],
         Container: ['Contents', 'Rules', 'Attributes'],
         All: [],
         Collection: [],

src/component-library/pages/DID/details/views/DetailsDIDDatasetReplicas.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { DIDDatasetReplicasViewModel } from '@/lib/infrastructure/data/view-model/did';
+import { DetailsDIDView, DetailsDIDProps } from '@/component-library/pages/DID/details/views/DetailsDIDView';
+import useTableStreaming from '@/lib/infrastructure/hooks/useTableStreaming';
+import { StreamedTable } from '@/component-library/features/table/StreamedTable/StreamedTable';
+import { AgGridReact } from 'ag-grid-react';
+import { DefaultTextFilterParams } from '@/component-library/features/utils/filter-parameters';
+import ProgressBar from '@/component-library/atoms/misc/ProgressBar';
+import { ReplicaState } from '@/lib/core/entity/rucio';
+import { ReplicaStateBadge } from '@/component-library/features/badges/DID/ReplicaStateBadge';
+import { badgeCellClasses, badgeCellWrapperStyle } from '@/component-library/features/table/cells/badge-cell';
+import { ClickableCell } from '@/component-library/features/table/cells/ClickableCell';
+
+const ProgressBarCell = ({ data }: { data: DIDDatasetReplicasViewModel }) => {
+    let percentage: number = 0;
+    if (data.length > 0) {
+        percentage = (data.available_files / data.length) * 100;
+    }
+
+    const getPercentageText = () => {
+        const baseText = `${data.available_files} files out of ${data.length}`;
+        if (data.length === 0) {
+            return baseText;
+        }
+        return `${baseText} (${percentage.toFixed(2)}%)`;
+    };
+
+    return (
+        <div className="flex flex-col w-full h-full justify-center space-y-2">
+            <ProgressBar percentage={percentage} />
+            <span className="text-ellipsis text-sm text-neutral-900 dark:text-neutral-100">{getPercentageText()}</span>
+        </div>
+    );
+};
+
+const StateCell = ({ data, className }: { data: DIDDatasetReplicasViewModel; className: string }) => {
+    const state = data.availability ? ReplicaState.AVAILABLE : ReplicaState.UNAVAILABLE;
+    return <ReplicaStateBadge value={state} className={`${className} h-7`} />;
+};
+
+const ClickableRSE = (props: { value: string }) => {
+    return <ClickableCell href={`/rse/page/${props.value}`}>{props.value}</ClickableCell>;
+};
+
+export const DetailsDIDDatasetReplicas: DetailsDIDView = ({ scope, name }: DetailsDIDProps) => {
+    const { gridApi, onGridReady, streamingHook, startStreaming, stopStreaming } = useTableStreaming<DIDDatasetReplicasViewModel>();
+    const gridRef = useRef<AgGridReact>(null);
+
+    useEffect(() => {
+        if (gridApi) {
+            const url = '/api/feature/list-dataset-replicas?' + new URLSearchParams({ scope, name });
+            startStreaming(url);
+        }
+    }, [gridApi]);
+
+    const [columnDefs] = useState([
+        {
+            headerName: 'RSE',
+            field: 'rse',
+            flex: 3,
+            sortable: false,
+            cellRenderer: ClickableRSE,
+            filter: true,
+            filterParams: DefaultTextFilterParams,
+            cellStyle: {
+                ...badgeCellWrapperStyle,
+                alignItems: 'center',
+            },
+        },
+        {
+            headerName: 'State',
+            field: 'availability',
+            flex: 1,
+            cellStyle: {
+                ...badgeCellWrapperStyle,
+                alignItems: 'center',
+            },
+            cellRendererParams: {
+                className: badgeCellClasses,
+            },
+            cellRenderer: StateCell,
+        },
+        {
+            headerName: 'Replication Progress',
+            flex: 3,
+            cellRenderer: ProgressBarCell,
+            cellStyle: {
+                ...badgeCellWrapperStyle,
+                alignItems: 'center',
+            },
+        },
+    ]);
+
+    return <StreamedTable columnDefs={columnDefs} tableRef={gridRef} onGridReady={onGridReady} streamingHook={streamingHook} rowHeight={75} />;
+};

src/lib/core/entity/rucio.ts

@@ -57,6 +57,7 @@ export enum DIDAvailability {
 export type DIDDatasetReplicas = {
     rse: string;
     rseblocked: RSEBlockState;
+    length: number;
     availability: boolean;
     available_files: number;
     available_bytes: number;

src/lib/infrastructure/gateway/replica-gateway/replica-gateway-utils.ts

@@ -89,6 +89,7 @@ export function convertToDatasetReplicaDTO(replica: TRucioDatasetReplica): Datas
     const dto: DatasetReplicasDTO = {
         status: 'success',
         rse: replica.rse,
+        length: replica.length,
         availability: replica.state === 'AVAILABLE',
         available_files: replica.available_length,
         available_bytes: replica.available_bytes, // TODO: question: What is difference between available_bytes and bytes?

test/api/replica/list-dataset-replicas.test.ts

@@ -31,7 +31,7 @@ describe('List Dataset Replicas Feature Tests', () => {
                             rse: 'XRD3',
                             rse_id: '28e77f4f2c864f7d949eb602d6f05985',
                             bytes: 0,
-                            length: 0,
+                            length: 20,
                             available_bytes: 1000,
                             available_length: 10,
                             state: 'UNAVAILABLE',
@@ -86,6 +86,7 @@ describe('List Dataset Replicas Feature Tests', () => {
             rseblocked: 0,
             rse: 'XRD3',
             availability: false,
+            length: 20,
             available_files: 10,
             available_bytes: 1000,
             creation_date: 'Tue, 12 Sep 2023 09:12:11 UTC',

test/fixtures/table-fixtures.ts

@@ -360,6 +360,7 @@ export function fixtureDIDDatasetReplicasViewModel(): DIDDatasetReplicasViewMode
         availability: faker.datatype.boolean(),
         available_files: faker.number.int({ min: 0, max: 1e6 }),
         available_bytes: faker.number.int({ min: 0, max: 1e12 }),
+        length: faker.number.int({ min: 0, max: 1e6 }),
         creation_date: faker.date.past().toISOString(),
         last_accessed: faker.date.recent().toISOString(),
     };

test/gateway/replica/replica-gateway-list-dataset-replicas.test.ts

@@ -26,7 +26,7 @@ describe('Replica Gateway: List Dataset Replicas', () => {
                             rse: 'XRD3',
                             rse_id: '28e77f4f2c864f7d949eb602d6f05985',
                             bytes: 0,
-                            length: 0,
+                            length: 20,
                             available_bytes: 1000,
                             available_length: 10,
                             state: 'UNAVAILABLE',
@@ -76,6 +76,7 @@ describe('Replica Gateway: List Dataset Replicas', () => {
                 availability: false,
                 available_files: 10,
                 available_bytes: 1000,
+                length: 20,
                 creation_date: 'Tue, 12 Sep 2023 09:12:11 UTC',
                 last_accessed: '',
             } as DatasetReplicasDTO,