Skip to content

Commit 028aa8d

Browse files
ariserariser
committed
fix(Storage): encouraging message for empty filtered lists
1 parent d41dcc6 commit 028aa8d

File tree

16 files changed

+152
-15
lines changed

16 files changed

+152
-15
lines changed

‎src/components/EmptyState/EmptyState.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
grid-template-areas:
1111
'image title'
1212
'image description'
13-
'image description'
1413
'image actions';
1514
&_size_s {
1615
width: 460px;

‎src/containers/App/App.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,12 @@ body,
130130
}
131131

132132
.no-problem {
133-
min-width: 325px;
133+
width: 200px;
134134
height: 200px;
135135

136136
background-image: url('data: image/svg+xml,%3Csvg%20width%3D%22520%22%20height%3D%22520%22%20viewBox%3D%220%200%20520%20520%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20opacity%3D%220.1%22%20d%3D%22M228.637%20445C217.178%20445.049%20206.065%20441.074%20197.233%20433.768L28.4227%20288.499C24.7711%20285.319%2022.4943%20280.846%2022.0715%20276.02C21.6487%20271.195%2023.1128%20266.393%2026.1557%20262.626L65.3512%20214.612C66.9235%20212.684%2068.8667%20211.091%2071.0657%20209.927C73.2646%20208.764%2075.6745%20208.055%2078.1525%20207.841C80.6305%20207.627%2083.1263%20207.913%2085.4917%20208.682C87.8572%20209.452%2090.0443%20210.688%2091.9234%20212.319L223.682%20326.793L435.516%2094.088C438.811%2090.4596%20443.405%2088.2807%20448.298%2088.0253C453.191%2087.7699%20457.987%2089.4587%20461.642%2092.7243L507.824%20134.205C509.647%20135.841%20511.129%20137.821%20512.184%20140.032C513.24%20142.243%20513.849%20144.64%20513.975%20147.087C514.102%20149.534%20513.744%20151.982%20512.922%20154.29C512.101%20156.598%20510.831%20158.721%20509.187%20160.536L265.553%20428.549C260.881%20433.709%20255.185%20437.838%20248.829%20440.671C242.472%20443.503%20235.595%20444.978%20228.637%20445Z%22%20fill%3D%22%23509CF5%22%2F%3E%0A%3Cpath%20d%3D%22M412.933%20102.332H294.933C289.433%20102.332%20284.933%20106.832%20284.933%20112.332V315.432C284.933%20320.932%20289.433%20325.432%20294.933%20325.432H446.433C451.933%20325.432%20456.433%20320.932%20456.433%20315.432V133.732L429.933%20107.332%22%20stroke%3D%22%2300E6C5%22%20stroke-opacity%3D%220.8%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-dasharray%3D%224.01%2010.02%22%2F%3E%0A%3Cpath%20d%3D%22M425.033%20102.332V104.332%22%20stroke%3D%22%2300E6C5%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M425.033%20115.031V126.331C425.033%20130.431%20428.333%20133.731%20432.433%20133.731H449.033%22%20stroke%3D%22%2300E6C5%22%20stroke-opacity%3D%220.8%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-dasharray%3D%224.27%2010.68%22%2F%3E%0A%3Cpath%20d%3D%22M454.333%20133.73H456.333%22%20stroke%3D%22%2300E6C5%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M77%20397.052L89.1%20409L110%20388%22%20stroke%3D%22%2300E6C5%22%20stroke-opacity%3D%220.8%22%20stroke-width%3D%224.84211%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M125%20398C125%20416.775%20109.775%20432%2091%20432C72.2252%20432%2057%20416.775%2057%20398C57%20379.225%2072.2252%20364%2091%20364C109.775%20364%20125%20379.225%20125%20398Z%22%20stroke%3D%22%2300E6C5%22%20stroke-opacity%3D%220.8%22%20stroke-width%3D%224.84211%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-dasharray%3D%224.84%2012.11%22%2F%3E%0A%3Cpath%20d%3D%22M147.5%20119C147.5%20117.895%20146.605%20117%20145.5%20117C144.395%20117%20143.5%20117.895%20143.5%20119H147.5ZM143.5%20129.8C143.5%20130.905%20144.395%20131.8%20145.5%20131.8C146.605%20131.8%20147.5%20130.905%20147.5%20129.8H143.5ZM147.5%20152.5C147.5%20151.395%20146.605%20150.5%20145.5%20150.5C144.395%20150.5%20143.5%20151.395%20143.5%20152.5H147.5ZM143.5%20164.2C143.5%20165.305%20144.395%20166.2%20145.5%20166.2C146.605%20166.2%20147.5%20165.305%20147.5%20164.2H143.5ZM168.1%20143.602C169.205%20143.602%20170.1%20142.706%20170.1%20141.602C170.1%20140.497%20169.205%20139.602%20168.1%20139.602V143.602ZM157.2%20139.602C156.096%20139.602%20155.2%20140.497%20155.2%20141.602C155.2%20142.706%20156.096%20143.602%20157.2%20143.602V139.602ZM133.7%20143.602C134.805%20143.602%20135.7%20142.706%20135.7%20141.602C135.7%20140.497%20134.805%20139.602%20133.7%20139.602V143.602ZM122.9%20139.602C121.795%20139.602%20120.9%20140.497%20120.9%20141.602C120.9%20142.706%20121.795%20143.602%20122.9%20143.602V139.602ZM143.5%20119V129.8H147.5V119H143.5ZM143.5%20152.5V164.2H147.5V152.5H143.5ZM168.1%20139.602H157.2V143.602H168.1V139.602ZM133.7%20139.602H122.9V143.602H133.7V139.602Z%22%20fill%3D%22%232EE5C0%22%20fill-opacity%3D%220.8%22%2F%3E%0A%3Cpath%20d%3D%22M406.3%20397.5C406.3%20396.395%20405.405%20395.5%20404.3%20395.5C403.195%20395.5%20402.3%20396.395%20402.3%20397.5H406.3ZM402.3%20403.1C402.3%20404.205%20403.195%20405.1%20404.3%20405.1C405.405%20405.1%20406.3%20404.205%20406.3%20403.1H402.3ZM406.3%20414.898C406.3%20413.794%20405.405%20412.898%20404.3%20412.898C403.195%20412.898%20402.3%20413.794%20402.3%20414.898H406.3ZM402.3%20420.998C402.3%20422.103%20403.195%20422.998%20404.3%20422.998C405.405%20422.998%20406.3%20422.103%20406.3%20420.998H402.3ZM416.1%20411.2C417.205%20411.2%20418.1%20410.305%20418.1%20409.2C418.1%20408.095%20417.205%20407.2%20416.1%20407.2V411.2ZM410.4%20407.2C409.295%20407.2%20408.4%20408.095%20408.4%20409.2C408.4%20410.305%20409.295%20411.2%20410.4%20411.2V407.2ZM398.2%20411.2C399.305%20411.2%20400.2%20410.305%20400.2%20409.2C400.2%20408.095%20399.305%20407.2%20398.2%20407.2V411.2ZM392.5%20407.2C391.395%20407.2%20390.5%20408.095%20390.5%20409.2C390.5%20410.305%20391.395%20411.2%20392.5%20411.2V407.2ZM402.3%20397.5V403.1H406.3V397.5H402.3ZM402.3%20414.898V420.998H406.3V414.898H402.3ZM416.1%20407.2H410.4V411.2H416.1V407.2ZM398.2%20407.2H392.5V411.2H398.2V407.2Z%22%20fill%3D%22%232EE5C0%22%20fill-opacity%3D%220.8%22%2F%3E%0A%3Cpath%20d%3D%22M186%20385.667V394.833C186%20397.264%20185.012%20399.596%20183.254%20401.315C181.496%20403.034%20179.111%20404%20176.625%20404H121C115.477%20404%20111%20399.523%20111%20394V249C111%20243.477%20115.477%20239%20121%20239H176.625C179.111%20239%20181.496%20239.966%20183.254%20241.685C185.012%20243.404%20186%20245.736%20186%20248.167V385.667Z%22%20fill%3D%22%230067C1%22%2F%3E%0A%3Cpath%20d%3D%22M177.143%20375.273V384.637C177.143%20387.12%20176.153%20389.501%20174.392%20391.257C172.63%20393.013%20170.241%20394%20167.75%20394H112C106.477%20394%20102%20389.522%20102%20384V235.465C102%20229.942%20106.477%20225.465%20112%20225.465H167.75C170.241%20225.465%20172.63%20226.451%20174.392%20228.207C176.153%20229.963%20177.143%20232.345%20177.143%20234.828V375.273Z%22%20fill%3D%22%23007CE9%22%2F%3E%0A%3Cpath%20d%3D%22M292.385%20235.185C291.545%20236.543%20292.529%20238.321%20294.126%20238.321H375.327C379.067%20238.242%20382.784%20238.917%20386.255%20240.305C389.726%20241.693%20392.879%20243.765%20395.524%20246.398C398.169%20249.031%20400.252%20252.169%20401.646%20255.623C403.041%20259.078%20403.718%20262.778%20403.639%20266.5C403.639%20294.679%20394.201%20398%20356.452%20398H242.081C230.712%20398%20219.806%20393.497%20211.748%20385.477L206.04%20379.797C205.665%20379.424%20205.158%20379.214%20204.629%20379.214H191.299H179.143C178.038%20379.214%20177.143%20378.319%20177.143%20377.214V239.495C177.143%20238.847%20177.668%20238.321%20178.317%20238.321C195.697%20238.321%20212.371%20231.438%20224.69%20219.177L233.949%20209.961C240.092%20203.848%20245.391%20196.942%20249.705%20189.426L267.012%20159.283C275.636%20144.262%20293.887%20133.185%20306.212%20145.354C312.929%20151.987%20316.741%20160.994%20316.815%20170.411C316.815%20171.538%20316.721%20172.665%20316.626%20173.886C314.302%20197.951%20298.104%20225.943%20292.385%20235.185Z%22%20fill%3D%22%23FFCC00%22%2F%3E%0A%3Cpath%20d%3D%22M356.457%20369.801H237.651C229.12%20369.801%20220.937%20366.421%20214.893%20360.401C208.849%20354.381%20200.666%20351.001%20192.135%20351.001H177.143V379.2H192.135C200.666%20379.2%20208.849%20382.58%20214.893%20388.6C220.937%20394.62%20229.12%20398%20237.651%20398H356.457C394.207%20398%20403.645%20294.601%20403.645%20266.402C403.645%20263.723%20403.328%20261.054%20402.701%20258.449C399.568%20298.831%20387.743%20369.801%20356.457%20369.801Z%22%20fill%3D%22%23DEB700%22%2F%3E%0A%3C%2Fsvg%3E%0A');
137137
background-repeat: no-repeat;
138-
background-position: left;
138+
background-position: top center;
139139
background-size: contain;
140140
}
141141

‎src/containers/Storage/EmptyFilter/EmptyFilter.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import {Button} from "@gravity-ui/uikit";
2+
3+
import EmptyState from "../../../components/EmptyState/EmptyState";
4+
5+
import i18n from './i18n';
6+
7+
interface EmptyFilterProps {
8+
title: string;
9+
message?: string;
10+
showAll?: string;
11+
onShowAll?: VoidFunction;
12+
}
13+
14+
export const EmptyFilter = ({
15+
title,
16+
message = i18n('default_message'),
17+
showAll = i18n('default_button_label'),
18+
onShowAll,
19+
}: EmptyFilterProps) => (
20+
<EmptyState
21+
image={<div className="no-problem" />}
22+
title={title}
23+
description={message}
24+
actions={onShowAll && [
25+
<Button
26+
key="show-all"
27+
onClick={onShowAll}
28+
>
29+
{showAll}
30+
</Button>
31+
]}
32+
/>
33+
);

‎src/containers/Storage/EmptyFilter/i18n/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"default_message": "Everything is fine!",
3+
"default_button_label": "Show All"
4+
}

‎src/containers/Storage/EmptyFilter/i18n/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {i18n, Lang} from '../../../../utils/i18n';
2+
3+
import en from './en.json';
4+
import ru from './ru.json';
5+
6+
const COMPONENT = 'ydb-storage-empty-filter';
7+
8+
i18n.registerKeyset(Lang.En, COMPONENT, en);
9+
i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
10+
11+
export default i18n.keyset(COMPONENT);

‎src/containers/Storage/EmptyFilter/i18n/ru.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"default_message": "Всё в порядке!",
3+
"default_button_label": "Показать все"
4+
}

‎src/containers/Storage/Storage.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,13 +186,15 @@ class Storage extends React.Component {
186186
data={flatListStorageEntities}
187187
tableSettings={tableSettings}
188188
nodes={nodes}
189+
onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
189190
/>
190191
)}
191192
{storageType === StorageTypes.nodes && (
192193
<StorageNodes
193194
visibleEntities={visibleEntities}
194195
data={flatListStorageEntities}
195196
tableSettings={tableSettings}
197+
onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
196198
/>
197199
)}
198200
</div>

‎src/containers/Storage/StorageGroups/StorageGroups.tsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
1616
import {stringifyVdiskId} from '../../../utils';
1717
import {getUsage, isFullDonorData} from '../../../utils/storage';
1818

19+
import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
1920
import Vdisk from '../Vdisk/Vdisk';
2021
import {getDegradedSeverity, getUsageSeverity} from '../utils';
2122

23+
import i18n from './i18n';
2224
import './StorageGroups.scss';
2325

2426
enum TableColumnsIds {
@@ -42,6 +44,7 @@ interface StorageGroupsProps {
4244
nodes: any;
4345
tableSettings: Settings;
4446
visibleEntities: keyof typeof VisibleEntities;
47+
onShowAll?: VoidFunction;
4548
}
4649

4750
const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
@@ -85,7 +88,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
8588
}
8689
}
8790

88-
function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGroupsProps) {
91+
function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}: StorageGroupsProps) {
8992
const allColumns: Column<any>[] = [
9093
{
9194
name: TableColumnsIds.PoolName,
@@ -253,17 +256,35 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
253256
];
254257

255258
let columns = allColumns;
256-
let emptyMessage = 'No such groups.';
257259

258260
if (visibleEntities === VisibleEntities.Space) {
259261
columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
260-
emptyMessage = 'No groups with out of space errors.';
262+
263+
if (!data.length) {
264+
return (
265+
<EmptyFilter
266+
title={i18n('empty.out_of_space')}
267+
showAll={i18n('show_all')}
268+
onShowAll={onShowAll}
269+
/>
270+
);
271+
}
261272
}
262273

263274
if (visibleEntities === VisibleEntities.Missing) {
264275
columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
265-
emptyMessage = 'No degraded groups.';
276+
277+
if (!data.length) {
278+
return (
279+
<EmptyFilter
280+
title={i18n('empty.degraded')}
281+
showAll={i18n('show_all')}
282+
onShowAll={onShowAll}
283+
/>
284+
);
285+
}
266286
}
287+
267288
return data ? (
268289
<DataTable
269290
key={visibleEntities as string}
@@ -272,7 +293,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
272293
columns={columns}
273294
settings={tableSettings}
274295
initialSortOrder={setSortOrder(visibleEntities)}
275-
emptyDataMessage={emptyMessage}
296+
emptyDataMessage={i18n('empty.default')}
276297
/>
277298
) : null;
278299
}

‎src/containers/Storage/StorageGroups/i18n/en.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"empty.default": "No such groups",
3+
"empty.out_of_space": "No groups with out of space errors",
4+
"empty.degraded": "No degraded groups",
5+
"show_all": "Show all groups"
6+
}

‎src/containers/Storage/StorageGroups/i18n/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {i18n, Lang} from '../../../../utils/i18n';
2+
3+
import en from './en.json';
4+
import ru from './ru.json';
5+
6+
const COMPONENT = 'ydb-storage-groups';
7+
8+
i18n.registerKeyset(Lang.En, COMPONENT, en);
9+
i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
10+
11+
export default i18n.keyset(COMPONENT);

0 commit comments

Comments
 (0)