Skip to content

Commit

Permalink
chore(Chyt): add ability to select columns [YTFRONT-3863]
Browse files Browse the repository at this point in the history
  • Loading branch information
@ma-efremoff
ma-efremoff committed Nov 17, 2023
1 parent c764cde commit 8dd8d11
Show file tree
Hide file tree
Showing 11 changed files with 324 additions and 115 deletions.
13 changes: 11 additions & 2 deletions packages/ui/src/shared/constants/settings-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@ interface AccountsSettings {
'global::accounts::dashboardVisibilityMode': 'string';
}

interface ChytSettings {
'global::chyt::list_columns': Array<string>;
}

interface OtherSettings {
[key: string]: any;
}
Expand All @@ -82,9 +86,10 @@ export interface DefaultSettings {
A11Y: A11YSettings;
MENU: MenuSettings;
ACCOUNTS: AccountsSettings;
CHYT: ChytSettings;
}

export type Settings = GlobalSettings &
type DescribedSettings = GlobalSettings &
YsonSettings &
DevelopmentSettings &
SystemSettings &
Expand All @@ -93,4 +98,8 @@ export type Settings = GlobalSettings &
A11YSettings &
MenuSettings &
AccountsSettings &
OtherSettings;
ChytSettings;

export type Settings = DescribedSettings & OtherSettings;

export type SettingKey = keyof DescribedSettings;
5 changes: 5 additions & 0 deletions packages/ui/src/shared/constants/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,9 @@ export const SettingName = {
STAGE: 'queryTrackerStage',
YQL_AGENT_STAGE: 'yqlAgentStage',
},
CHYT: {
LIST_COLUMNS: 'list_columns',
},
} as const;

const GLOBAL = createNS('global');
Expand All @@ -132,6 +135,7 @@ const OPERATION_PRESETS = createNestedNS('presets', OPERATION);
const ACCOUNTS = createNestedNS('accounts', GLOBAL);
const SCHEDULING = createNestedNS('scheduling', GLOBAL);
const QUERY_TRACKER = createNestedNS('query-tracker', GLOBAL);
const CHYT = createNestedNS('chyt', GLOBAL);

export const NAMESPACES = {
GLOBAL,
Expand All @@ -151,6 +155,7 @@ export const NAMESPACES = {
ACCOUNTS,
SCHEDULING,
QUERY_TRACKER,
CHYT,
};

export const FAVOURITES = 'favourites';
235 changes: 163 additions & 72 deletions packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,19 @@ import Icon from '../../../components/Icon/Icon';
import Link from '../../../components/Link/Link';
import {OperationId} from '../../../components/OperationId/OperationId';
import {UserCard} from '../../../components/UserLink/UserLink';
import Label from '../../../components/Label/Label';

import {chytToggleSortState} from '../../../store/actions/chyt/list-fitlers';
import {getCluster} from '../../../store/selectors/global';
import {
getChytListColumns,
getChytListTableItems,
getChytListTableSortStateByName,
} from '../../../store/selectors/chyt';
import {ChytInfo} from '../../../store/reducers/chyt/list';
import {chytListAction} from '../../../store/actions/chyt/list';
import {Page} from '../../../../shared/constants/settings';
import {showErrorPopup} from '../../../utils/utils';

import {CliqueState} from '../components/CliqueState';

Expand All @@ -33,44 +36,11 @@ import './ChytPageListTable.scss';
const block = cn('chyt-page-list-table');

function useChytListColumns(cluster: string) {
const checkedColumns = useSelector(getChytListColumns).filter((i) => i.checked);

const columns: Array<Column<ChytInfo>> = React.useMemo(() => {
return [
{
name: 'name',
header: <ChytListHeader column="alias" title="CHYT clique alias" />,
render({row}) {
return (
<div>
<Link
url={`/${cluster}/${Page.CHYT}/${row.alias}`}
theme="primary"
routed
>
{row.alias}
</Link>
<div>
<OperationId
id={row.yt_operation_id}
cluster={cluster}
color="secondary"
/>
</div>
</div>
);
},
},
{
name: 'creator',
header: <ChytListHeader column="creator" title="Creator" />,
render({row}) {
return (
<span className={block('one-row-cell')}>
{!row.creator ? format.NO_VALUE : <UserCard userName={row.creator} />}
</span>
);
},
},
{
const columnsByName = {
instance_count: {
name: 'instance_count',
header: <ChytListHeader column="instance_count" title="Instances" />,
render({row}) {
Expand All @@ -84,8 +54,8 @@ function useChytListColumns(cluster: string) {
},
align: 'right',
width: 120,
},
{
} as Column<ChytInfo>,
total_cpu: {
name: 'cores',
header: <ChytListHeader column="total_cpu" title="Cores" />,
render({row}) {
Expand All @@ -99,8 +69,8 @@ function useChytListColumns(cluster: string) {
},
align: 'right',
width: 100,
},
{
} as Column<ChytInfo>,
total_memory: {
name: 'memory',
header: <ChytListHeader column="total_memory" title="Memory" />,
render({row}) {
Expand All @@ -114,48 +84,164 @@ function useChytListColumns(cluster: string) {
},
align: 'right',
width: 120,
},
{
name: 'State',
header: <ChytListHeader column="state" title="State" />,
} as Column<ChytInfo>,
health: {
name: 'health',
header: <ChytListHeader column="health" />,
render({row}) {
return (
<span className={block('one-row-cell')}>
<CliqueState state={row.state} />
<CliqueState state={row.health} />
</span>
);
},
align: 'center',
width: 100,
},
{
name: 'Health',
header: <ChytListHeader column="health" title="Health" />,
} as Column<ChytInfo>,
creation_time: {
name: 'creation_time',
header: <ChytListHeader column="creation_time" withUndefined />,
render({row}) {
const {creation_time} = row;
return (
<span className={block('one-row-cell')}>
<CliqueState state={row.health} />
{creation_time ? format.DateTime(creation_time) : format.NO_VALUE}
</span>
);
},
align: 'center',
width: 100,
},
{
name: 'creation_time',
width: 180,
} as Column<ChytInfo>,
speclet_modification_time: {
name: 'speclet_modification_time',
header: (
<ChytListHeader column="creation_time" title="Creation time" withUndefined />
<ChytListHeader column="speclet_modification_time" title="Modification time" />
),
render({row}) {
const {creation_time} = row;
const {speclet_modification_time: value} = row;
return (
<span className={block('one-row-cell')}>
{creation_time ? format.DateTime(creation_time) : format.NO_VALUE}
{value ? format.DateTime(value) : format.NO_VALUE}
</span>
);
},
} as Column<ChytInfo>,
stage: {
name: 'stage',
header: <ChytListHeader column="stage" />,
render({row}) {
return (
<span className={block('one-row-cell')}>{<Label text={row.stage} />}</span>
);
},
} as Column<ChytInfo>,
strawberry_state_modification_time: {
name: 'strawberry_state_modification_time',
header: (
<ChytListHeader
column="strawberry_state_modification_time"
title="Strawberrry modification time"
/>
),
render({row}) {
const {strawberry_state_modification_time: value} = row;
return (
<span className={block('one-row-cell')}>
{value ? format.DateTime(value) : format.NO_VALUE}
</span>
);
},
} as Column<ChytInfo>,
yt_operation_finish_time: {
name: 'yt_operation_finish_time',
header: (
<ChytListHeader
column="yt_operation_finish_time"
title="Finish time"
withUndefined
/>
),
render({row}) {
const {yt_operation_finish_time: value} = row;
return (
<span className={block('one-row-cell')}>
{value ? format.DateTime(value) : format.NO_VALUE}
</span>
);
},
width: 180,
},
} as Column<ChytInfo>,
yt_operation_start_time: {
name: 'yt_operation_start_time',
header: (
<ChytListHeader
column="yt_operation_start_time"
title="Start time"
withUndefined
/>
),
render({row}) {
const {yt_operation_start_time: value} = row;
return (
<span className={block('one-row-cell')}>
{value ? format.DateTime(value) : format.NO_VALUE}
</span>
);
},
width: 180,
} as Column<ChytInfo>,
};

const res = checkedColumns.map((i) => columnsByName[i.column]);
return [
{
name: 'alias',
header: <ChytListHeader column="alias" title="CHYT clique alias" />,
render({row}) {
return (
<div>
<Link
url={`/${cluster}/${Page.CHYT}/${row.alias}`}
theme="primary"
routed
>
{row.alias}
</Link>
<div>
<OperationId
id={row.yt_operation_id}
cluster={cluster}
color="secondary"
/>
</div>
</div>
);
},
} as Column<ChytInfo>,
{
name: 'creator',
header: <ChytListHeader column="creator" title="Creator" />,
render({row}) {
return (
<span className={block('one-row-cell')}>
{!row.creator ? format.NO_VALUE : <UserCard userName={row.creator} />}
</span>
);
},
} as Column<ChytInfo>,
{
name: 'state',
header: <ChytListHeader column="state" />,
render({row}) {
return (
<span className={block('one-row-cell')}>
<CliqueState state={row.state} />
</span>
);
},
align: 'center',
width: 100,
} as Column<ChytInfo>,
...res,
{
name: 'actions',
header: '',
Expand All @@ -168,9 +254,9 @@ function useChytListColumns(cluster: string) {
},
align: 'center',
width: 60,
},
} as Column<ChytInfo>,
];
}, [cluster]);
}, [cluster, checkedColumns]);

return columns;
}
Expand All @@ -181,7 +267,7 @@ function ChytListHeader({
withUndefined,
}: {
column: keyof ChytInfo;
title: string;
title?: string;
withUndefined?: boolean;
}) {
const dispatch = useDispatch();
Expand All @@ -191,7 +277,7 @@ function ChytListHeader({
allowUnordered
withUndefined={withUndefined}
column={column}
title={title}
title={title ?? format.ReadableField(column)}
sortable
{...sortState[column]}
toggleSort={(col, nextOrder, options) => {
Expand Down Expand Up @@ -233,14 +319,19 @@ function ChytCliqueActions({alias}: {alias: string}) {
];

return (
<DropdownMenu
switcher={
<Button view="flat">
<Icon awesome="ellipsis-h" />
</Button>
}
items={menuItems}
/>
<React.Fragment>
<Button view="flat" onClick={() => showErrorPopup(new Error('not implemented'))}>
<Icon awesome="sql" />
</Button>
<DropdownMenu
switcher={
<Button view="flat">
<Icon awesome="ellipsis-h" />
</Button>
}
items={menuItems}
/>
</React.Fragment>
);
}

Expand Down
Loading

0 comments on commit 8dd8d11

Please sign in to comment.