@ytsaurus/ui 0.0.3

package/src/ui/pages/accounts/tabs/detailed-usage/AccountUsageToolbar.scss

@@ -0,0 +1,55 @@
+.account-usage-toolbar {
+    &__spacer {
+        flex-grow: 1;
+    }
+
+    &__item {
+        min-width: 100px;
+    }
+
+    .textinput__control {
+        border-radius: 3px;
+    }
+
+    &__date-range,
+    &__snapshots {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+
+        .yc-select-control {
+            max-width: 180px;
+        }
+    }
+
+    &__snapshot-label {
+        color: var(--secondary-text);
+        padding-left: 1ex;
+        padding-right: 0.5ex;
+    }
+
+    &__date-range-control {
+        width: 180px;
+    }
+
+    &__date-range {
+        .yc-text-input__control {
+            border-right: 0px;
+            border-bottom-right-radius: 0px;
+            border-top-right-radius: 0px;
+        }
+
+        .yc-select-control {
+            border-bottom-left-radius: 0px;
+            border-top-left-radius: 0px;
+        }
+    }
+
+    &__owner-popup {
+        min-width: 200px;
+    }
+
+    &__owner-item {
+        white-space: nowrap;
+    }
+}

package/src/ui/pages/accounts/tabs/detailed-usage/AccountUsageToolbar.tsx

@@ -0,0 +1,529 @@
+import React from 'react';
+import _ from 'lodash';
+import moment from 'moment';
+import cn from 'bem-cn-lite';
+
+import {Breadcrumbs} from '@gravity-ui/uikit';
+
+import format from '../../../../common/hammer/format';
+import {useDispatch, useSelector} from 'react-redux';
+import {
+    fetchAccountsUsageSnapshots,
+    fetchAccountUsage,
+    setAccountUsageDataFilter,
+    setAccountUsageDataPageIndex,
+    setAccountUsageViewType,
+} from '../../../../store/actions/accounts/account-usage';
+import {getCluster} from '../../../../store/selectors/global';
+import Updater from '../../../../utils/hammer/updater';
+import {Toolbar} from '../../../../components/WithStickyToolbar/Toolbar/Toolbar';
+import Select from '../../../../components/Select/Select';
+import {
+    getAccountsUsageDiffFromSnapshot,
+    getAccountsUsageDiffToSnapshot,
+    getAccountUsageCurrentSnapshot,
+    getAccountUsageDateRangeFilter,
+    getAccountUsageDateRangeTypeFilter,
+    getAccountUsageOwnerFilter,
+    getAccountUsagePageCount,
+    getAccountUsagePageIndex,
+    getAccountUsagePathFilter,
+    getAccountUsageSnapshots,
+    getAccountUsageTreeItemsBasePathSplitted,
+    getAccountUsageViewType,
+    isAccountsUsageDiffView,
+} from '../../../../store/selectors/accounts/account-usage';
+import TextInputWithDebounce from '../../../../components/TextInputWithDebounce/TextInputWithDebounce';
+import {Secondary, SecondaryBold} from '../../../../components/Text/Text';
+import SimplePagination from '../../../../components/Pagination/SimplePagination';
+import Link from '../../../../components/Link/Link';
+import Icon from '../../../../components/Icon/Icon';
+import AccountUsageColumnsButton from './AccountUsageColumnsButton';
+import {UserCard} from '../../../../components/UserLink/UserLink';
+import Suggest, {SuggestItem} from '../../../../components/Suggest/Suggest';
+import {Datepicker, DatepickerOutputDates} from '../../../../components/common/Datepicker';
+import {PathFragment} from '../../../../containers/PathFragment/PathFragment';
+import {useAllUserNamesFiltered} from '../../../../hooks/global';
+
+import './AccountUsageToolbar.scss';
+
+const block = cn('account-usage-toolbar');
+
+const updater = new Updater();
+
+const UPDATER_ID = 'ACCOUNTS_DETAILED_USAGE_UPDATE_ID';
+
+function useFetchSnapshots() {
+    const dispatch = useDispatch();
+    const cluster = useSelector(getCluster);
+
+    React.useEffect(() => {
+        updater.add(
+            UPDATER_ID,
+            () => {
+                dispatch(fetchAccountsUsageSnapshots(cluster));
+            },
+            5 * 60000,
+        );
+        return () => {
+            updater.remove(UPDATER_ID);
+        };
+    }, [cluster]);
+}
+
+const SnapshotFilterMemo = React.memo(SnapshotFilter);
+const PathFilterMemo = React.memo(PathFilter);
+const OwnerFilterMemo = React.memo(OwnerFilter);
+const DateRangeFilterMemo = React.memo(DateRangeFilter);
+const DateRangeTypeFilterMemo = React.memo(DateRangeTypeFilter);
+const PaginationFilterMemo = React.memo(PaginationFilter);
+const ViewTypeMemo = React.memo(ViewType);
+const UsageBreadcrumbsMemo = React.memo(UsageBreadcrumbs);
+const SnapshotDiffFilterMemo = React.memo(SnapshotDiffFilter);
+
+function AccountUsageToolbar() {
+    const viewType = useSelector(getAccountUsageViewType);
+    const isDiffView = useSelector(isAccountsUsageDiffView);
+
+    return (
+        <div>
+            <Toolbar
+                className={block()}
+                itemsToWrap={[
+                    {
+                        name: 'page',
+                        node: <PaginationFilterMemo />,
+                    },
+                    {
+                        name: 'pathFilter',
+                        wrapperClassName: block('item'),
+                        node: <PathFilterMemo />,
+                        shrinkable: true,
+                    },
+                    {
+                        name: 'ownerFilter',
+                        wrapperClassName: block('item'),
+                        node: <OwnerFilterMemo />,
+                        shrinkable: true,
+                    },
+                    {
+                        name: 'dateRangeFilter',
+                        wrapperClassName: block('item'),
+                        node: <DateRangeFilterMemo />,
+                    },
+                    {
+                        name: 'columns',
+                        node: <AccountUsageColumnsButton />,
+                    },
+                    {
+                        name: 'viewType',
+                        node: <ViewTypeMemo />,
+                    },
+                    isDiffView
+                        ? {
+                              name: 'snapshots',
+                              wrapperClassName: block('item'),
+                              growable: true,
+                              node: <SnapshotDiffFilterMemo />,
+                          }
+                        : {
+                              name: 'snapshotsDiff',
+                              wrapperClassName: block('item'),
+                              growable: true,
+                              node: <SnapshotFilterMemo />,
+                          },
+                ]}
+            >
+                {(viewType === 'tree' || viewType === 'tree-diff') && (
+                    <Toolbar
+                        itemsToWrap={[
+                            {
+                                node: <UsageBreadcrumbsMemo />,
+                            },
+                        ]}
+                    />
+                )}
+            </Toolbar>
+        </div>
+    );
+}
+
+const UNDEFINED_SNAPSHOT = '_';
+
+function string2snapshot(v: string) {
+    return v === UNDEFINED_SNAPSHOT ? undefined : Number(v);
+}
+
+function snapshot2string(v?: number) {
+    return v === undefined ? UNDEFINED_SNAPSHOT : String(v);
+}
+
+function useSnapshotItems() {
+    const snapshots = useSelector(getAccountUsageSnapshots);
+
+    const items = React.useMemo(() => {
+        const res = _.map(_.reverse(snapshots.slice()), (item) => {
+            return {
+                value: snapshot2string(item),
+                text: moment(new Date(item * 1000)).format('YYYY-MM-DD HH:mm'),
+            };
+        });
+        res.splice(0, 0, {value: UNDEFINED_SNAPSHOT, text: 'Latest'});
+        return res;
+    }, [snapshots]);
+
+    return items;
+}
+
+function FromSnapshot() {
+    const dispatch = useDispatch();
+    const items = useSnapshotItems();
+    const value = useSelector(getAccountsUsageDiffFromSnapshot);
+
+    const handleChange = React.useCallback(
+        (value: string) => {
+            dispatch(
+                setAccountUsageDataFilter({
+                    diffFromSnapshot: string2snapshot(value),
+                }),
+            );
+        },
+        [dispatch],
+    );
+
+    return (
+        <Select
+            placeholder={'Snapthot...'}
+            items={items}
+            value={[snapshot2string(value)]}
+            onUpdate={(vals) => handleChange(vals[0])}
+            width={150}
+        />
+    );
+}
+
+function ToSnapshot() {
+    const dispatch = useDispatch();
+    const items = useSnapshotItems();
+    const value = useSelector(getAccountsUsageDiffToSnapshot);
+
+    const handleChange = React.useCallback(
+        (value: string) => {
+            dispatch(
+                setAccountUsageDataFilter({
+                    diffToSnapshot: string2snapshot(value),
+                }),
+            );
+        },
+        [dispatch],
+    );
+
+    return (
+        <Select
+            placeholder={'Snapthot...'}
+            items={items}
+            value={[snapshot2string(value)]}
+            onUpdate={(vals) => handleChange(vals[0])}
+            width={150}
+        />
+    );
+}
+
+function SnapshotDiffFilter() {
+    useFetchSnapshots();
+
+    return (
+        <span className={block('snapshots')}>
+            <span className={block('spacer')} />
+            <span className={block('snapshot-label')}>From</span>
+            <FromSnapshot />
+            <span className={block('snapshot-label')}>To</span>
+            <ToSnapshot />
+        </span>
+    );
+}
+
+function SnapshotFilter() {
+    const dispatch = useDispatch();
+    useFetchSnapshots();
+
+    const currentSnapshot = useSelector(getAccountUsageCurrentSnapshot);
+    const items = useSnapshotItems();
+
+    const handleSnapshotChange = React.useCallback(
+        (value: string) => {
+            dispatch(
+                setAccountUsageDataFilter({
+                    currentSnapshot: string2snapshot(value),
+                }),
+            );
+        },
+        [dispatch],
+    );
+
+    return (
+        <span className={block('snapshots')}>
+            <span className={block('spacer')} />
+            <SecondaryBold>Snapshot&nbsp;</SecondaryBold>
+            <Select
+                placeholder={'Snapshot...'}
+                value={[snapshot2string(currentSnapshot)]}
+                items={items}
+                onUpdate={(vals) => handleSnapshotChange(vals[0])}
+                width={150}
+            />
+        </span>
+    );
+}
+
+function PathFilter() {
+    const dispatch = useDispatch();
+
+    const filter = useSelector(getAccountUsagePathFilter);
+
+    const handleChange = React.useCallback(
+        (pathFilter: string) => {
+            dispatch(setAccountUsageDataFilter({pathFilter}));
+        },
+        [dispatch],
+    );
+
+    return (
+        <TextInputWithDebounce
+            debounce={500}
+            value={filter}
+            placeholder={'Path regexp...'}
+            onUpdate={handleChange}
+        />
+    );
+}
+
+function OwnerFilter() {
+    const dispatch = useDispatch();
+
+    const filter = useSelector(getAccountUsageOwnerFilter);
+
+    const handleChange = React.useCallback(
+        (item: SuggestItem) => {
+            const ownerFilter = 'string' === typeof item ? item : item.value;
+            dispatch(setAccountUsageDataFilter({ownerFilter}));
+        },
+        [dispatch],
+    );
+
+    const {getFiltered, allNames} = useAllUserNamesFiltered();
+
+    return (
+        <Suggest
+            text={filter}
+            items={allNames}
+            filter={(_items, filter = '') => getFiltered(filter)}
+            apply={handleChange}
+            placeholder={'Owner...'}
+            renderItem={(item) => (
+                <span className={block('owner-item')}>
+                    <UserCard userName={'string' === typeof item ? item : item.value} noLink />
+                </span>
+            )}
+            popupClassName={block('owner-popup')}
+        />
+    );
+}
+
+function DateRangeFilter() {
+    const dispatch = useDispatch();
+
+    const {from, to} = useSelector(getAccountUsageDateRangeFilter);
+    const type = useSelector(getAccountUsageDateRangeTypeFilter);
+
+    const handleChange = React.useCallback(
+        (dateRange: DatepickerOutputDates) => {
+            dispatch(setAccountUsageDataFilter({dateRange}));
+        },
+        [dispatch],
+    );
+
+    return (
+        <span className={block('date-range')}>
+            <Datepicker
+                from={from}
+                to={to}
+                min={0}
+                max={Date.now() + 3600 * 24 * 1000}
+                range={true}
+                allowNullableValues={true}
+                onUpdate={handleChange}
+                className={block('date-range-control')}
+                onError={() => {}}
+                placeholder={format.Readable(type) + ' range...'}
+            />
+            <DateRangeTypeFilterMemo />
+        </span>
+    );
+}
+
+function DateRangeTypeFilter() {
+    const dispatch = useDispatch();
+
+    const value = useSelector(getAccountUsageDateRangeTypeFilter);
+    const handleChange = React.useCallback(
+        (dateRangeType: any) => {
+            dispatch(setAccountUsageDataFilter({dateRangeType}));
+        },
+        [dispatch],
+    );
+
+    return (
+        <Select
+            value={[value]}
+            onUpdate={(vals) => handleChange(vals[0])}
+            items={[
+                {value: 'creation_time', text: 'Creation'},
+                {value: 'modification_time', text: 'Modification'},
+            ]}
+            width={135}
+        />
+    );
+}
+
+function PaginationFilter() {
+    const dispatch = useDispatch();
+
+    const value = useSelector(getAccountUsagePageIndex);
+    const pageCount = useSelector(getAccountUsagePageCount);
+
+    const handleChange = React.useCallback(
+        (pageIndex: number) => {
+            dispatch(setAccountUsageDataPageIndex(pageIndex));
+        },
+        [dispatch],
+    );
+
+    return (
+        <SimplePagination
+            value={value}
+            min={0}
+            max={Math.max(0, pageCount - 1)}
+            onChange={handleChange}
+        />
+    );
+}
+
+const VIEW_TYPE_ITEMS = [
+    {
+        value: 'tree' as const,
+        text: 'Tree',
+        icon: <Icon awesome={'folder-tree'} face={'solid'} />,
+    },
+    {
+        value: 'list' as const,
+        text: 'List',
+        icon: <Icon awesome={'list'} />,
+    },
+    {
+        value: 'list-plus-folders' as const,
+        text: 'List + folders',
+        icon: <Icon awesome={'folders'} />,
+    },
+    {
+        value: 'tree-diff' as const,
+        text: 'Diff: Tree',
+        content: <DiffTitle title={'Tree'} />,
+        icon: <Icon awesome={'folder-tree'} face={'solid'} />,
+    },
+    {
+        value: 'list-diff' as const,
+        text: 'Diff: List',
+        content: <DiffTitle title={'List'} />,
+        icon: <Icon awesome={'list'} />,
+    },
+    {
+        value: 'list-plus-folders-diff' as const,
+        text: 'Diff: List + folders',
+        content: <DiffTitle title={'List + folders'} />,
+        icon: <Icon awesome={'folders'} />,
+    },
+];
+
+function DiffTitle({title}: {title: string}) {
+    return (
+        <React.Fragment>
+            <Secondary>Diff: </Secondary>
+            {title}
+        </React.Fragment>
+    );
+}
+
+function ViewType() {
+    const dispatch = useDispatch();
+
+    const value = useSelector(getAccountUsageViewType);
+    const handleChange = React.useCallback(
+        (value: string) => {
+            dispatch(setAccountUsageViewType(value as any));
+        },
+        [dispatch],
+    );
+
+    return (
+        <Select
+            value={[value]}
+            items={VIEW_TYPE_ITEMS}
+            onUpdate={(vals) => handleChange(vals[0])}
+            width="max"
+        />
+    );
+}
+
+export function UsageBreadcrumbs() {
+    const dispatch = useDispatch();
+    const pathArr = useSelector(getAccountUsageTreeItemsBasePathSplitted);
+
+    const items = React.useMemo(() => {
+        return _.map(pathArr, (item) => {
+            return {
+                text: item.item,
+                value: item.value,
+                action: () => {
+                    dispatch(fetchAccountUsage());
+                },
+            };
+        });
+    }, [pathArr, dispatch]);
+
+    return (
+        <Breadcrumbs
+            items={items}
+            firstDisplayedItemsCount={1}
+            lastDisplayedItemsCount={1}
+            renderRootContent={() => {
+                return (
+                    <Link
+                        theme={'primary'}
+                        url={`${window.location.pathname}?path=/`}
+                        routed={true}
+                        routedPreserveLocation={true}
+                    >
+                        <Secondary>
+                            <Icon awesome={'folder-tree'} />
+                        </Secondary>
+                    </Link>
+                );
+            }}
+            renderItemContent={(item) => {
+                return (
+                    <Link
+                        theme={'primary'}
+                        url={`${window.location.pathname}?path=${(item as any).value}`}
+                        routed={true}
+                        routedPreserveLocation={true}
+                    >
+                        <PathFragment name={item.text} />
+                    </Link>
+                );
+            }}
+        />
+    );
+}
+
+export default React.memo(AccountUsageToolbar);

package/src/ui/pages/accounts/tabs/general/AccountAlerts.scss

@@ -0,0 +1,6 @@
+.yt-account-alerts {
+    &__tooltip-title {
+        font-weight: var(--yt-font-weight-bold);
+        padding-bottom: 10px;
+    }
+}

package/src/ui/pages/accounts/tabs/general/AccountAlerts.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import _ from 'lodash';
+import cn from 'bem-cn-lite';
+
+import format from '../../../../common/hammer/format';
+
+import MetaTable from '../../../../components/MetaTable/MetaTable';
+import {AccountParsedData, visitResourceFields} from '../../../../utils/accounts/accounts-selector';
+import './AccountAlerts.scss';
+
+const block = cn('yt-account-alerts');
+
+interface Props {
+    account: AccountParsedData;
+}
+
+function AccountAlerts({account}: Props) {
+    const alerts: Record<string, number> = {};
+
+    visitResourceFields(account?.$attributes?.recursive_violated_resource_limits, (value, path) => {
+        if (value > 0) {
+            alerts[path] = value;
+        }
+    });
+
+    return (
+        <React.Fragment>
+            <div className={block('tooltip-title')}>
+                Limits of the following resources are violated
+                <br /> by the account or its children:
+            </div>
+            <MetaTable
+                items={_.map(alerts, (value, path) => {
+                    return {
+                        key: path,
+                        label: readablePath(path),
+                        value: <>{value}</>,
+                    };
+                })}
+            />
+        </React.Fragment>
+    );
+}
+
+export default React.memo(AccountAlerts);
+
+function readablePath(path: string) {
+    return path.split('/').map(format.ReadableField).join(' / ');
+}

package/src/ui/pages/accounts/tabs/general/AccountStaticConfiguration/AccountStaticConfiguration.scss

@@ -0,0 +1,16 @@
+.account-static-configuration {
+    &__table {
+        margin-top: -20px;
+        display: inline-block;
+    }
+
+    &__row {
+        &_level_1 {
+            color: var(--secondary-text);
+
+            td:first-child {
+                padding-left: 4ex;
+            }
+        }
+    }
+}