ydb-embedded-ui 1.5.2 → 1.6.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 (71) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/assets/icons/circle-exclamation.svg +1 -0
  3. package/dist/assets/icons/circle-info.svg +1 -0
  4. package/dist/assets/icons/circle-xmark.svg +1 -0
  5. package/dist/assets/icons/triangle-exclamation.svg +1 -0
  6. package/dist/components/AsideNavigation/Settings/Settings.scss +4 -4
  7. package/dist/components/Breadcrumbs/Breadcrumbs.scss +1 -1
  8. package/dist/components/Collapse/Collapse.scss +8 -8
  9. package/dist/components/EmptyState/EmptyState.scss +6 -6
  10. package/dist/components/EntityStatus/EntityStatus.scss +6 -6
  11. package/dist/components/FullNodeViewer/FullNodeViewer.scss +7 -7
  12. package/dist/components/GroupViewer/GroupViewer.scss +1 -1
  13. package/dist/components/InfoViewer/InfoViewer.scss +4 -4
  14. package/dist/components/PDiskViewer/PDiskViewer.scss +1 -1
  15. package/dist/components/PoolUsage/PoolUsage.scss +5 -5
  16. package/dist/components/ProgressViewer/ProgressViewer.scss +9 -9
  17. package/dist/components/ShortyString/ShortyString.scss +7 -0
  18. package/dist/components/ShortyString/ShortyString.tsx +53 -0
  19. package/dist/components/TableSkeleton/TableSkeleton.scss +1 -1
  20. package/dist/components/TabletsViewer/TabletsViewer.scss +2 -2
  21. package/dist/containers/App/App.js +2 -1
  22. package/dist/containers/App/App.scss +6 -0
  23. package/dist/containers/App/TipPopup/TipPopup.js +1 -1
  24. package/dist/containers/AsideNavigation/AsideNavigation.scss +1 -1
  25. package/dist/containers/Authentication/Authentication.scss +2 -2
  26. package/dist/containers/Header/Header.scss +2 -2
  27. package/dist/containers/Header/Host/Host.scss +6 -6
  28. package/dist/containers/Heatmap/Heatmap.js +1 -2
  29. package/dist/containers/Heatmap/Heatmap.scss +2 -2
  30. package/dist/containers/Node/Node.scss +0 -1
  31. package/dist/containers/Node/Node.tsx +1 -0
  32. package/dist/containers/Node/NodeStructure/NodeStructure.scss +3 -3
  33. package/dist/containers/Node/NodeStructure/Pdisk.tsx +6 -6
  34. package/dist/containers/Pdisk/Pdisk.scss +2 -2
  35. package/dist/containers/Pool/Pool.scss +3 -3
  36. package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss +2 -2
  37. package/dist/containers/Storage/Storage.scss +3 -3
  38. package/dist/containers/Storage/StorageGroups/StorageGroups.tsx +4 -4
  39. package/dist/containers/Storage/StorageNodes/StorageNodes.tsx +4 -4
  40. package/dist/containers/Tablet/Tablet.scss +4 -4
  41. package/dist/containers/Tablets/Tablets.js +1 -2
  42. package/dist/containers/TabletsFilters/TabletsFilters.js +1 -2
  43. package/dist/containers/TabletsFilters/TabletsFilters.scss +2 -2
  44. package/dist/containers/Tenant/Acl/Acl.scss +2 -2
  45. package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx +1 -0
  46. package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js +3 -2
  47. package/dist/containers/Tenant/Diagnostics/Network/Network.scss +6 -6
  48. package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss +4 -4
  49. package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.js +5 -4
  50. package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss +2 -2
  51. package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.js +8 -7
  52. package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.scss +7 -8
  53. package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx +2 -12
  54. package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx +3 -2
  55. package/dist/containers/Tenant/Preview/Preview.js +2 -2
  56. package/dist/containers/Tenant/QueryEditor/Issues/Issues.scss +124 -0
  57. package/dist/containers/Tenant/QueryEditor/Issues/Issues.tsx +171 -0
  58. package/dist/containers/Tenant/QueryEditor/Issues/models.ts +27 -0
  59. package/dist/containers/Tenant/QueryEditor/QueryEditor.js +38 -52
  60. package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js +4 -1
  61. package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.js +32 -5
  62. package/dist/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.scss +1 -1
  63. package/dist/containers/Tenant/Tenant.scss +2 -2
  64. package/dist/containers/Tenants/Tenants.js +1 -1
  65. package/dist/containers/Vdisk/Vdisk.scss +2 -2
  66. package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.scss +2 -2
  67. package/dist/store/utils.js +1 -1
  68. package/dist/styles/mixins.scss +13 -13
  69. package/dist/utils/getNodesColumns.js +2 -3
  70. package/dist/utils/index.js +4 -0
  71. package/package.json +6 -7
@@ -2,7 +2,7 @@ import {useState} from 'react';
2
2
  import cn from 'bem-cn-lite';
3
3
  import _ from 'lodash';
4
4
 
5
- import {ArrowToggle, Button, Tooltip} from '@yandex-cloud/uikit';
5
+ import {ArrowToggle, Button, Popover} from '@yandex-cloud/uikit';
6
6
 
7
7
  import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
8
8
 
@@ -126,20 +126,20 @@ function getColumns({
126
126
  width: 70,
127
127
  render: ({row}) => {
128
128
  return (
129
- <Tooltip
129
+ <Popover
130
130
  placement={['right']}
131
131
  content={<Vdisk {...row} />}
132
132
  contentClassName={b('vdisk-details')}
133
133
  >
134
134
  <Button
135
- view="clear"
135
+ view="flat-secondary"
136
136
  className={b('vdisk-details-button', {
137
137
  selected: row.id === selectedVdiskId,
138
138
  })}
139
139
  >
140
140
  <Icon name="information" viewBox="0 0 512 512" height={16} width={16} />
141
141
  </Button>
142
- </Tooltip>
142
+ </Popover>
143
143
  );
144
144
  },
145
145
  sortable: false,
@@ -213,7 +213,7 @@ export function PDisk(props: PDiskProps) {
213
213
  className={b('external-button')}
214
214
  href={pDiskInternalViewerLink}
215
215
  target="_blank"
216
- view="clear"
216
+ view="flat-secondary"
217
217
  >
218
218
  <Icon name="external" />
219
219
  </Button>
@@ -289,7 +289,7 @@ export function PDisk(props: PDiskProps) {
289
289
  <span>{data.Path}</span>
290
290
  <EntityStatus status={data.Device} name={`${data.NodeId}-${data.PDiskId}`} />
291
291
  </div>
292
- <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="clear">
292
+ <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="flat-secondary">
293
293
  <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />
294
294
  </Button>
295
295
  </div>
@@ -20,9 +20,9 @@
20
20
  &__title {
21
21
  margin-right: 16px;
22
22
 
23
- font-size: var(--yc-text-body2-font-size);
23
+ font-size: var(--yc-text-body-2-font-size);
24
24
  font-weight: 500;
25
- line-height: var(--yc-text-body2-line-height);
25
+ line-height: var(--yc-text-body-2-line-height);
26
26
  text-transform: uppercase;
27
27
  }
28
28
 
@@ -10,9 +10,9 @@
10
10
  &__title {
11
11
  margin-right: 16px;
12
12
 
13
- font-size: var(--yc-text-body2-font-size);
13
+ font-size: var(--yc-text-body-2-font-size);
14
14
  font-weight: 500;
15
- line-height: var(--yc-text-body2-line-height);
15
+ line-height: var(--yc-text-body-2-line-height);
16
16
  text-transform: uppercase;
17
17
 
18
18
  &_groups {
@@ -30,6 +30,6 @@
30
30
  &__breadcrumbs {
31
31
  padding: 20px 0;
32
32
 
33
- font-size: var(--yc-text-body2-font-size);
33
+ font-size: var(--yc-text-body-2-font-size);
34
34
  }
35
35
  }
@@ -5,7 +5,7 @@
5
5
  display: inline-block;
6
6
 
7
7
  width: 100%;
8
- height: var(--yc-text-body2-line-height);
8
+ height: var(--yc-text-body-2-line-height);
9
9
 
10
10
  border: 1px solid var(--yc-color-infographics-misc-medium);
11
11
  border-radius: 2px;
@@ -67,7 +67,7 @@
67
67
  position: absolute;
68
68
  z-index: 2;
69
69
 
70
- font-size: var(--yc-text-body-font-size);
70
+ font-size: var(--yc-text-body-1-font-size);
71
71
  line-height: inherit;
72
72
 
73
73
  color: inherit;
@@ -16,12 +16,12 @@
16
16
  overflow: auto;
17
17
  flex-grow: 1;
18
18
 
19
- font-size: var(--yc-text-body2-font-size);
20
- line-height: var(--yc-text-body2-line-height);
19
+ font-size: var(--yc-text-body-2-font-size);
20
+ line-height: var(--yc-text-body-2-line-height);
21
21
 
22
22
  .yc-tooltip {
23
23
  // stylelint-disable-next-line declaration-no-important
24
- height: var(--yc-text-body2-line-height) !important;
24
+ height: var(--yc-text-body-2-line-height) !important;
25
25
  }
26
26
 
27
27
  table {
@@ -1,7 +1,7 @@
1
1
  import _ from 'lodash';
2
2
  import cn from 'bem-cn-lite';
3
3
  import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
4
- import {Tooltip, TooltipBehavior} from '@yandex-cloud/uikit';
4
+ import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
5
5
 
6
6
  import Vdisk from '../Vdisk/Vdisk';
7
7
  //@ts-ignore
@@ -90,15 +90,15 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
90
90
  return (
91
91
  <div className={b('pool-name-wrapper')}>
92
92
  {splitted && (
93
- <Tooltip
93
+ <Popover
94
94
  content={<span className={b('tooltip')}>{value as string}</span>}
95
95
  placement={['right']}
96
- behavior={TooltipBehavior.Immediate}
96
+ behavior={PopoverBehavior.Immediate}
97
97
  >
98
98
  <span className={b('pool-name')}>
99
99
  {splitted[splitted.length - 1]}
100
100
  </span>
101
- </Tooltip>
101
+ </Popover>
102
102
  )}
103
103
  </div>
104
104
  );
@@ -1,7 +1,7 @@
1
1
  import _ from 'lodash';
2
2
  import cn from 'bem-cn-lite';
3
3
  import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
4
- import {Tooltip, TooltipBehavior} from '@yandex-cloud/uikit';
4
+ import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
5
5
  //@ts-ignore
6
6
  import {VisibleEntities} from '../../../store/reducers/storage';
7
7
  import Pdisk from '../Pdisk/Pdisk';
@@ -71,13 +71,13 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
71
71
  render: ({value}) => {
72
72
  return (
73
73
  <div className={b('tooltip-wrapper')}>
74
- <Tooltip
74
+ <Popover
75
75
  content={<span className={b('tooltip')}>{value as string}</span>}
76
76
  placement={['right']}
77
- behavior={TooltipBehavior.Immediate}
77
+ behavior={PopoverBehavior.Immediate}
78
78
  >
79
79
  <span className={b('pool-name')}>{value as string}</span>
80
- </Tooltip>
80
+ </Popover>
81
81
  </div>
82
82
  );
83
83
  },
@@ -46,9 +46,9 @@
46
46
  &__title {
47
47
  margin-right: 16px;
48
48
 
49
- font-size: var(--yc-text-body2-font-size);
49
+ font-size: var(--yc-text-body-2-font-size);
50
50
  font-weight: 500;
51
- line-height: var(--yc-text-body2-line-height);
51
+ line-height: var(--yc-text-body-2-line-height);
52
52
  text-transform: uppercase;
53
53
  }
54
54
 
@@ -84,9 +84,9 @@
84
84
  &__top-label {
85
85
  margin-right: 16px;
86
86
 
87
- font-size: var(--yc-text-body2-font-size);
87
+ font-size: var(--yc-text-body-2-font-size);
88
88
  font-weight: 500;
89
- line-height: var(--yc-text-body2-line-height);
89
+ line-height: var(--yc-text-body-2-line-height);
90
90
  text-transform: uppercase;
91
91
  }
92
92
  }
@@ -12,8 +12,7 @@ import {
12
12
  import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
13
13
 
14
14
  import Tablet from '../../components/Tablet/Tablet';
15
- import {Loader} from '@yandex-cloud/uikit';
16
- import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
15
+ import {Loader, Select} from '@yandex-cloud/uikit';
17
16
  import ReactList from 'react-list';
18
17
  import {AutoFetcher} from '../../utils/autofetcher';
19
18
 
@@ -5,8 +5,7 @@ import cn from 'bem-cn-lite';
5
5
  import qs from 'qs';
6
6
  import _ from 'lodash';
7
7
 
8
- import {Loader} from '@yandex-cloud/uikit';
9
- import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
8
+ import {Loader, Select} from '@yandex-cloud/uikit';
10
9
  import ReactList from 'react-list';
11
10
 
12
11
  import Tablet from '../../components/Tablet/Tablet';
@@ -10,8 +10,8 @@
10
10
  display: flex;
11
11
  flex-direction: column;
12
12
 
13
- font-size: var(--yc-text-body-font-size);
14
- line-height: var(--yc-text-body-line-height);
13
+ font-size: var(--yc-text-body-1-font-size);
14
+ line-height: var(--yc-text-body-1-line-height);
15
15
  }
16
16
 
17
17
  &__node-meta {
@@ -38,8 +38,8 @@
38
38
  }
39
39
 
40
40
  &__text {
41
- font-size: var(--yc-text-body-font-size);
42
- line-height: var(--yc-text-body-line-height);
41
+ font-size: var(--yc-text-body-1-font-size);
42
+ line-height: var(--yc-text-body-1-line-height);
43
43
 
44
44
  color: var(--yc-color-text-primary);
45
45
 
@@ -164,6 +164,7 @@ function Diagnostics(props: DiagnosticsProps) {
164
164
  <div className={b('header-wrapper')}>
165
165
  <div className={b('tabs')}>
166
166
  <Tabs
167
+ size="l"
167
168
  items={pages}
168
169
  activeTab={activeTab as string}
169
170
  wrapTo={({id}, node) => {
@@ -8,9 +8,10 @@ import Icon from '../../../../components/Icon/Icon';
8
8
 
9
9
  import {AutoFetcher} from '../../../../utils/autofetcher';
10
10
  import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
11
+ import {TABLE_TYPE} from '../../Tenant';
12
+ import {prepareQueryError} from '../../../../utils';
11
13
 
12
14
  import './HotKeys.scss';
13
- import {TABLE_TYPE} from '../../Tenant';
14
15
 
15
16
  const b = cn('hot-keys');
16
17
 
@@ -105,7 +106,7 @@ function HotKeys({
105
106
 
106
107
  const renderContent = () => {
107
108
  if (error) {
108
- return error.data;
109
+ return prepareQueryError(error);
109
110
  }
110
111
  return data !== null ? (
111
112
  <div className={b('table-content')}>
@@ -9,8 +9,8 @@
9
9
  max-width: 1305px;
10
10
  height: 100%;
11
11
 
12
- font-size: var(--yc-text-body2-font-size);
13
- line-height: var(--yc-text-body2-line-height);
12
+ font-size: var(--yc-text-body-2-font-size);
13
+ line-height: var(--yc-text-body-2-line-height);
14
14
 
15
15
  &__nodes-row {
16
16
  display: flex;
@@ -74,8 +74,8 @@
74
74
  &__nodes-title {
75
75
  margin: 0 0 15px;
76
76
 
77
- font-size: var(--yc-text-body2-font-size);
78
- line-height: var(--yc-text-body2-line-height);
77
+ font-size: var(--yc-text-body-2-font-size);
78
+ line-height: var(--yc-text-body-2-line-height);
79
79
 
80
80
  color: var(--yc-color-text-secondary);
81
81
  border-bottom: 1px solid var(--yc-color-base-generic-accent);
@@ -90,9 +90,9 @@
90
90
  &__title {
91
91
  margin: 20px 0;
92
92
 
93
- font-size: var(--yc-text-body-font-size);
93
+ font-size: var(--yc-text-body-1-font-size);
94
94
  font-weight: 500;
95
- line-height: var(--yc-text-body-line-height);
95
+ line-height: var(--yc-text-body-1-line-height);
96
96
  }
97
97
 
98
98
  &__checkbox-wrapper {
@@ -46,9 +46,9 @@
46
46
  }
47
47
 
48
48
  &__collapse-title {
49
- font-size: var(--yc-text-body2-font-size);
49
+ font-size: var(--yc-text-body-2-font-size);
50
50
  font-weight: 500;
51
- line-height: var(--yc-text-body2-line-height);
51
+ line-height: var(--yc-text-body-2-line-height);
52
52
  //text-transform: uppercase;
53
53
  }
54
54
 
@@ -75,8 +75,8 @@
75
75
  &__section-title {
76
76
  margin-bottom: 20px;
77
77
 
78
- font-size: var(--yc-text-body2-font-size);
78
+ font-size: var(--yc-text-body-2-font-size);
79
79
  font-weight: 500;
80
- line-height: var(--yc-text-body2-line-height);
80
+ line-height: var(--yc-text-body-2-line-height);
81
81
  }
82
82
  }
@@ -3,18 +3,19 @@ import PropTypes from 'prop-types';
3
3
  import cn from 'bem-cn-lite';
4
4
  import {connect} from 'react-redux';
5
5
  import DataTable from '@yandex-cloud/react-data-table';
6
+ import {Loader} from '@yandex-cloud/uikit';
6
7
 
7
8
  import {changeUserInput} from '../../../../store/reducers/executeQuery';
8
9
  import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
9
10
  import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
10
11
  import {AutoFetcher} from '../../../../utils/autofetcher';
11
- import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
12
+ import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
12
13
 
13
- import './TopQueries.scss';
14
14
  import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
15
15
  import {TenantGeneralTabsIds} from '../../TenantPages';
16
- import {Loader} from '@yandex-cloud/uikit';
16
+ import {prepareQueryError} from '../../../../utils';
17
17
 
18
+ import './TopQueries.scss';
18
19
 
19
20
  const b = cn('kv-top-queries');
20
21
 
@@ -151,7 +152,7 @@ class TopQueries extends React.Component {
151
152
  if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
152
153
  message = 'No data';
153
154
  } else if (error && !error.isCancelled) {
154
- message = (error.data || error).slice(0, 300);
155
+ message = prepareQueryError(error).slice(0, 300);
155
156
  } else if (!loading && !data) {
156
157
  message = 'No data';
157
158
  }
@@ -22,8 +22,8 @@
22
22
  }
23
23
 
24
24
  &__text {
25
- font-size: var(--yc-text-body-font-size);
26
- line-height: var(--yc-text-body-line-height);
25
+ font-size: var(--yc-text-body-1-font-size);
26
+ line-height: var(--yc-text-body-1-line-height);
27
27
 
28
28
  color: var(--yc-color-text-primary);
29
29
 
@@ -1,20 +1,21 @@
1
1
  import {useContext, useEffect, useMemo} from 'react';
2
2
  import cn from 'bem-cn-lite';
3
3
  import {connect} from 'react-redux';
4
- import InternalLink from '../../../../components/InternalLink/InternalLink';
4
+ import {Loader} from '@yandex-cloud/uikit';
5
5
  import DataTable from '@yandex-cloud/react-data-table';
6
- import routes, {createHref} from '../../../../routes';
7
6
 
7
+ import InternalLink from '../../../../components/InternalLink/InternalLink';
8
+
9
+ import routes, {createHref} from '../../../../routes';
8
10
  import {sendShardQuery, setShardQueryOptions} from '../../../../store/reducers/shardsWorkload';
9
11
  import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
10
12
  import {AutoFetcher} from '../../../../utils/autofetcher';
11
-
12
13
  import HistoryContext from '../../../../contexts/HistoryContext';
14
+ import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
15
+ import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
16
+ import {prepareQueryError} from '../../../../utils';
13
17
 
14
18
  import './TopShards.scss';
15
- import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
16
- import {Loader} from '@yandex-cloud/uikit';
17
- import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
18
19
 
19
20
  const b = cn('top-shards');
20
21
  const bLink = cn('yc-link');
@@ -123,7 +124,7 @@ function TopShards({
123
124
  return 'No data';
124
125
  }
125
126
  if (error) {
126
- return error.data || error;
127
+ return prepareQueryError(error);
127
128
  }
128
129
 
129
130
  return data && data.length > 0 ? (
@@ -16,23 +16,22 @@
16
16
  padding: 13px 20px 0;
17
17
 
18
18
  box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
19
- @include body3-typography();
20
19
  .yc-tabs {
21
20
  box-shadow: unset;
22
21
  }
23
22
  }
24
23
  &__tab {
25
24
  text-decoration: none;
26
- }
27
25
 
28
- &__loader {
29
- display: flex;
26
+ // fix for bug in uikit, gap is set for yc-tabs__item:not(:last-child),
27
+ // it doesn't work for wrapped items
28
+ // feel free to remove if the bug is fixed
29
+ &:not(:last-child) {
30
+ margin-right: var(--yc-tabs-gap);
31
+ }
30
32
  }
31
33
 
32
- &__tab-label {
34
+ &__loader {
33
35
  display: flex;
34
- gap: 5px;
35
-
36
- align-items: center;
37
36
  }
38
37
  }
@@ -38,21 +38,11 @@ function ObjectGeneral(props: ObjectGeneralProps) {
38
38
  const {name: tenantName, general: generalTab} = queryParams;
39
39
 
40
40
  const renderTabs = () => {
41
- const pages = TENANT_GENERAL_TABS.map((page) => {
42
- return {
43
- ...page,
44
- title: (
45
- <div className={b('tab-label')}>
46
- {page.icon}
47
- {page.title}
48
- </div>
49
- ),
50
- };
51
- });
52
41
  return (
53
42
  <div className={b('tabs')}>
54
43
  <Tabs
55
- items={pages}
44
+ size="xl"
45
+ items={TENANT_GENERAL_TABS}
56
46
  activeTab={generalTab as string}
57
47
  wrapTo={({id}, node) => {
58
48
  const path = createHref(routes.tenant, undefined, {
@@ -6,7 +6,7 @@ import {useHistory, useLocation} from 'react-router';
6
6
  import qs from 'qs';
7
7
  import _ from 'lodash';
8
8
 
9
- import {Button, HelpTooltip, Loader, Tabs} from '@yandex-cloud/uikit';
9
+ import {Button, HelpPopover, Loader, Tabs} from '@yandex-cloud/uikit';
10
10
 
11
11
  import SplitPane from '../../../components/SplitPane';
12
12
  import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
@@ -127,6 +127,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
127
127
  return (
128
128
  <div className={b('tabs')}>
129
129
  <Tabs
130
+ size="l"
130
131
  items={tabsItems}
131
132
  activeTab={infoTab as string}
132
133
  wrapTo={({id}, node) => {
@@ -260,7 +261,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
260
261
  <div className={b('entity-type')}>{type}</div>
261
262
  ) : (
262
263
  <div className={b('entity-type', {error: true})}>
263
- <HelpTooltip content={message} offset={{left: 0}} />
264
+ <HelpPopover content={message} offset={{left: 0}} />
264
265
  </div>
265
266
  );
266
267
  };
@@ -11,7 +11,7 @@ import Fullscreen from '../../../components/Fullscreen/Fullscreen';
11
11
 
12
12
  import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
13
13
  import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
14
- import {prepareQueryResponse} from '../../../utils/index';
14
+ import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
15
15
 
16
16
  import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
17
17
  import {AutoFetcher} from '../../../utils/autofetcher';
@@ -163,7 +163,7 @@ class Preview extends React.Component {
163
163
  }
164
164
 
165
165
  if (error) {
166
- message = <div className={b('message-container')}>{error.data || error}</div>;
166
+ message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
167
167
  }
168
168
 
169
169
  if (!loading && data.length === 0) {
@@ -0,0 +1,124 @@
1
+ .kv-result-issues {
2
+ overflow: auto;
3
+
4
+ height: 100%;
5
+ padding: 0 10px;
6
+ &__error-message {
7
+ position: sticky;
8
+ z-index: 2;
9
+ top: 0;
10
+ left: 0;
11
+
12
+ display: flex;
13
+ align-items: center;
14
+
15
+ padding: 10px 0;
16
+
17
+ background-color: var(--yc-color-base-background);
18
+ }
19
+ &__error-message-text {
20
+ margin: 0 10px;
21
+ }
22
+ }
23
+
24
+ .kv-issues {
25
+ position: relative;
26
+ }
27
+
28
+ .kv-issue {
29
+ &_leaf {
30
+ margin-left: 31px;
31
+ }
32
+
33
+ &__issues {
34
+ padding-left: 24px;
35
+ }
36
+
37
+ &__line {
38
+ display: flex;
39
+ align-items: flex-start;
40
+
41
+ margin: 0 0 10px;
42
+ padding: 0 10px 0 0;
43
+ }
44
+
45
+ &__place-text {
46
+ display: inline-block;
47
+
48
+ padding-right: 10px;
49
+
50
+ text-align: left;
51
+
52
+ color: var(--yc-color-text-secondary);
53
+ }
54
+
55
+ &__message {
56
+ display: flex;
57
+
58
+ margin-right: auto;
59
+ margin-left: 10px;
60
+
61
+ font-family: var(--yc-font-family-monospace);
62
+ font-size: var(--yc-text-code-2-font-size);
63
+ line-height: var(--yc-text-header-2-line-height);
64
+ }
65
+
66
+ &__message-text {
67
+ flex: 1 1 auto;
68
+
69
+ min-width: 240px;
70
+
71
+ white-space: pre-wrap;
72
+ word-break: break-word;
73
+ }
74
+
75
+ &__code {
76
+ flex: 0 0 auto;
77
+
78
+ margin-left: 1.5em;
79
+ padding: 3px 0;
80
+
81
+ font-size: 12px;
82
+
83
+ color: var(--yc-color-text-complementary);
84
+ }
85
+
86
+ &__arrow-toggle {
87
+ margin-right: 5px;
88
+ .yc-button__text {
89
+ margin: 0 5px;
90
+ }
91
+ }
92
+ }
93
+
94
+ .yql-issue-severity {
95
+ display: flex;
96
+ align-items: center;
97
+
98
+ line-height: 28px;
99
+ white-space: nowrap;
100
+
101
+ &_severity_fatal &__icon {
102
+ color: var(--yc-color-text-danger);
103
+ }
104
+
105
+ &_severity_error &__icon {
106
+ color: var(--yc-color-text-danger);
107
+ }
108
+
109
+ &_severity_warning &__icon {
110
+ color: var(--yc-color-text-warning-medium);
111
+ }
112
+
113
+ &_severity_info &__icon {
114
+ color: var(--yc-color-text-info);
115
+ }
116
+
117
+ &__title {
118
+ margin-left: 4px;
119
+
120
+ text-transform: capitalize;
121
+
122
+ color: var(--yc-color-text-complementary);
123
+ }
124
+ }