ydb-embedded-ui 6.2.0 → 6.2.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { EFlag } from '../../types/api/enums';
2
3
  import type { StatusIconMode, StatusIconSize } from '../StatusIcon/StatusIcon';
3
4
  import './EntityStatus.scss';
@@ -15,6 +16,7 @@ interface EntityStatusProps {
15
16
  hasClipboardButton?: boolean;
16
17
  clipboardButtonAlwaysVisible?: boolean;
17
18
  className?: string;
19
+ additionalControls?: React.ReactNode;
18
20
  }
19
- export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
21
+ export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, additionalControls, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
20
22
  export {};
@@ -1,13 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Link as UIKitLink } from '@gravity-ui/uikit';
3
- import { Link } from 'react-router-dom';
4
3
  import { EFlag } from '../../types/api/enums';
5
4
  import { cn } from '../../utils/cn';
6
5
  import { ClipboardButton } from '../ClipboardButton';
6
+ import { InternalLink } from '../InternalLink/InternalLink';
7
7
  import { StatusIcon } from '../StatusIcon/StatusIcon';
8
8
  import './EntityStatus.scss';
9
9
  const b = cn('entity-status');
10
- export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, }) {
10
+ export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, additionalControls, }) {
11
11
  const renderIcon = () => {
12
12
  if (!showStatus) {
13
13
  return null;
@@ -22,11 +22,11 @@ export function EntityStatus({ status = EFlag.Grey, name = '', label, path, icon
22
22
  if (externalLink) {
23
23
  return (_jsx(UIKitLink, { className: b('name'), href: path, children: name }));
24
24
  }
25
- return (_jsx(Link, { className: b('name'), to: path, children: name }));
25
+ return (_jsx(InternalLink, { className: b('name'), to: path, children: name }));
26
26
  }
27
27
  return name && _jsx("span", { className: b('name'), children: name });
28
28
  };
29
29
  return (_jsxs("div", { className: b(null, className), title: name, children: [iconPath ? renderStatusLink(iconPath) : renderIcon(), label && (_jsx("span", { title: label, className: b('label', { size, state: status.toLowerCase() }), children: label })), _jsx("span", { className: b('link', { 'with-left-trim': withLeftTrim }), children: renderLink() }), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
30
30
  visible: clipboardButtonAlwaysVisible,
31
- }) }))] }));
31
+ }) })), additionalControls] }));
32
32
  }
@@ -14,7 +14,9 @@
14
14
  }
15
15
 
16
16
  &__clipboard-button {
17
+ display: flex;
17
18
  visibility: hidden;
19
+ flex-shrink: 0;
18
20
 
19
21
  margin-left: 8px;
20
22
 
@@ -25,16 +27,6 @@
25
27
  }
26
28
  }
27
29
 
28
- a {
29
- text-decoration: none;
30
-
31
- color: var(--g-color-text-link);
32
- }
33
-
34
- a:hover {
35
- color: var(--g-color-text-link-hover);
36
- }
37
-
38
30
  &__label {
39
31
  margin-right: 2px;
40
32
 
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Button, PopoverBehavior } from '@gravity-ui/uikit';
3
3
  import { getDefaultNodePath } from '../../containers/Node/NodePages';
4
4
  import { cn } from '../../utils/cn';
@@ -20,5 +20,6 @@ export const NodeHostWrapper = ({ node, getNodeRef }) => {
20
20
  tenantName: node.TenantName,
21
21
  })
22
22
  : undefined;
23
- return (_jsxs(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: [_jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, className: b('host') }), nodeRef && (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) }))] }));
23
+ const additionalControls = nodeRef ? (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) })) : null;
24
+ return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, additionalControls: additionalControls }) }));
24
25
  };
@@ -1,10 +1,7 @@
1
1
  .ydb-node-host-wrapper {
2
- &__host {
3
- overflow: hidden;
4
- }
5
-
6
2
  &__external-button {
7
3
  display: none;
4
+ flex-shrink: 0;
8
5
 
9
6
  margin-left: 4px;
10
7
  }
@@ -15,10 +15,11 @@ import './Preview.scss';
15
15
  const b = cn('kv-preview');
16
16
  export const Preview = ({ database, type }) => {
17
17
  const dispatch = useTypedDispatch();
18
+ const isPreviewAvailable = isTableType(type);
18
19
  const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
19
20
  const isFullscreen = useTypedSelector((state) => state.fullscreen);
20
21
  const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
21
- const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh });
22
+ const { currentData, isFetching, error } = previewApi.useSendQueryQuery({ database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan' }, { pollingInterval: autorefresh, skip: !isPreviewAvailable });
22
23
  const loading = isFetching && currentData === undefined;
23
24
  const data = currentData !== null && currentData !== void 0 ? currentData : {};
24
25
  const handleClosePreview = () => {
@@ -31,7 +32,7 @@ export const Preview = ({ database, type }) => {
31
32
  return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));
32
33
  }
33
34
  let message;
34
- if (!isTableType(type)) {
35
+ if (!isPreviewAvailable) {
35
36
  message = _jsx("div", { className: b('message-container'), children: i18n('preview.not-available') });
36
37
  }
37
38
  else if (error) {
@@ -55,10 +55,10 @@ export const Tenants = ({ additionalTenantsProps }) => {
55
55
  var _a;
56
56
  const backend = getTenantBackend(row);
57
57
  const isExternalLink = Boolean(backend);
58
- return (_jsxs("div", { className: b('name-wrapper'), children: [_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
59
- name: row.Name,
60
- backend,
61
- }) }), (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type)] }));
58
+ return (_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
59
+ name: row.Name,
60
+ backend,
61
+ }), additionalControls: _jsx("span", { className: b('monitoring-button'), children: (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type) }) }));
62
62
  },
63
63
  width: 440,
64
64
  sortable: true,
@@ -49,10 +49,8 @@
49
49
  display: block;
50
50
  }
51
51
 
52
- &__name-wrapper {
53
- display: flex;
54
- align-items: center;
55
- gap: 4px;
52
+ &__monitoring-button {
53
+ margin-left: 4px;
56
54
  }
57
55
 
58
56
  &__name {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ydb-embedded-ui",
3
- "version": "6.2.0",
3
+ "version": "6.2.1",
4
4
  "files": [
5
5
  "dist"
6
6
  ],