ydb-embedded-ui 4.9.0 → 4.10.1

package/dist/containers/Nodes/Nodes.scss

@@ -1,21 +1,10 @@
 @import '../../styles/mixins.scss';
 
 .ydb-nodes {
-    overflow: auto;
-    flex-grow: 1;
-
-    height: 100%;
-
-    @include flex-container();
-
     &__search {
         @include search();
     }
 
-    &__controls {
-        @include controls();
-    }
-
     &__show-all-wrapper {
         position: sticky;
         left: 0;
@@ -23,19 +12,7 @@
         margin-bottom: 15px;
     }
 
-    &__table-wrapper {
-        overflow: auto;
-        @include flex-container();
-    }
-
-    &__table-content {
-        overflow: auto;
-
-        height: 100%;
-
-        @include freeze-nth-column(1);
-        @include freeze-nth-column(2, 80px);
-
+    &__table {
         @include table-styles;
         @include table-sticky-styles;
     }

package/dist/containers/Nodes/Nodes.tsx

@@ -5,15 +5,16 @@ import {useDispatch} from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 
 import type {EPathType} from '../../types/api/schema';
-import type {ValueOf} from '../../types/common';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
-import {Loader} from '../../components/Loader';
 import {Search} from '../../components/Search';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {EntitiesCount} from '../../components/EntitiesCount';
+import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
 import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
@@ -21,12 +22,12 @@ import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '.
 
 import {
     getNodes,
-    getFilteredPreparedNodesList,
     setNodesUptimeFilter,
     setSearchValue,
     resetNodesState,
     getComputeNodes,
 } from '../../store/reducers/nodes/nodes';
+import {selectFilteredNodes} from '../../store/reducers/nodes/selectors';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';
@@ -42,11 +43,10 @@ const b = cn('ydb-nodes');
 interface NodesProps {
     path?: string;
     type?: EPathType;
-    className?: string;
     additionalNodesInfo?: AdditionalNodesInfo;
 }
 
-export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesProps) => {
+export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
     const dispatch = useDispatch();
 
     const isClusterNodes = !path;
@@ -63,7 +63,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
-    const nodes = useTypedSelector(getFilteredPreparedNodesList);
+    const nodes = useTypedSelector(selectFilteredNodes);
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 
@@ -84,7 +84,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
     };
 
     const handleProblemFilterChange = (value: string) => {
-        dispatch(changeFilter(value as ValueOf<typeof ProblemFilterValues>));
+        dispatch(changeFilter(value as ProblemFilterValue));
     };
 
     const handleUptimeFilterChange = (value: string) => {
@@ -93,7 +93,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
 
     const renderControls = () => {
         return (
-            <div className={b('controls')}>
+            <>
                 <Search
                     onChange={handleSearchQueryChange}
                     placeholder="Host name"
@@ -108,7 +108,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
                     label={'Nodes'}
                     loading={loading && !wasLoaded}
                 />
-            </div>
+            </>
         );
     };
 
@@ -127,44 +127,34 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
         }
 
         return (
-            <div className={b('table-wrapper')}>
-                <div className={b('table-content')}>
-                    <DataTable
-                        theme="yandex-cloud"
-                        data={nodes || []}
-                        columns={columns}
-                        settings={DEFAULT_TABLE_SETTINGS}
-                        initialSortOrder={{
-                            columnId: 'NodeId',
-                            order: DataTable.ASCENDING,
-                        }}
-                        emptyDataMessage={i18n('empty.default')}
-                        rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
-                    />
-                </div>
-            </div>
+            <DataTable
+                theme="yandex-cloud"
+                data={nodes || []}
+                columns={columns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                initialSortOrder={{
+                    columnId: 'NodeId',
+                    order: DataTable.ASCENDING,
+                }}
+                emptyDataMessage={i18n('empty.default')}
+                rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
+            />
         );
     };
 
-    const renderContent = () => {
-        return (
-            <div className={b(null, className)}>
-                {renderControls()}
-                {renderTable()}
-            </div>
-        );
-    };
-
-    if (loading && !wasLoaded) {
-        return <Loader size={isClusterNodes ? 'l' : 'm'} />;
-    }
-
     if (error) {
         if (error.status === 403) {
             return <AccessDenied />;
         }
-        return <div>{error.statusText}</div>;
+        return <ResponseError error={error} />;
     }
 
-    return renderContent();
+    return (
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            <TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
+                {renderTable()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
+    );
 };

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -5,9 +5,8 @@ import {InternalLink} from '../../../components/InternalLink';
 import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
-import {getVDisksForPDisk} from '../../../store/reducers/storage/storage';
+import {selectVDisksForPDisk} from '../../../store/reducers/storage/selectors';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
-import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
@@ -58,11 +57,7 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
     // NodeId in data is required for the popup
     const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
 
-    const vdisks: TVDiskStateInfo[] | undefined = useTypedSelector((state) =>
-        // @ts-expect-error selector is correct, but js infers broken type
-        // unignore after rewriting reducer in ts
-        getVDisksForPDisk(state, nodeId, data.PDiskId),
-    );
+    const vdisks = useTypedSelector((state) => selectVDisksForPDisk(state, nodeId, data.PDiskId));
 
     const [severity, setSeverity] = useState(getStateSeverity(data.State));
     const [isPopupVisible, setIsPopupVisible] = useState(false);

package/dist/containers/Storage/Storage.scss

@@ -1,24 +1,11 @@
 @import '../../styles/mixins.scss';
 
 .global-storage {
-    height: 100%;
-    max-height: 100%;
-    @include flex-container;
-
-    &__controls {
-        @include controls();
-    }
     &__search {
         @include search();
     }
 
-    &__table-wrapper {
-        overflow: auto;
-        flex-grow: 1;
-
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
-
+    &__table {
         .yc-tooltip {
             // stylelint-disable-next-line declaration-no-important
             height: var(--yc-text-body-2-line-height) !important;

package/dist/containers/Storage/Storage.tsx

@@ -0,0 +1,237 @@
+import {useCallback, useEffect} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Settings} from '@gravity-ui/react-data-table';
+
+import {Search} from '../../components/Search';
+import {UptimeFilter} from '../../components/UptimeFIlter';
+import {AccessDenied} from '../../components/Errors/403';
+import {EntitiesCount} from '../../components/EntitiesCount';
+import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {ResponseError} from '../../components/Errors/ResponseError';
+
+import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
+import {
+    getStorageInfo,
+    setInitialState,
+    setVisibleEntities,
+    setStorageTextFilter,
+    setUsageFilter,
+    setStorageType,
+    setNodesUptimeFilter,
+    setDataWasNotLoaded,
+} from '../../store/reducers/storage/storage';
+import {
+    selectFilteredGroups,
+    selectFilteredNodes,
+    selectStorageNodesCount,
+    selectStorageGroupsCount,
+    selectUsageFilterOptions,
+} from '../../store/reducers/storage/selectors';
+import {VISIBLE_ENTITIES, STORAGE_TYPES} from '../../store/reducers/storage/constants';
+import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {AdditionalNodesInfo, NodesUptimeFilterValues} from '../../utils/nodes';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+
+import {StorageGroups} from './StorageGroups/StorageGroups';
+import {StorageNodes} from './StorageNodes/StorageNodes';
+import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
+import {StorageVisibleEntitiesFilter} from './StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
+import {UsageFilter} from './UsageFilter';
+
+import './Storage.scss';
+
+const b = cn('global-storage');
+
+const tableSettings: Settings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    defaultOrder: DataTable.DESCENDING,
+};
+
+interface StorageProps {
+    additionalNodesInfo?: AdditionalNodesInfo;
+    tenant?: string;
+    nodeId?: string;
+}
+
+export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) => {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {
+        loading,
+        wasLoaded,
+        error,
+        type: storageType,
+        visible: visibleEntities,
+        filter,
+        usageFilter,
+        nodesUptimeFilter,
+    } = useTypedSelector((state) => state.storage);
+    const storageNodes = useTypedSelector(selectFilteredNodes);
+    const storageGroups = useTypedSelector(selectFilteredGroups);
+    const nodesCount = useTypedSelector(selectStorageNodesCount);
+    const groupsCount = useTypedSelector(selectStorageGroupsCount);
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const usageFilterOptions = useTypedSelector(selectUsageFilterOptions);
+
+    useEffect(() => {
+        dispatch(getNodesList());
+
+        return () => {
+            // Clean data on component unmount
+            dispatch(setInitialState());
+        };
+    }, [dispatch]);
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(
+                getStorageInfo(
+                    {
+                        tenant,
+                        nodeId,
+                        visibleEntities,
+                        type: storageType,
+                    },
+                    {
+                        concurrentId: 'getStorageInfo',
+                    },
+                ),
+            );
+        },
+        [dispatch, tenant, nodeId, visibleEntities, storageType],
+    );
+
+    const autorefreshEnabled = tenant ? autorefresh : true;
+
+    useAutofetcher(fetchData, [fetchData], autorefreshEnabled);
+
+    const handleUsageFilterChange = (value: string[]) => {
+        dispatch(setUsageFilter(value));
+    };
+
+    const handleTextFilterChange = (value: string) => {
+        dispatch(setStorageTextFilter(value));
+    };
+
+    const handleGroupVisibilityChange = (value: string) => {
+        dispatch(setVisibleEntities(value as VisibleEntities));
+    };
+
+    const handleStorageTypeChange = (value: string) => {
+        dispatch(setStorageType(value as StorageType));
+    };
+
+    const handleUptimeFilterChange = (value: string) => {
+        dispatch(setNodesUptimeFilter(value as NodesUptimeFilterValues));
+    };
+
+    const handleShowAllNodes = () => {
+        handleGroupVisibilityChange(VISIBLE_ENTITIES.all);
+        handleUptimeFilterChange(NodesUptimeFilterValues.All);
+    };
+
+    const renderDataTable = () => {
+        return (
+            <>
+                {storageType === STORAGE_TYPES.groups && (
+                    <StorageGroups
+                        visibleEntities={visibleEntities}
+                        data={storageGroups}
+                        tableSettings={tableSettings}
+                        nodes={nodesMap}
+                        onShowAll={() => handleGroupVisibilityChange(VISIBLE_ENTITIES.all)}
+                    />
+                )}
+                {storageType === STORAGE_TYPES.nodes && (
+                    <StorageNodes
+                        visibleEntities={visibleEntities}
+                        nodesUptimeFilter={nodesUptimeFilter}
+                        data={storageNodes}
+                        tableSettings={tableSettings}
+                        onShowAll={handleShowAllNodes}
+                        additionalNodesInfo={additionalNodesInfo}
+                    />
+                )}
+            </>
+        );
+    };
+
+    const renderEntitiesCount = () => {
+        const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
+        const count = storageType === STORAGE_TYPES.groups ? groupsCount : nodesCount;
+        const current =
+            storageType === STORAGE_TYPES.groups ? storageGroups.length : storageNodes.length;
+
+        return (
+            <EntitiesCount
+                label={entityName}
+                loading={loading && !wasLoaded}
+                total={count.total}
+                current={current}
+            />
+        );
+    };
+
+    const renderControls = () => {
+        return (
+            <>
+                <div className={b('search')}>
+                    <Search
+                        placeholder={
+                            storageType === STORAGE_TYPES.groups
+                                ? 'Group ID, Pool name'
+                                : 'Node ID, FQDN'
+                        }
+                        onChange={handleTextFilterChange}
+                        value={filter}
+                    />
+                </div>
+
+                <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+                <StorageVisibleEntitiesFilter
+                    value={visibleEntities}
+                    onChange={handleGroupVisibilityChange}
+                />
+
+                {storageType === STORAGE_TYPES.nodes && (
+                    <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
+                )}
+
+                {storageType === STORAGE_TYPES.groups && (
+                    <UsageFilter
+                        value={usageFilter}
+                        onChange={handleUsageFilterChange}
+                        groups={usageFilterOptions}
+                        disabled={usageFilterOptions.length === 0}
+                    />
+                )}
+                {renderEntitiesCount()}
+            </>
+        );
+    };
+
+    if (error) {
+        if (error.status === 403) {
+            return <AccessDenied />;
+        }
+
+        return <ResponseError error={error} />;
+    }
+
+    return (
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            <TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
+                {renderDataTable()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
+    );
+};

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,12 +1,10 @@
-import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import type {NodesMap} from '../../../types/store/nodesList';
-import type {TVDiskStateInfo} from '../../../types/api/vdisk';
-import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
@@ -43,8 +41,8 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageGroupsProps {
-    data: any;
-    nodes: NodesMap;
+    data: PreparedStorageGroup[];
+    nodes?: NodesMap;
     tableSettings: Settings;
     visibleEntities: VisibleEntities;
     onShowAll?: VoidFunction;
@@ -93,25 +91,25 @@ function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     }
 }
 
-function StorageGroups({
+export function StorageGroups({
     data,
     tableSettings,
     visibleEntities,
     nodes,
     onShowAll,
 }: StorageGroupsProps) {
-    const allColumns: Column<any>[] = [
+    const allColumns: Column<PreparedStorageGroup>[] = [
         {
             name: TableColumnsIds.PoolName,
             header: tableColumnsNames[TableColumnsIds.PoolName],
             width: 250,
-            render: ({value}) => {
-                const splitted = (value as string)?.split('/');
+            render: ({row}) => {
+                const splitted = row.PoolName?.split('/');
                 return (
                     <div className={b('pool-name-wrapper')}>
                         {splitted && (
                             <Popover
-                                content={value as string}
+                                content={row.PoolName}
                                 placement={['right']}
                                 behavior={PopoverBehavior.Immediate}
                             >
@@ -129,9 +127,9 @@ function StorageGroups({
             name: TableColumnsIds.Type,
             header: tableColumnsNames[TableColumnsIds.Type],
             // prettier-ignore
-            render: ({value, row}) => (
+            render: ({row}) => (
                 <>
-                    <Label>{(value as string) || '—'}</Label>
+                    <Label>{row.Type || '—'}</Label>
                     {' '}
                     {row.Encryption && (
                         <Popover
@@ -157,8 +155,12 @@ function StorageGroups({
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],
             width: 100,
-            render: ({value, row}) =>
-                value ? <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label> : '-',
+            render: ({row}) =>
+                row.Missing ? (
+                    <Label theme={getDegradedSeverity(row)}>Degraded: {row.Missing}</Label>
+                ) : (
+                    '-'
+                ),
             align: DataTable.LEFT,
             defaultOrder: DataTable.DESCENDING,
         },
@@ -189,8 +191,8 @@ function StorageGroups({
             name: TableColumnsIds.GroupID,
             header: tableColumnsNames[TableColumnsIds.GroupID],
             width: 130,
-            render: ({value}) => {
-                return <span className={b('group-id')}>{value as number}</span>;
+            render: ({row}) => {
+                return <span className={b('group-id')}>{row.GroupID}</span>;
             },
             align: DataTable.RIGHT,
         },
@@ -198,8 +200,8 @@ function StorageGroups({
             name: TableColumnsIds.Used,
             header: tableColumnsNames[TableColumnsIds.Used],
             width: 100,
-            render: ({value}) => {
-                return bytesToGB(value, true);
+            render: ({row}) => {
+                return bytesToGB(row.Used, true);
             },
             align: DataTable.RIGHT,
         },
@@ -207,8 +209,8 @@ function StorageGroups({
             name: TableColumnsIds.Limit,
             header: tableColumnsNames[TableColumnsIds.Limit],
             width: 100,
-            render: ({value}) => {
-                return bytesToGB(value);
+            render: ({row}) => {
+                return bytesToGB(row.Limit);
             },
             align: DataTable.RIGHT,
         },
@@ -216,15 +218,17 @@ function StorageGroups({
             name: TableColumnsIds.UsedSpaceFlag,
             header: tableColumnsNames[TableColumnsIds.UsedSpaceFlag],
             width: 110,
-            render: ({value}) => {
-                const val = value as number;
+            render: ({row}) => {
+                const value = row.UsedSpaceFlag;
+
                 let color = 'Red';
-                if (val < 100) {
+
+                if (value < 100) {
                     color = 'Green';
-                } else if (val < 10000) {
+                } else if (value < 10000) {
                     color = 'Yellow';
-                } else if (val < 1000000) {
-                    value = 'Orange';
+                } else if (value < 1000000) {
+                    color = 'Orange';
                 }
                 return <EntityStatus status={color} />;
             },
@@ -235,8 +239,8 @@ function StorageGroups({
             name: TableColumnsIds.Read,
             header: tableColumnsNames[TableColumnsIds.Read],
             width: 100,
-            render: ({value}) => {
-                return value ? bytesToSpeed(value) : '-';
+            render: ({row}) => {
+                return row.Read ? bytesToSpeed(row.Read) : '-';
             },
             align: DataTable.RIGHT,
         },
@@ -244,8 +248,8 @@ function StorageGroups({
             name: TableColumnsIds.Write,
             header: tableColumnsNames[TableColumnsIds.Write],
             width: 100,
-            render: ({value}) => {
-                return value ? bytesToSpeed(value) : '-';
+            render: ({row}) => {
+                return row.Write ? bytesToSpeed(row.Write) : '-';
             },
             align: DataTable.RIGHT,
         },
@@ -253,14 +257,17 @@ function StorageGroups({
             name: TableColumnsIds.VDisks,
             className: b('vdisks-column'),
             header: tableColumnsNames[TableColumnsIds.VDisks],
-            render: ({value}) => (
+            render: ({row}) => (
                 <div className={b('vdisks-wrapper')}>
-                    {_.map(value as TVDiskStateInfo[], (el) => {
-                        const donors = el.Donors;
+                    {row.VDisks?.map((vDisk) => {
+                        const donors = vDisk.Donors;
 
                         return donors && donors.length > 0 ? (
-                            <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk data={el} nodes={nodes} />
+                            <Stack
+                                className={b('vdisks-item')}
+                                key={stringifyVdiskId(vDisk.VDiskId)}
+                            >
+                                <VDisk data={vDisk} nodes={nodes} />
                                 {donors.map((donor) => {
                                     const isFullData = isFullVDiskData(donor);
 
@@ -277,8 +284,8 @@ function StorageGroups({
                                 })}
                             </Stack>
                         ) : (
-                            <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk data={el} nodes={nodes} />
+                            <div className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
+                                <VDisk data={vDisk} nodes={nodes} />
                             </div>
                         );
                     })}
@@ -330,7 +337,7 @@ function StorageGroups({
 
     return data ? (
         <DataTable
-            key={visibleEntities as string}
+            key={visibleEntities}
             theme="yandex-cloud"
             data={data}
             columns={columns}
@@ -340,5 +347,3 @@ function StorageGroups({
         />
     ) : null;
 }
-
-export default StorageGroups;