ydb-embedded-ui 1.0.3 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/assets/icons/question.svg +1 -0
  3. package/dist/components/AsideNavigation/AsideHeader.tsx +2 -1
  4. package/dist/components/ClusterInfo/ClusterInfo.tsx +8 -4
  5. package/dist/components/FullNodeViewer/FullNodeViewer.scss +4 -9
  6. package/dist/components/InfoViewer/InfoViewer.scss +3 -2
  7. package/dist/components/InternalLink/InternalLink.js +8 -0
  8. package/dist/components/Loader/Loader.scss +5 -0
  9. package/dist/components/Loader/Loader.tsx +16 -0
  10. package/dist/components/PDiskViewer/PDiskViewer.js +3 -4
  11. package/dist/containers/App/App.scss +4 -0
  12. package/dist/containers/App/Content.js +0 -2
  13. package/dist/containers/AppIcons/AppIcons.js +4 -0
  14. package/dist/containers/Authentication/Authentication.tsx +2 -2
  15. package/dist/containers/Cluster/Cluster.tsx +1 -1
  16. package/dist/containers/Header/Header.tsx +6 -1
  17. package/dist/containers/Heatmap/Heatmap.js +0 -1
  18. package/dist/containers/Node/Node.scss +12 -1
  19. package/dist/containers/Node/Node.tsx +174 -0
  20. package/dist/containers/Node/NodeOverview/NodeOverview.scss +0 -0
  21. package/dist/containers/Node/NodeOverview/NodeOverview.tsx +23 -0
  22. package/dist/containers/Node/NodePages.js +16 -0
  23. package/dist/containers/Node/NodeStructure/NodeStructure.scss +151 -0
  24. package/dist/containers/Node/NodeStructure/NodeStructure.tsx +155 -0
  25. package/dist/containers/Node/NodeStructure/Pdisk.tsx +299 -0
  26. package/dist/containers/Node/NodeStructure/Vdisk.tsx +153 -0
  27. package/dist/containers/Pdisk/Pdisk.js +2 -5
  28. package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss +10 -3
  29. package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx +20 -15
  30. package/dist/containers/Storage/Pdisk/Pdisk.scss +1 -0
  31. package/dist/containers/Storage/Pdisk/Pdisk.tsx +7 -5
  32. package/dist/containers/Storage/Storage.js +12 -9
  33. package/dist/containers/Storage/StorageGroups/StorageGroups.scss +2 -1
  34. package/dist/containers/Storage/StorageGroups/StorageGroups.tsx +2 -2
  35. package/dist/containers/Storage/StorageNodes/StorageNodes.scss +3 -2
  36. package/dist/containers/Storage/StorageNodes/StorageNodes.tsx +2 -2
  37. package/dist/containers/Storage/Vdisk/Vdisk.js +7 -6
  38. package/dist/containers/Storage/Vdisk/Vdisk.scss +1 -0
  39. package/dist/containers/Tablet/Tablet.js +2 -7
  40. package/dist/containers/Tablets/Tablets.js +4 -12
  41. package/dist/containers/Tenant/Acl/Acl.js +0 -3
  42. package/dist/containers/Tenant/Diagnostics/Compute/Compute.js +1 -3
  43. package/dist/containers/Tenant/Diagnostics/Network/Network.js +3 -6
  44. package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss +1 -0
  45. package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx +1 -1
  46. package/dist/containers/Tenant/QueryEditor/QueryEditor.js +24 -24
  47. package/dist/containers/Tenant/QueryEditor/QueryEditor.scss +4 -0
  48. package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js +4 -1
  49. package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss +1 -0
  50. package/dist/containers/Vdisk/Vdisk.js +2 -4
  51. package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.js +4 -6
  52. package/dist/services/api.js +0 -1
  53. package/dist/store/reducers/executeQuery.js +1 -1
  54. package/dist/store/reducers/header.ts +1 -1
  55. package/dist/store/reducers/node.js +98 -3
  56. package/dist/store/reducers/nodes.js +0 -3
  57. package/dist/store/reducers/storage.js +8 -2
  58. package/dist/store/reducers/tablets.js +0 -3
  59. package/dist/utils/constants.js +0 -6
  60. package/dist/utils/getNodesColumns.js +2 -9
  61. package/dist/utils/utils.js +10 -1
  62. package/package.json +49 -34
  63. package/dist/containers/Node/Node.js +0 -184
@@ -0,0 +1,153 @@
1
+ import React from 'react';
2
+ import cn from 'bem-cn-lite';
3
+
4
+ import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
5
+ import {formatStorageValuesToGb, stringifyVdiskId} from '../../../utils';
6
+ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
7
+ import EntityStatus from '../../../components/EntityStatus/EntityStatus';
8
+ import {valueIsDefined} from './NodeStructure';
9
+ import InfoViewer from '../../../components/InfoViewer/InfoViewer';
10
+
11
+ const b = cn('kv-node-structure');
12
+
13
+ interface VdiskProps {
14
+ AllocatedSize?: string;
15
+ DiskSpace?: string;
16
+ FrontQueues?: string;
17
+ Guid?: string;
18
+ Replicated?: boolean;
19
+ VDiskState?: string;
20
+ VDiskId?: {
21
+ GroupId: number;
22
+ GroupGeneration: number;
23
+ Ring: number;
24
+ Domain: number;
25
+ VDisk: number;
26
+ };
27
+ VDiskSlotId?: number;
28
+ Kind?: string;
29
+ SatisfactionRank?: {FreshRank: {Flag: string}; LevelRank: {Flag: string}};
30
+ AvailableSize?: string;
31
+ HasUnreadableBlobs?: boolean;
32
+ IncarnationGuid?: string;
33
+ InstanceGuid?: string;
34
+ StoragePoolName?: string;
35
+ ReadThroughput?: string;
36
+ WriteThroughput?: string;
37
+ }
38
+
39
+ export function Vdisk({
40
+ AllocatedSize,
41
+ DiskSpace,
42
+ FrontQueues,
43
+ Guid,
44
+ Replicated,
45
+ VDiskState,
46
+ VDiskId,
47
+ VDiskSlotId,
48
+ Kind,
49
+ SatisfactionRank,
50
+ AvailableSize,
51
+ HasUnreadableBlobs,
52
+ IncarnationGuid,
53
+ InstanceGuid,
54
+ StoragePoolName,
55
+ ReadThroughput,
56
+ WriteThroughput,
57
+ }: VdiskProps) {
58
+ const vdiskInfo = [];
59
+
60
+ if (valueIsDefined(VDiskSlotId)) {
61
+ vdiskInfo.push({label: 'VDisk Slot Id', value: VDiskSlotId});
62
+ }
63
+ if (valueIsDefined(Guid)) {
64
+ vdiskInfo.push({label: 'GUID', value: Guid});
65
+ }
66
+ if (valueIsDefined(Kind)) {
67
+ vdiskInfo.push({label: 'Kind', value: Kind});
68
+ }
69
+ if (valueIsDefined(VDiskState)) {
70
+ vdiskInfo.push({
71
+ label: 'VDisk State',
72
+ value: VDiskState,
73
+ });
74
+ }
75
+ if (valueIsDefined(DiskSpace)) {
76
+ vdiskInfo.push({
77
+ label: 'Disk Space',
78
+ value: <EntityStatus status={DiskSpace} />,
79
+ });
80
+ }
81
+ if (valueIsDefined(SatisfactionRank?.FreshRank.Flag)) {
82
+ vdiskInfo.push({
83
+ label: 'Fresh Rank Satisfaction',
84
+ value: <EntityStatus status={SatisfactionRank?.FreshRank.Flag} />,
85
+ });
86
+ }
87
+ if (valueIsDefined(SatisfactionRank?.LevelRank.Flag)) {
88
+ vdiskInfo.push({
89
+ label: 'Level Rank Satisfaction',
90
+ value: <EntityStatus status={SatisfactionRank?.LevelRank.Flag} />,
91
+ });
92
+ }
93
+ vdiskInfo.push({label: 'Replicated', value: Replicated ? 'Yes' : 'No'});
94
+ vdiskInfo.push({label: 'Allocated Size', value: bytesToGB(AllocatedSize)});
95
+ vdiskInfo.push({label: 'Available Size', value: bytesToGB(AvailableSize)});
96
+ if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
97
+ vdiskInfo.push({
98
+ label: 'Size',
99
+ value: (
100
+ <ProgressViewer
101
+ value={AllocatedSize}
102
+ capacity={Number(AllocatedSize) + Number(AvailableSize)}
103
+ formatValues={formatStorageValuesToGb}
104
+ colorizeProgress={true}
105
+ />
106
+ ),
107
+ });
108
+ }
109
+
110
+ vdiskInfo.push({
111
+ label: 'Has Unreadable Blobs',
112
+ value: HasUnreadableBlobs ? 'Yes' : 'No',
113
+ });
114
+ if (valueIsDefined(IncarnationGuid)) {
115
+ vdiskInfo.push({label: 'Incarnation GUID', value: IncarnationGuid});
116
+ }
117
+ if (valueIsDefined(InstanceGuid)) {
118
+ vdiskInfo.push({label: 'Instance GUID', value: InstanceGuid});
119
+ }
120
+ if (valueIsDefined(FrontQueues)) {
121
+ vdiskInfo.push({
122
+ label: 'Front Queues',
123
+ value: <EntityStatus status={FrontQueues} />,
124
+ });
125
+ }
126
+ if (valueIsDefined(StoragePoolName)) {
127
+ vdiskInfo.push({label: 'Storage Pool Name', value: StoragePoolName});
128
+ }
129
+ vdiskInfo.push({
130
+ label: 'Read Throughput',
131
+ value: bytesToSpeed(ReadThroughput),
132
+ });
133
+ vdiskInfo.push({
134
+ label: 'Write Throughput',
135
+ value: bytesToSpeed(WriteThroughput),
136
+ });
137
+
138
+ return (
139
+ <React.Fragment>
140
+ <div className={b('row')}>
141
+ <span className={b('title')}>VDisk </span>
142
+ <EntityStatus
143
+ status={VDiskState === 'OK' ? 'green' : 'red'}
144
+ name={stringifyVdiskId(VDiskId)}
145
+ />
146
+ </div>
147
+
148
+ <div className={b('column')}>
149
+ <InfoViewer className={b('section')} info={vdiskInfo} />
150
+ </div>
151
+ </React.Fragment>
152
+ );
153
+ }
@@ -14,7 +14,7 @@ import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
14
14
  import {getPdiskInfo, clearStore} from '../../store/reducers/pdisk';
15
15
  import {PDISK_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
16
16
  import {formatStorageValues, calcUptime} from '../../utils';
17
- import routes, {createHref} from '../../routes';
17
+ import {getDefaultNodePath} from '../Node/NodePages';
18
18
 
19
19
  import './Pdisk.scss';
20
20
 
@@ -97,10 +97,7 @@ class Pdisk extends React.Component {
97
97
  {
98
98
  label: 'NodeId',
99
99
  value: (
100
- <Link
101
- className={b('link')}
102
- to={createHref(routes.node, {id: NodeId, activeTab: 'storage'})}
103
- >
100
+ <Link className={b('link')} to={getDefaultNodePath(NodeId)}>
104
101
  {NodeId}
105
102
  </Link>
106
103
  ),
@@ -5,7 +5,6 @@
5
5
  display: inline-block;
6
6
 
7
7
  width: 100%;
8
- max-width: 200px;
9
8
  height: var(--yc-text-body2-line-height);
10
9
 
11
10
  border: 1px solid var(--yc-color-infographics-misc-medium);
@@ -66,12 +65,20 @@
66
65
  }
67
66
  &__filled-title {
68
67
  position: absolute;
69
- top: 0;
70
- left: 5px;
68
+ z-index: 2;
71
69
 
72
70
  font-size: var(--yc-text-body-font-size);
73
71
  line-height: inherit;
74
72
 
75
73
  color: inherit;
76
74
  }
75
+
76
+ &__link {
77
+ display: flex;
78
+ justify-content: center;
79
+
80
+ height: 100%;
81
+
82
+ color: inherit;
83
+ }
77
84
  }
@@ -1,5 +1,5 @@
1
- import React, {useContext} from 'react';
2
- import HistoryContext from '../../../contexts/HistoryContext';
1
+ import React from 'react';
2
+ import InternalLink from '../../../components/InternalLink/InternalLink';
3
3
  import cn from 'bem-cn-lite';
4
4
 
5
5
  import './DiskStateProgressBar.scss';
@@ -26,12 +26,19 @@ function DiskStateProgressBar({
26
26
  severity,
27
27
  href,
28
28
  }: DiskStateProgressBarProps) {
29
- const history = useContext(HistoryContext);
30
- const onDiskClick = () => {
31
- if (href) {
32
- history.push(href);
33
- }
29
+ const renderAllocatedPercent = () => {
30
+ return (
31
+ diskAllocatedPercent >= 0 && (
32
+ <React.Fragment>
33
+ <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
34
+ <div className={b('filled-title')}>
35
+ {`${Math.round(diskAllocatedPercent)}%`}
36
+ </div>
37
+ </React.Fragment>
38
+ )
39
+ );
34
40
  };
41
+
35
42
  return (
36
43
  <div
37
44
  className={
@@ -39,15 +46,13 @@ function DiskStateProgressBar({
39
46
  ? b({[diskProgressColors[severity].toLowerCase()]: true})
40
47
  : undefined
41
48
  }
42
- onClick={onDiskClick}
43
49
  >
44
- {diskAllocatedPercent >= 0 && (
45
- <React.Fragment>
46
- <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
47
- <div className={b('filled-title')}>
48
- {`${Math.round(diskAllocatedPercent)}%`}
49
- </div>
50
- </React.Fragment>
50
+ {href ? (
51
+ <InternalLink to={href} className={b('link')}>
52
+ {renderAllocatedPercent()}
53
+ </InternalLink>
54
+ ) : (
55
+ renderAllocatedPercent()
51
56
  )}
52
57
  </div>
53
58
  );
@@ -3,6 +3,7 @@
3
3
  flex-grow: 1;
4
4
  align-items: center;
5
5
 
6
+ max-width: 200px;
6
7
  margin-right: 10px;
7
8
 
8
9
  cursor: pointer;
@@ -11,6 +11,7 @@ import {getPDiskId} from '../../../utils';
11
11
  import DiskStateProgressBar, {
12
12
  diskProgressColors,
13
13
  } from '../DiskStateProgressBar/DiskStateProgressBar';
14
+ import {STRUCTURE} from '../../Node/NodePages';
14
15
 
15
16
  import './Pdisk.scss';
16
17
 
@@ -119,7 +120,7 @@ function Pdisk(props: PDiskProps) {
119
120
  className={b('popup-wrapper')}
120
121
  anchorRef={anchor}
121
122
  open={isPopupVisible}
122
- placement={['top']}
123
+ placement={['top', 'bottom']}
123
124
  hasArrow
124
125
  >
125
126
  <div className={b('popup-content')}>
@@ -153,10 +154,11 @@ function Pdisk(props: PDiskProps) {
153
154
  <DiskStateProgressBar
154
155
  diskAllocatedPercent={pdiskAllocatedPercent}
155
156
  severity={severity as keyof typeof diskProgressColors}
156
- href={createHref(routes.vdisk, undefined, {
157
- pdiskId: props.PDiskId,
158
- nodeId: props.NodeId,
159
- })}
157
+ href={createHref(
158
+ routes.node,
159
+ {id: props.NodeId, activeTab: STRUCTURE},
160
+ {pdiskId: props.PDiskId},
161
+ )}
160
162
  />
161
163
  </div>
162
164
  </React.Fragment>
@@ -18,6 +18,7 @@ import {
18
18
  getNodesObject,
19
19
  StorageTypes,
20
20
  setStorageType,
21
+ VisibleEntitiesTitles,
21
22
  } from '../../store/reducers/storage';
22
23
  import {getNodesList} from '../../store/reducers/clusterNodes';
23
24
  import StorageGroups from './StorageGroups/StorageGroups';
@@ -56,6 +57,7 @@ class Storage extends React.Component {
56
57
  visibleEntities: PropTypes.string,
57
58
  setHeader: PropTypes.func,
58
59
  tenant: PropTypes.string,
60
+ nodeId: PropTypes.string,
59
61
  };
60
62
 
61
63
  componentDidMount() {
@@ -68,12 +70,7 @@ class Storage extends React.Component {
68
70
  getNodesList,
69
71
  getStorageInfo,
70
72
  } = this.props;
71
- setHeader([
72
- {
73
- text: CLUSTER_PAGES.storage.title,
74
- link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
75
- },
76
- ]);
73
+
77
74
  this.autofetcher = new AutoFetcher();
78
75
  getNodesList();
79
76
  if (tenant || nodeId) {
@@ -85,6 +82,12 @@ class Storage extends React.Component {
85
82
  type: storageType,
86
83
  });
87
84
  } else {
85
+ setHeader([
86
+ {
87
+ text: CLUSTER_PAGES.storage.title,
88
+ link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
89
+ },
90
+ ]);
88
91
  getStorageInfo({
89
92
  tenant,
90
93
  nodeId,
@@ -209,13 +212,13 @@ class Storage extends React.Component {
209
212
  </div>
210
213
  <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
211
214
  <RadioButton.Option value={VisibleEntities.Missing}>
212
- {VisibleEntities.Missing}
215
+ {VisibleEntitiesTitles[VisibleEntities.Missing]}
213
216
  </RadioButton.Option>
214
217
  <RadioButton.Option value={VisibleEntities.Space}>
215
- {VisibleEntities.Space}
218
+ {VisibleEntitiesTitles[VisibleEntities.Space]}
216
219
  </RadioButton.Option>
217
220
  <RadioButton.Option value={VisibleEntities.All}>
218
- {VisibleEntities.All}
221
+ {VisibleEntitiesTitles[VisibleEntities.All]}
219
222
  </RadioButton.Option>
220
223
  </RadioButton>
221
224
 
@@ -15,7 +15,8 @@
15
15
  display: inline-block;
16
16
  overflow: hidden;
17
17
 
18
- max-width: 150px;
18
+ width: 230px;
19
+ max-width: 230px;
19
20
 
20
21
  text-overflow: ellipsis;
21
22
  }
@@ -84,7 +84,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
84
84
  {
85
85
  name: TableColumnsIds.PoolName,
86
86
  header: tableColumnsNames[TableColumnsIds.PoolName],
87
- width: 160,
87
+ width: 250,
88
88
  render: ({value}) => {
89
89
  const splitted = (value as string)?.split('/');
90
90
  return (
@@ -214,7 +214,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
214
214
 
215
215
  if (visibleEntities === VisibleEntities.Space) {
216
216
  columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
217
- emptyMessage = 'No storage groups with space problems.';
217
+ emptyMessage = 'No groups with out of space errors.';
218
218
  }
219
219
 
220
220
  if (visibleEntities === VisibleEntities.Missing) {
@@ -1,4 +1,4 @@
1
- .global-storage-groups {
1
+ .global-storage-nodes {
2
2
  &__pdisks-wrapper {
3
3
  display: flex;
4
4
  overflow-x: auto;
@@ -15,7 +15,8 @@
15
15
  display: inline-block;
16
16
  overflow: hidden;
17
17
 
18
- max-width: 340px;
18
+ width: 330px;
19
+ max-width: 330px;
19
20
 
20
21
  text-overflow: ellipsis;
21
22
  }
@@ -34,7 +34,7 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
34
34
  Missing: 'Missing',
35
35
  };
36
36
 
37
- const b = cn('global-storage-groups');
37
+ const b = cn('global-storage-nodes');
38
38
 
39
39
  function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
40
40
  switch (visibleEntities) {
@@ -118,7 +118,7 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
118
118
 
119
119
  if (visibleEntities === VisibleEntities.Space) {
120
120
  columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
121
- emptyMessage = 'No nodes with space problems.';
121
+ emptyMessage = 'No nodes with out of space errors.';
122
122
  }
123
123
  if (visibleEntities === VisibleEntities.Missing) {
124
124
  emptyMessage = 'No degraded nodes.';
@@ -10,6 +10,7 @@ import {stringifyVdiskId, getPDiskId} from '../../../utils';
10
10
  import DiskStateProgressBar, {
11
11
  diskProgressColors,
12
12
  } from '../DiskStateProgressBar/DiskStateProgressBar';
13
+ import {STRUCTURE} from '../../Node/NodePages';
13
14
 
14
15
  import './Vdisk.scss';
15
16
 
@@ -192,7 +193,7 @@ function Vdisk(props) {
192
193
  className={b('popup-wrapper')}
193
194
  anchorRef={anchor}
194
195
  open={isPopupVisible}
195
- placement={['top']}
196
+ placement={['top', 'bottom']}
196
197
  hasArrow
197
198
  >
198
199
  <div className={b('popup-content')}>
@@ -234,11 +235,11 @@ function Vdisk(props) {
234
235
  <DiskStateProgressBar
235
236
  diskAllocatedPercent={vdiskAllocatedPercent}
236
237
  severity={severity}
237
- href={createHref(routes.vdisk, null, {
238
- vdiskId: stringifyVdiskId(props.VDiskId),
239
- pdiskId: props.PDisk?.PDiskId,
240
- nodeId: props.NodeId,
241
- })}
238
+ href={createHref(
239
+ routes.node,
240
+ {id: props.NodeId, activeTab: STRUCTURE},
241
+ {pdiskId: props.PDisk?.PDiskId, vdiskId: stringifyVdiskId(props.VDiskId)},
242
+ )}
242
243
  />
243
244
  </div>
244
245
  </React.Fragment>
@@ -3,6 +3,7 @@
3
3
  flex-grow: 1;
4
4
  align-items: center;
5
5
 
6
+ max-width: 200px;
6
7
  margin-right: 10px;
7
8
 
8
9
  cursor: pointer;
@@ -19,6 +19,7 @@ import {Link as ExternalLink, Button, Loader} from '@yandex-cloud/uikit';
19
19
  import DataTable from '@yandex-cloud/react-data-table';
20
20
  import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
21
21
  import routes, {createHref} from '../../routes';
22
+ import {getDefaultNodePath} from '../Node/NodePages';
22
23
 
23
24
  import './Tablet.scss';
24
25
 
@@ -316,13 +317,7 @@ class Tablet extends React.Component {
316
317
  {
317
318
  label: 'Node',
318
319
  value: (
319
- <Link
320
- className={b('link')}
321
- to={createHref(routes.node, {
322
- id: String(tablet.NodeId),
323
- activeTab: 'storage',
324
- })}
325
- >
320
+ <Link className={b('link')} to={getDefaultNodePath(String(tablet.NodeId))}>
326
321
  {tablet.NodeId}
327
322
  </Link>
328
323
  ),
@@ -32,9 +32,9 @@ class Tablets extends React.Component {
32
32
  hideTooltip: PropTypes.func,
33
33
  getTabletsInfo: PropTypes.func,
34
34
  nodeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
35
- timeoutForRequest: PropTypes.number,
36
35
  path: PropTypes.string,
37
36
  clearWasLoadingFlag: PropTypes.func,
37
+ className: PropTypes.string,
38
38
  };
39
39
 
40
40
  autofetcher;
@@ -148,10 +148,10 @@ class Tablets extends React.Component {
148
148
  content: item,
149
149
  }));
150
150
  const {filteredTablets} = this.state;
151
- const {stateFilter, typeFilter} = this.props;
151
+ const {stateFilter, typeFilter, className} = this.props;
152
152
 
153
153
  return (
154
- <div className={b()}>
154
+ <div className={(b(), className)}>
155
155
  <div className={b('header')}>
156
156
  <Select
157
157
  className={b('filter-control')}
@@ -204,19 +204,11 @@ class Tablets extends React.Component {
204
204
  }
205
205
 
206
206
  const mapStateToProps = (state) => {
207
- const {
208
- data = {},
209
- wasLoaded,
210
- loading,
211
- timeoutForRequest,
212
- stateFilter,
213
- typeFilter,
214
- } = state.tablets;
207
+ const {data = {}, wasLoaded, loading, stateFilter, typeFilter} = state.tablets;
215
208
  const {autorefresh} = state.schema;
216
209
  const {TabletStateInfo: tablets = []} = data;
217
210
  return {
218
211
  tablets,
219
- timeoutForRequest,
220
212
  wasLoaded,
221
213
  loading,
222
214
  stateFilter,
@@ -26,7 +26,6 @@ class Acl extends React.Component {
26
26
  name: 'AccessType',
27
27
  header: 'Access Type',
28
28
  sortable: false,
29
- width: COLUMN_WIDTH,
30
29
  },
31
30
  {
32
31
  name: 'AccessRights',
@@ -36,7 +35,6 @@ class Acl extends React.Component {
36
35
  return <div key={index}>{item}</div>;
37
36
  });
38
37
  },
39
- width: COLUMN_WIDTH,
40
38
  sortable: false,
41
39
  },
42
40
  {
@@ -56,7 +54,6 @@ class Acl extends React.Component {
56
54
  return <div key={index}>{item}</div>;
57
55
  });
58
56
  },
59
- width: COLUMN_WIDTH,
60
57
  sortable: false,
61
58
  },
62
59
  ];
@@ -31,7 +31,6 @@ class Compute extends React.Component {
31
31
  getNodes: PropTypes.func,
32
32
  hideTooltip: PropTypes.func,
33
33
  showTooltip: PropTypes.func,
34
- timeoutForRequest: PropTypes.number,
35
34
  };
36
35
 
37
36
  autofetcher;
@@ -102,7 +101,7 @@ class Compute extends React.Component {
102
101
  }
103
102
 
104
103
  function mapStateToProps(state, ownProps) {
105
- const {data, loading, wasLoaded, error, timeoutForRequest} = state.nodes;
104
+ const {data, loading, wasLoaded, error} = state.nodes;
106
105
  const {autorefresh} = state.schema;
107
106
  const {search} = ownProps.location;
108
107
  const queryParams = qs.parse(search, {
@@ -113,7 +112,6 @@ function mapStateToProps(state, ownProps) {
113
112
  return {
114
113
  nodes,
115
114
  tenantName,
116
- timeoutForRequest,
117
115
  loading,
118
116
  wasLoaded,
119
117
  error,
@@ -14,11 +14,11 @@ import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFi
14
14
  import {getNetworkInfo} from '../../../../store/reducers/network';
15
15
  import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
16
16
  import {ALL, PROBLEMS} from '../../../../utils/constants';
17
- import routes, {createHref} from '../../../../routes';
18
17
  import {changeFilter} from '../../../../store/reducers/settings';
18
+ import {AutoFetcher} from '../../../../utils/autofetcher';
19
+ import {getDefaultNodePath} from '../../../Node/NodePages';
19
20
 
20
21
  import './Network.scss';
21
- import {AutoFetcher} from '../../../../utils/autofetcher';
22
22
 
23
23
  const b = cn('network');
24
24
 
@@ -301,10 +301,7 @@ class Network extends React.Component {
301
301
  Connectivity of node{' '}
302
302
  <Link
303
303
  className={b('link')}
304
- to={createHref(routes.node, {
305
- id: clickedNode.NodeId,
306
- activeTab: 'storage',
307
- })}
304
+ to={getDefaultNodePath(clickedNode.NodeId)}
308
305
  >
309
306
  {clickedNode.NodeId}
310
307
  </Link>{' '}
@@ -147,6 +147,7 @@
147
147
  &__path-name {
148
148
  overflow: hidden;
149
149
 
150
+ white-space: nowrap;
150
151
  text-overflow: ellipsis;
151
152
  }
152
153
 
@@ -154,7 +154,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
154
154
 
155
155
  const renderObjectOverview = () => {
156
156
  const startTimeInMilliseconds = currentSchemaData?.CreateStep / 1000;
157
- let createTime = 'Unknown';
157
+ let createTime = '';
158
158
  if (startTimeInMilliseconds) {
159
159
  createTime = new Date(startTimeInMilliseconds).toUTCString();
160
160
  }