dstack 0.20.8__tar.gz → 0.20.9__tar.gz

{dstack-0.20.8 → dstack-0.20.9}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: dstack
-Version: 0.20.8
+Version: 0.20.9
 Summary: dstack is an open-source orchestration engine for running AI workloads on any cloud or on-premises.
 Project-URL: Homepage, https://dstack.ai
 Project-URL: Source, https://github.com/dstackai/dstack

{dstack-0.20.8 → dstack-0.20.9}/docs/docs/concepts/backends.md

@@ -853,7 +853,7 @@ Then, go ahead and configure the backend:
 projects:
   - name: main
     backends:
-      - type: datacrunch
+      - type: verda
         creds:
           type: api_key
           client_id: xfaHBqYEsArqhKWX-e52x3HH7w8T
@@ -1049,7 +1049,7 @@ projects:
       verbs: ["get", "create"]
     - apiGroups: [""]
       resources: ["pods"]
-      verbs: ["get", "create", "delete"]
+      verbs: ["get", "create", "delete", "list"]
     - apiGroups: [""]
       resources: ["services"]
       verbs: ["get", "create", "delete"]

{dstack-0.20.8 → dstack-0.20.9}/docs/docs/guides/protips.md

@@ -439,10 +439,10 @@ Getting offers...
 ---> 100%
 
  #   BACKEND     REGION     INSTANCE TYPE          RESOURCES                                     SPOT  PRICE   
- 1   datacrunch  FIN-01     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
- 2   datacrunch  FIN-02     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
- 3   datacrunch  FIN-02     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
- 4   datacrunch  ICE-01     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 1   verda       FIN-01     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 2   verda       FIN-02     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 3   verda       FIN-02     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 4   verda       ICE-01     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
  5   runpod      US-KS-2    NVIDIA H100 PCIe       16xCPU, 251GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.39   
  6   runpod      CA         NVIDIA H100 80GB HBM3  24xCPU, 251GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.69   
  7   nebius      eu-north1  gpu-h100-sxm           16xCPU, 200GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.95   

{dstack-0.20.8 → dstack-0.20.9}/docs/docs/reference/cli/dstack/offer.md

@@ -58,10 +58,10 @@ Getting offers...
 ---> 100%
 
  #   BACKEND     REGION     INSTANCE TYPE          RESOURCES                                     SPOT  PRICE   
- 1   datacrunch  FIN-01     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
- 2   datacrunch  FIN-02     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
- 3   datacrunch  FIN-02     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
- 4   datacrunch  ICE-01     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 1   verda       FIN-01     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 2   verda       FIN-02     1H100.80S.30V          30xCPU, 120GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 3   verda       FIN-02     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
+ 4   verda       ICE-01     1H100.80S.32V          32xCPU, 185GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.19   
  5   runpod      US-KS-2    NVIDIA H100 PCIe       16xCPU, 251GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.39   
  6   runpod      CA         NVIDIA H100 80GB HBM3  24xCPU, 251GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.69   
  7   nebius      eu-north1  gpu-h100-sxm           16xCPU, 200GB, 1xH100 (80GB), 100.0GB (disk)  no    $2.95   

{dstack-0.20.8 → dstack-0.20.9}/docs/docs/reference/dstack.yml/service.md

@@ -63,7 +63,7 @@ The `service` configuration type allows running [services](../../concepts/servic
         1. Doesn't work if your `chat_template` uses `bos_token`. As a workaround, replace `bos_token` inside `chat_template` with the token content itself.
         2. Doesn't work if `eos_token` is defined in the model repository as a dictionary. As a workaround, set `eos_token` manually, as shown in the example above (see Chat template).
 
-        If you encounter any other issues, please make sure to file a
+        If you encounter any ofther issues, please make sure to file a
         [GitHub issue](https://github.com/dstackai/dstack/issues/new/choose).
 
 ### `scaling`
@@ -127,6 +127,16 @@ The `service` configuration type allows running [services](../../concepts/servic
         required: true
 
 
+### `replicas`
+
+#### `replicas[n]`
+
+#SCHEMA# dstack._internal.core.models.configurations.ReplicaGroup
+    overrides:
+      show_root_heading: false
+      type:
+        required: true
+
 ### `retry`
 
 #SCHEMA# dstack._internal.core.models.profiles.ProfileRetry

{dstack-0.20.8 → dstack-0.20.9}/docs/docs/reference/server/config.yml.md

@@ -14,8 +14,6 @@ to configure [backends](../../concepts/backends.md) and other [server-level sett
 #SCHEMA# dstack._internal.server.services.config.ProjectConfig
     overrides:
         show_root_heading: false
-        backends:
-            type: 'Union[AWSBackendConfigWithCreds, AzureBackendConfigWithCreds, GCPBackendConfigWithCreds, HotAisleBackendConfigWithCreds, LambdaBackendConfigWithCreds, NebiusBackendConfigWithCreds, RunpodBackendConfigWithCreds, VastAIBackendConfigWithCreds, KubernetesConfig]'
 
 #### `projects[n].backends` { #backends data-toc-label="backends" }
 

{dstack-0.20.8 → dstack-0.20.9}/examples/models/wan22/README.md

@@ -103,10 +103,10 @@ cloud resources and run the configuration.
 ```shell
 $ dstack apply -f examples/models/wan22/.dstack.yml
 
- #  BACKEND              RESOURCES                                        INSTANCE TYPE   PRICE
- 1  datacrunch (FIN-01)  cpu=30 mem=120GB disk=200GB H100:80GB:1 (spot)   1H100.80S.30V   $0.99
- 2  datacrunch (FIN-01)  cpu=30 mem=120GB disk=200GB H100:80GB:1 (spot)   1H100.80S.30V   $0.99
- 3  datacrunch (FIN-02)  cpu=44 mem=182GB disk=200GB H200:141GB:1 (spot)  1H200.141S.44V  $0.99
+ #  BACKEND         RESOURCES                                        INSTANCE TYPE   PRICE
+ 1  verda (FIN-01)  cpu=30 mem=120GB disk=200GB H100:80GB:1 (spot)   1H100.80S.30V   $0.99
+ 2  verda (FIN-01)  cpu=30 mem=120GB disk=200GB H100:80GB:1 (spot)   1H100.80S.30V   $0.99
+ 3  verda (FIN-02)  cpu=44 mem=182GB disk=200GB H200:141GB:1 (spot)  1H200.141S.44V  $0.99
 
 ---> 100%
 
@@ -125,10 +125,10 @@ If you want you can override the default GPU, spot policy, and even the prompt v
 $ PROMPT=...
 $ dstack apply -f examples/models/wan22/.dstack.yml --spot --gpu H100,H200:8
 
- #  BACKEND              RESOURCES                                          INSTANCE TYPE    PRICE
- 1  aws (us-east-2)      cpu=192 mem=2048GB disk=300GB H100:80GB:8 (spot)   p5.48xlarge      $6.963
- 2  datacrunch (FIN-02)  cpu=176 mem=1480GB disk=300GB H100:80GB:8 (spot)   8H100.80S.176V   $7.93
- 3  datacrunch (ICE-01)  cpu=176 mem=1450GB disk=300GB H200:141GB:8 (spot)  8H200.141S.176V  $7.96
+ #  BACKEND          RESOURCES                                          INSTANCE TYPE    PRICE
+ 1  aws (us-east-2)  cpu=192 mem=2048GB disk=300GB H100:80GB:8 (spot)   p5.48xlarge      $6.963
+ 2  verda (FIN-02)   cpu=176 mem=1480GB disk=300GB H100:80GB:8 (spot)   8H100.80S.176V   $7.93
+ 3  verda (ICE-01)   cpu=176 mem=1450GB disk=300GB H200:141GB:8 (spot)  8H200.141S.176V  $7.96
  
 ---> 100%
 

{dstack-0.20.8 → dstack-0.20.9}/frontend/src/components/index.ts

@@ -66,6 +66,8 @@ export { default as ExpandableSection } from '@cloudscape-design/components/expa
 export { default as KeyValuePairs } from '@cloudscape-design/components/key-value-pairs';
 export { I18nProvider } from '@cloudscape-design/components/i18n';
 export { default as Wizard } from '@cloudscape-design/components/wizard';
+export { default as SegmentedControl } from '@cloudscape-design/components/segmented-control';
+export type { SegmentedControlProps } from '@cloudscape-design/components/segmented-control';
 
 // custom components
 export { NavigateLink } from './NavigateLink';

{dstack-0.20.8 → dstack-0.20.9}/frontend/src/locale/en.json

@@ -182,6 +182,7 @@
     "repositories": "Repositories",
     "runs": "Runs",
     "tags": "Tags",
+    "events": "Events",
     "settings": "Settings",
     "join": "Join",
     "leave_confirm_title": "Leave project",
@@ -697,6 +698,7 @@
     "account_settings": "User settings",
     "settings": "Settings",
     "projects": "Projects",
+    "events": "Events",
     "create": {
       "page_title": "Create user",
       "error_notification": "Create user error",

dstack-0.20.9/frontend/src/pages/Events/List/ListPage.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Button, Header, SpaceBetween } from 'components';
+
+import { useBreadcrumbs } from 'hooks';
+import { ROUTES } from 'routes';
+
+import { EventList } from './index';
+
+export const ListPage: React.FC = () => {
+    const { t } = useTranslation();
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.events'),
+            href: ROUTES.EVENTS.LIST,
+        },
+    ]);
+
+    return (
+        <EventList
+            variant="full-page"
+            withSearchParams
+            renderHeader={({ refreshAction, disabledRefresh }) => {
+                return (
+                    <Header
+                        variant="awsui-h1-sticky"
+                        actions={
+                            <SpaceBetween size="xs" direction="horizontal">
+                                <Button
+                                    iconName="refresh"
+                                    disabled={disabledRefresh}
+                                    ariaLabel={t('common.refresh')}
+                                    onClick={refreshAction}
+                                />
+                            </SpaceBetween>
+                        }
+                    >
+                        {t('navigation.events')}
+                    </Header>
+                );
+            }}
+        />
+    );
+};

dstack-0.20.9/frontend/src/pages/Events/List/hooks/useFilters.ts

@@ -0,0 +1,369 @@
+import { useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { omit } from 'lodash';
+
+import type { PropertyFilterProps } from 'components';
+
+import { EMPTY_QUERY, requestParamsToTokens, tokensToRequestParams, tokensToSearchParams } from 'libs/filters';
+import { useGetProjectsQuery } from 'services/project';
+import { useGetUserListQuery } from 'services/user';
+
+import { filterLastElementByPrefix } from '../helpers';
+
+type RequestParamsKeys = keyof TEventListFilters;
+
+const filterKeys: Record<string, RequestParamsKeys> = {
+    TARGET_PROJECTS: 'target_projects',
+    TARGET_USERS: 'target_users',
+    TARGET_FLEETS: 'target_fleets',
+    TARGET_INSTANCES: 'target_instances',
+    TARGET_RUNS: 'target_runs',
+    TARGET_JOBS: 'target_jobs',
+    TARGET_VOLUMES: 'target_volumes',
+    TARGET_GATEWAYS: 'target_gateways',
+    TARGET_SECRETS: 'target_secrets',
+    WITHIN_PROJECTS: 'within_projects',
+    WITHIN_FLEETS: 'within_fleets',
+    WITHIN_RUNS: 'within_runs',
+    INCLUDE_TARGET_TYPES: 'include_target_types',
+    ACTORS: 'actors',
+};
+
+const onlyOneFilterGroupPrefixes = ['target_', 'within_'];
+
+const multipleChoiseKeys: RequestParamsKeys[] = [
+    'target_projects',
+    'target_users',
+    'target_fleets',
+    'target_instances',
+    'target_runs',
+    'target_jobs',
+    'target_volumes',
+    'target_gateways',
+    'target_secrets',
+    'within_projects',
+    'within_fleets',
+    'within_runs',
+    'include_target_types',
+    'actors',
+];
+
+const targetTypes = [
+    { label: 'Project', value: 'project' },
+    { label: 'User', value: 'user' },
+    { label: 'Fleet', value: 'fleet' },
+    { label: 'Instance', value: 'instance' },
+    { label: 'Run', value: 'run' },
+    { label: 'Job', value: 'job' },
+    { label: 'Volume', value: 'volume' },
+    { label: 'Gateway', value: 'gateway' },
+    { label: 'Secret', value: 'secret' },
+];
+
+const baseFilteringProperties = [
+    {
+        key: filterKeys.TARGET_PROJECTS,
+        operators: ['='],
+        propertyLabel: 'Target projects',
+        groupValuesLabel: 'Project ids',
+    },
+    {
+        key: filterKeys.TARGET_USERS,
+        operators: ['='],
+        propertyLabel: 'Target users',
+        groupValuesLabel: 'Project ids',
+    },
+    {
+        key: filterKeys.TARGET_FLEETS,
+        operators: ['='],
+        propertyLabel: 'Target fleet IDs',
+    },
+    {
+        key: filterKeys.TARGET_INSTANCES,
+        operators: ['='],
+        propertyLabel: 'Target instance IDs',
+    },
+    {
+        key: filterKeys.TARGET_RUNS,
+        operators: ['='],
+        propertyLabel: 'Target run IDs',
+    },
+    {
+        key: filterKeys.TARGET_JOBS,
+        operators: ['='],
+        propertyLabel: 'Target job IDs',
+    },
+    {
+        key: filterKeys.TARGET_VOLUMES,
+        operators: ['='],
+        propertyLabel: 'Target volume IDs',
+    },
+    {
+        key: filterKeys.TARGET_GATEWAYS,
+        operators: ['='],
+        propertyLabel: 'Target gateway IDs',
+    },
+    {
+        key: filterKeys.TARGET_SECRETS,
+        operators: ['='],
+        propertyLabel: 'Target secret IDs',
+    },
+
+    {
+        key: filterKeys.WITHIN_PROJECTS,
+        operators: ['='],
+        propertyLabel: 'Within projects',
+        groupValuesLabel: 'Project ids',
+    },
+
+    {
+        key: filterKeys.WITHIN_FLEETS,
+        operators: ['='],
+        propertyLabel: 'Within fleet IDs',
+    },
+
+    {
+        key: filterKeys.WITHIN_RUNS,
+        operators: ['='],
+        propertyLabel: 'Within run IDs',
+    },
+
+    {
+        key: filterKeys.INCLUDE_TARGET_TYPES,
+        operators: ['='],
+        propertyLabel: 'Target types',
+        groupValuesLabel: 'Target type values',
+    },
+
+    {
+        key: filterKeys.ACTORS,
+        operators: ['='],
+        propertyLabel: 'Actors',
+    },
+];
+
+export const useFilters = ({
+    permanentFilters,
+    withSearchParams,
+}: {
+    permanentFilters?: Partial<TEventListFilters>;
+    withSearchParams?: boolean;
+}) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { data: projectsData, isLoading: isLoadingProjects } = useGetProjectsQuery({});
+    const { data: usersData, isLoading: isLoadingUsers } = useGetUserListQuery({});
+
+    const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
+        requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
+    );
+
+    const clearFilter = () => {
+        if (withSearchParams) {
+            setSearchParams({});
+        }
+        setPropertyFilterQuery(EMPTY_QUERY);
+    };
+
+    const filteringOptions = useMemo(() => {
+        const options: PropertyFilterProps.FilteringOption[] = [];
+
+        projectsData?.data?.forEach(({ project_name }) => {
+            options.push({
+                propertyKey: filterKeys.TARGET_PROJECTS,
+                value: project_name,
+            });
+
+            options.push({
+                propertyKey: filterKeys.WITHIN_PROJECTS,
+                value: project_name,
+            });
+        });
+
+        usersData?.data?.forEach(({ username }) => {
+            options.push({
+                propertyKey: filterKeys.TARGET_USERS,
+                value: username,
+            });
+
+            options.push({
+                propertyKey: filterKeys.ACTORS,
+                value: username,
+            });
+        });
+
+        targetTypes?.forEach((targetType) => {
+            options.push({
+                propertyKey: filterKeys.INCLUDE_TARGET_TYPES,
+                value: targetType.label,
+            });
+        });
+
+        return options;
+    }, [projectsData, usersData]);
+
+    const setSearchParamsHandle = ({ tokens }: { tokens: PropertyFilterProps.Query['tokens'] }) => {
+        const searchParams = tokensToSearchParams<RequestParamsKeys>(tokens);
+
+        setSearchParams(searchParams);
+    };
+
+    const onChangePropertyFilterHandle = ({ tokens, operation }: PropertyFilterProps.Query) => {
+        let filteredTokens = [...tokens];
+
+        onlyOneFilterGroupPrefixes.forEach((prefix) => {
+            try {
+                filteredTokens = filterLastElementByPrefix(filteredTokens, prefix);
+            } catch (_) {
+                console.error(_);
+            }
+        });
+
+        if (withSearchParams) {
+            setSearchParamsHandle({ tokens: filteredTokens });
+        }
+
+        setPropertyFilterQuery({
+            operation,
+            tokens: filteredTokens,
+        });
+    };
+
+    const onChangePropertyFilter: PropertyFilterProps['onChange'] = ({ detail }) => {
+        onChangePropertyFilterHandle(detail);
+    };
+
+    const filteringProperties = useMemo(() => {
+        const permanentFiltersKeysMap = new Map<string, string>();
+
+        for (const prefix of onlyOneFilterGroupPrefixes) {
+            const permanentFilterKey = Object.keys(permanentFilters ?? {}).find((filterKey) => filterKey.startsWith(prefix));
+
+            if (permanentFilterKey) {
+                permanentFiltersKeysMap.set(prefix, permanentFilterKey);
+            }
+        }
+
+        if (permanentFiltersKeysMap.size === 0) {
+            return baseFilteringProperties;
+        }
+
+        return baseFilteringProperties.filter(({ key }) => {
+            const propertyPrefix = onlyOneFilterGroupPrefixes.find((prefix) => key.startsWith(prefix));
+
+            if (!propertyPrefix) {
+                return true;
+            }
+
+            if (permanentFiltersKeysMap.has(propertyPrefix)) {
+                return key === permanentFiltersKeysMap.get(propertyPrefix);
+            }
+
+            return true;
+        });
+    }, [permanentFilters]);
+
+    const filteringRequestParams = useMemo(() => {
+        const params = tokensToRequestParams<RequestParamsKeys>({
+            tokens: propertyFilterQuery.tokens,
+            arrayFieldKeys: multipleChoiseKeys,
+        });
+
+        const filterParamsWithPermanentFitters = (filterKey: RequestParamsKeys): string[] => {
+            let paramsFilter = params[filterKey] ?? '';
+            const permanentFilter = permanentFilters?.[filterKey] ?? '';
+
+            if (!Array.isArray(paramsFilter) && typeof paramsFilter === 'object') {
+                paramsFilter = '';
+            }
+
+            if (Array.isArray(paramsFilter) && Array.isArray(permanentFilter)) {
+                return [...paramsFilter, ...permanentFilter];
+            }
+
+            if (Array.isArray(paramsFilter) && !Array.isArray(permanentFilter)) {
+                return [...paramsFilter, permanentFilter];
+            }
+
+            if (!Array.isArray(paramsFilter) && Array.isArray(permanentFilter)) {
+                return [paramsFilter, ...permanentFilter];
+            }
+
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            return [paramsFilter, permanentFilter];
+        };
+
+        const targetProjects = filterParamsWithPermanentFitters(filterKeys.TARGET_PROJECTS)
+            .map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
+            .filter(Boolean);
+
+        const withInProjects = filterParamsWithPermanentFitters(filterKeys.WITHIN_PROJECTS)
+            .map((name: string) => projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'])
+            .filter(Boolean);
+
+        const targetUsers = filterParamsWithPermanentFitters(filterKeys.TARGET_USERS)
+            .map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
+            .filter(Boolean);
+
+        const actors = filterParamsWithPermanentFitters(filterKeys.ACTORS)
+            .map((name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'])
+            .filter(Boolean);
+
+        const includeTargetTypes = filterParamsWithPermanentFitters(filterKeys.INCLUDE_TARGET_TYPES)
+            .map((selectedLabel: string) => targetTypes?.find(({ label }) => label === selectedLabel)?.['value'])
+            .filter(Boolean);
+
+        const mappedFields = {
+            ...(targetProjects?.length
+                ? {
+                      [filterKeys.TARGET_PROJECTS]: targetProjects,
+                  }
+                : {}),
+            ...(withInProjects?.length
+                ? {
+                      [filterKeys.WITHIN_PROJECTS]: withInProjects,
+                  }
+                : {}),
+
+            ...(targetUsers?.length
+                ? {
+                      [filterKeys.TARGET_USERS]: targetUsers,
+                  }
+                : {}),
+
+            ...(actors?.length
+                ? {
+                      [filterKeys.ACTORS]: actors,
+                  }
+                : {}),
+
+            ...(includeTargetTypes?.length
+                ? {
+                      [filterKeys.INCLUDE_TARGET_TYPES]: includeTargetTypes,
+                  }
+                : {}),
+        };
+
+        return {
+            ...omit(params, [
+                filterKeys.TARGET_PROJECTS,
+                filterKeys.WITHIN_PROJECTS,
+                filterKeys.TARGET_USERS,
+                filterKeys.ACTORS,
+                filterKeys.INCLUDE_TARGET_TYPES,
+            ]),
+            ...permanentFilters,
+            ...mappedFields,
+        } as TEventListFilters;
+    }, [propertyFilterQuery, usersData, projectsData, permanentFilters]);
+
+    return {
+        filteringRequestParams,
+        clearFilter,
+        propertyFilterQuery,
+        onChangePropertyFilter,
+        filteringOptions,
+        filteringProperties,
+        isLoadingFilters: isLoadingProjects || isLoadingUsers,
+    } as const;
+};

dstack-0.20.9/frontend/src/pages/Events/List/index.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Loader, PropertyFilter, Table } from 'components';
+import { TableProps } from 'components';
+
+import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
+import { useBreadcrumbs, useInfiniteScroll } from 'hooks';
+import { useCollection } from 'hooks';
+import { ROUTES } from 'routes';
+import { useLazyGetAllEventsQuery } from 'services/events';
+
+import { useColumnsDefinitions } from './hooks/useColumnDefinitions';
+import { useFilters } from './hooks/useFilters';
+
+import styles from '../../Runs/List/styles.module.scss';
+
+type RenderHeaderArgs = {
+    refreshAction?: () => void;
+    disabledRefresh?: boolean;
+};
+
+type EventListProps = Pick<TableProps, 'variant'> & {
+    withSearchParams?: boolean;
+    renderHeader?: (args: RenderHeaderArgs) => React.ReactNode;
+    permanentFilters?: Partial<TEventListFilters>;
+    showFilters?: boolean;
+};
+
+export const EventList: React.FC<EventListProps> = ({
+    withSearchParams,
+    permanentFilters,
+    renderHeader,
+    showFilters = true,
+    ...props
+}) => {
+    const { t } = useTranslation();
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.events'),
+            href: ROUTES.EVENTS.LIST,
+        },
+    ]);
+
+    const {
+        filteringRequestParams,
+        propertyFilterQuery,
+        onChangePropertyFilter,
+        filteringOptions,
+        filteringProperties,
+        isLoadingFilters,
+    } = useFilters({ permanentFilters, withSearchParams });
+
+    const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IEvent, TEventListRequestParams>({
+        useLazyQuery: useLazyGetAllEventsQuery,
+        args: { ...filteringRequestParams, limit: DEFAULT_TABLE_PAGE_SIZE },
+        skip: isLoadingFilters,
+
+        getPaginationParams: (lastEvent) => ({
+            prev_recorded_at: lastEvent.recorded_at,
+            prev_id: lastEvent.id,
+        }),
+    });
+
+    const { items, collectionProps } = useCollection<IEvent>(data, {
+        filtering: {
+            // empty: renderEmptyMessage(),
+            // noMatch: renderNoMatchMessage(),
+        },
+        selection: {},
+    });
+
+    const { columns } = useColumnsDefinitions();
+
+    const loading = isLoadingFilters || isLoading;
+
+    return (
+        <Table
+            {...props}
+            {...collectionProps}
+            columnDefinitions={columns}
+            items={items}
+            loading={loading}
+            loadingText={t('common.loading')}
+            stickyHeader={true}
+            header={renderHeader?.({ refreshAction: refreshList, disabledRefresh: loading })}
+            filter={
+                showFilters && (
+                    <div className={styles.selectFilters}>
+                        <div className={styles.propertyFilter}>
+                            <PropertyFilter
+                                query={propertyFilterQuery}
+                                onChange={onChangePropertyFilter}
+                                expandToViewport
+                                hideOperations
+                                i18nStrings={{
+                                    clearFiltersText: t('common.clearFilter'),
+                                    filteringAriaLabel: t('projects.run.filter_property_placeholder'),
+                                    filteringPlaceholder: t('projects.run.filter_property_placeholder'),
+                                    operationAndText: 'and',
+                                }}
+                                filteringOptions={filteringOptions}
+                                filteringProperties={filteringProperties}
+                            />
+                        </div>
+                    </div>
+                )
+            }
+            footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
+        />
+    );
+};

dstack-0.20.9/frontend/src/pages/Events/index.tsx

@@ -0,0 +1 @@
+export { ListPage as EventList } from './List/ListPage';