ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -1,16 +1,37 @@
 import React, {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
 
+//@ts-ignore
 import EntityStatus from '../EntityStatus/EntityStatus';
+//@ts-ignore
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
+//@ts-ignore
 import InfoViewer from '../InfoViewer/InfoViewer';
+//@ts-ignore
 import Tags from '../Tags/Tags';
+//@ts-ignore
 import Tablet from '../Tablet/Tablet';
 
+//@ts-ignore
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+//@ts-ignore
+import {getClusterInfo} from '../../store/reducers/cluster';
+//@ts-ignore
+import {clusterName, backend, customBackend} from '../../store';
+
+//@ts-ignore
 import {formatStorageValues} from '../../utils';
+//@ts-ignore
 import {TxAllocator} from '../../utils/constants';
 
 import './ClusterInfo.scss';
+import {AutoFetcher} from '../../utils/autofetcher';
+import {Link, Loader} from '@yandex-cloud/uikit';
+//@ts-ignore
+import Icon from '../Icon/Icon';
+import {setHeader} from '../../store/reducers/header';
+import routes, { CLUSTER_PAGES, createHref } from '../../routes';
 
 const b = cn('cluster-info');
 
@@ -34,12 +55,18 @@ interface ICluster {
 }
 
 interface ClusterInfoProps {
-    className: string;
+    className?: string;
     cluster?: ICluster;
     hideTooltip: VoidFunction;
     showTooltip: VoidFunction;
-    clusterTitle: string;
+    setHeader: any;
+    getClusterInfo: (clusterName: string) => void;
+    clusterTitle?: string;
     additionalInfo?: IClusterInfoItem[];
+    loading: boolean;
+    singleClusterMode: boolean;
+    wasLoaded: boolean;
+    error?: {statusText: string};
 }
 
 interface ITablet {
@@ -59,19 +86,57 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
         return 0;
     }
 
+    componentDidMount() {
+        const {setHeader} = this.props;
+        setHeader([
+            {
+                text: CLUSTER_PAGES.cluster.title,
+                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.cluster.id}),
+            },
+        ]);
+        this.props.getClusterInfo(clusterName);
+        this.autofetcher = new AutoFetcher();
+        this.autofetcher.fetch(() => this.props.getClusterInfo(clusterName));
+    }
+
     shouldComponentUpdate(nextProps: ClusterInfoProps) {
         const {cluster = {}} = nextProps;
         return !(Object.keys(cluster).length === 0);
     }
 
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+
+    renderLoader() {
+        return (
+            <div className={b('loader')}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
     render() {
-        return this.renderContent();
+        const {className, error} = this.props;
+        let helper;
+        if (error) {
+            helper = error.statusText;
+        }
+        return <div className={b(null, className)}>{helper || this.renderContent()}</div>;
     }
 
+    private autofetcher: any;
+
     private getInfo() {
-        const {cluster = {} as ICluster, additionalInfo = []} = this.props;
+        const {cluster = {} as ICluster, additionalInfo = [], singleClusterMode} = this.props;
         const {StorageTotal, StorageUsed} = cluster;
 
+        let link = backend + '/internal';
+
+        if (singleClusterMode && !customBackend) {
+            link = `/internal`;
+        }
+
         const info: IClusterInfoItem[] = [
             {
                 label: 'Nodes',
@@ -109,21 +174,37 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
                 value: <div>{cluster.Versions?.join(', ')}</div>,
             },
             ...additionalInfo,
+            {
+                label: 'Internal viewer',
+                value: (
+                    <Link href={link} target="_blank">
+                        <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Link>
+                ),
+            },
         ];
 
         return info;
     }
 
     private renderContent = () => {
-        const {cluster = {} as ICluster, showTooltip, hideTooltip, clusterTitle} = this.props;
+        const {
+            cluster = {} as ICluster,
+            showTooltip,
+            hideTooltip,
+            clusterTitle,
+            loading,
+            wasLoaded,
+        } = this.props;
         const {Name: clusterName = 'Unknown cluster'} = cluster;
 
         const info = this.getInfo();
 
-        return (
-            <div className={b()}>
+        return loading && !wasLoaded ? (
+            this.renderLoader()
+        ) : (
+            <React.Fragment>
                 <div className={b('common')}>
-                    <span className={b('title')}>cluster</span>
                     <div className={b('url')}>
                         <EntityStatus
                             size="m"
@@ -149,9 +230,28 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
                     </div>
                 </div>
                 <InfoViewer dots={true} info={info} />
-            </div>
+            </React.Fragment>
         );
     };
 }
 
-export default ClusterInfo;
+const mapStateToProps = (state: any) => {
+    const {data: cluster, loading, error, wasLoaded} = state.cluster;
+
+    return {
+        cluster,
+        loading,
+        wasLoaded,
+        error,
+        singleClusterMode: state.singleClusterMode,
+    };
+};
+
+const mapDispatchToProps = {
+    getClusterInfo,
+    hideTooltip,
+    showTooltip,
+    setHeader,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ClusterInfo);

package/dist/components/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,39 @@
+import {Button, CopyToClipboard as CopyToClipboardUiKit} from '@yandex-cloud/uikit';
+import createToast from '../../utils/createToast';
+//@ts-ignore
+import Icon from '../Icon/Icon';
+
+interface CopyToClipboardProps {
+    text: string;
+    title?: string;
+    disabled?: boolean;
+    toastText?: string;
+}
+
+function CopyToClipboard(props: CopyToClipboardProps) {
+    return (
+        <CopyToClipboardUiKit text={props.text} timeout={1000}>
+            {(state) => {
+                if (state === 'success') {
+                    createToast({
+                        name: 'Copied',
+                        title: props.toastText ?? 'Data was copied to clipboard successfully',
+                        type: state,
+                    });
+                }
+
+                return (
+                    <Button
+                        disabled={props.disabled}
+                        title={props.title ?? 'Copy'}
+                        view="flat-secondary"
+                    >
+                        <Icon name="copy" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Button>
+                );
+            }}
+        </CopyToClipboardUiKit>
+    );
+}
+
+export default CopyToClipboard;

package/dist/components/CriticalActionDialog/CriticalActionDialog.scss

@@ -8,11 +8,12 @@
     &__body {
         display: flex;
         align-items: center;
-        padding: 16px 16px 0 16px;
+
+        padding: 16px 16px 0;
     }
 
     & .yc-dialog-footer {
-        padding: 20px 4px 4px 4px;
+        padding: 20px 4px 4px;
     }
 
     & .yc-dialog-footer__children {
@@ -20,9 +21,9 @@
     }
 
     & .yc-dialog-footer__button {
-        margin: 0;
-        min-width: 120px;
         box-sizing: border-box;
+        min-width: 120px;
+        margin: 0;
     }
 
     & .yc-dialog-footer__button_action_cancel {

package/dist/components/Divider/Divider.scss

@@ -0,0 +1,7 @@
+.kv-divider {
+    width: 1px;
+    height: 100%;
+    margin: 0 4px;
+
+    background-color: var(--yc-color-line-generic);
+}

package/dist/components/Divider/Divider.tsx

@@ -0,0 +1,11 @@
+import cn from 'bem-cn-lite';
+
+import './Divider.scss';
+
+const b = cn('kv-divider');
+
+function Divider() {
+    return <div className={b()}></div>;
+}
+
+export default Divider;

package/dist/components/EmptyState/EmptyState.scss

@@ -6,31 +6,33 @@
     }
 
     &__wrapper {
+        display: grid;
+        grid-template-areas:
+            'image title'
+            'image description'
+            'image description'
+            'image actions';
         &_size_s {
             width: 460px;
             height: 120px;
         }
 
         &_size_m {
+            position: relative;
+            top: 20%;
+
             width: 800px;
             height: 240px;
             margin: 0 auto;
-            position: relative;
-            top: 20%;
         }
-
-        display: grid;
-        grid-template-areas:
-            'image title'
-            'image description'
-            'image description'
-            'image actions';
     }
 
     &__image {
         grid-area: image;
         justify-self: end;
+
         margin-right: 60px;
+
         color: var(--yc-color-base-info-hover);
 
         .yc-root_theme_dark & {
@@ -39,8 +41,9 @@
     }
 
     &__title {
-        grid-area: title;
         align-self: center;
+        grid-area: title;
+
         font-weight: 500;
 
         &_size_s {
@@ -56,6 +59,7 @@
 
     &__description {
         grid-area: description;
+
         font-size: var(--yc-text-body2-font-size);
         line-height: var(--yc-text-body2-line-height);
     }

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -0,0 +1,22 @@
+import {Button} from '@yandex-cloud/uikit';
+import {useDispatch} from 'react-redux';
+import {enableFullscreen} from '../../store/reducers/fullscreen';
+import Icon from '../Icon/Icon';
+
+interface EnableFullscreenButtonProps {
+    disabled?: boolean;
+}
+
+function EnableFullscreenButton({disabled}: EnableFullscreenButtonProps) {
+    const dispatch = useDispatch();
+    const onEnableFullscreen = () => {
+        dispatch(enableFullscreen());
+    };
+    return (
+        <Button onClick={onEnableFullscreen} view="flat-secondary" disabled={disabled} title='Fullscreen'>
+            <Icon name="enableFullscreen" viewBox={'0 0 16 16'} height={16} width={16} />
+        </Button>
+    );
+}
+
+export default EnableFullscreenButton;

package/dist/components/EntityStatus/EntityStatus.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
-import {ClipboardButton, Link as ExternalLink} from '@yandex-cloud/uikit';
+import {ClipboardButton, Link as ExternalLink, Button} from '@yandex-cloud/uikit';
 
 import './EntityStatus.scss';
 
@@ -25,7 +25,7 @@ class EntityStatus extends React.Component {
     static defaultProps = {
         status: 'gray',
         text: '',
-        size: 'm',
+        size: 's',
         label: '',
         showStatus: true,
         externalLink: false,
@@ -85,7 +85,9 @@ class EntityStatus extends React.Component {
                             visible: false,
                         })}
                     >
-                        <ClipboardButton text={name} size={16} />
+                        <Button size="s">
+                            <ClipboardButton text={name} size={16} />
+                        </Button>
                     </span>
                 )}
             </div>

package/dist/components/EntityStatus/EntityStatus.scss

@@ -1,26 +1,39 @@
 .entity-status {
     display: inline-flex;
-    max-width: 100%;
     align-items: center;
+
+    max-width: 100%;
+    height: 100%;
+
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
 
     &__clipboard-button {
+        display: flex;
         visibility: hidden;
-        margin-left: 5px;
+        align-items: center;
+
+        margin-left: 8px;
+
         color: var(--yc-color-text-secondary);
 
+        .yc-button__text {
+            margin: 0 4px;
+        }
+
         &_visible {
             visibility: visible;
         }
     }
 
     a {
-        color: var(--yc-color-text-link);
-        text-decoration: none;
-        text-overflow: ellipsis;
         overflow: hidden;
+
         white-space: nowrap;
+        text-decoration: none;
+        text-overflow: ellipsis;
+
+        color: var(--yc-color-text-link);
     }
 
     a:hover {
@@ -29,9 +42,11 @@
 
     &__label {
         margin-right: 2px;
-        color: var(--yc-color-text-complementary);
+
         font-size: var(--yc-text-body2-font-size);
         line-height: var(--yc-text-body2-line-height);
+
+        color: var(--yc-color-text-complementary);
     }
 
     &__name {
@@ -39,31 +54,38 @@
     }
 
     &__status-icon {
-        border-radius: 3px;
         margin-right: 8px;
 
+        border-radius: 3px;
         &_size_xs {
-            min-width: 16px;
+            aspect-ratio: 1;
+
+            height: 12px;
+        }
+        &_size_s {
+            aspect-ratio: 1;
+
             height: 16px;
         }
         &_size_m {
-            min-width: 18px;
+            aspect-ratio: 1;
+
             height: 18px;
         }
 
         &_state_running,
         &_state_green {
-            background-color: var(--yc-color-base-positive-heavy);
+            background-color: var(--yc-color-infographics-positive-heavy);
         }
         &_state_yellow {
-            background-color: var(--yc-color-base-warning-heavy);
+            background-color: var(--yc-color-infographics-warning-heavy);
         }
         &_state_blue {
-            background-color: var(--yc-color-base-info-heavy);
+            background-color: var(--yc-color-infographics-info-heavy);
         }
 
         &_state_red {
-            background: var(--yc-color-base-danger-heavy);
+            background: var(--yc-color-infographics-danger-heavy);
         }
         &_state_gray,
         &_state_grey {

package/dist/components/FullGroupViewer/FullGroupViewer.js

@@ -10,7 +10,7 @@ import ProgressViewer from '../ProgressViewer/ProgressViewer';
 import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
 
 import {stringifyVdiskId, formatStorageValues} from '../../utils';
-import {PDISK_CATEGORIES} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, PDISK_CATEGORIES} from '../../utils/constants';
 import routes, {createHref} from '../../routes';
 
 import './FullGroupViewer.scss';
@@ -18,10 +18,8 @@ import './FullGroupViewer.scss';
 const b = cn('full-group-viewer');
 
 const tableSettings = {
-    displayIndices: false,
+    ...DEFAULT_TABLE_SETTINGS,
     stickyHead: DataTable.FIXED,
-    syncHeadOnResize: true,
-    dynamicRender: true,
 };
 
 class FullGroupViewer extends React.Component {

package/dist/components/FullGroupViewer/FullGroupViewer.scss

@@ -1,14 +1,16 @@
 @import '../../styles/mixins';
 
 .full-group-viewer {
+    overflow: auto;
     @include container-fluid();
     @include flex-container();
-    overflow: auto;
 
     &__section {
-        min-width: 315px;
         display: inline-block;
+
+        min-width: 315px;
         margin-right: 40px;
+
         border-radius: 5px;
 
         .info-viewer__label {
@@ -21,9 +23,10 @@
     }
 
     .data-table {
+        overflow: auto;
+
         margin-top: 50px;
         @include flex-container();
-        overflow: auto;
     }
 
     .data-table__table {

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -1,21 +1,23 @@
 @import '../../styles/mixins.scss';
 
 .full-node-viewer {
-    @include container-fluid();
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
+    @include container-fluid();
 
     &__title {
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
         margin: 0 20px 0 0;
+
+        font-size: var(--yc-text-body2-font-size);
         font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
         text-transform: uppercase;
     }
 
     &__row {
         display: flex;
         align-items: center;
+
         margin: 15px 0;
 
         &_id {
@@ -25,20 +27,23 @@
 
     &__common-info {
         display: flex;
-        align-items: stretch;
         justify-content: flex-start;
+        align-items: stretch;
     }
 
     &__section {
-        padding: 15px;
         margin-right: 20px;
+        padding: 15px;
+
         border-radius: 10px;
 
         &_pools {
-            padding: 15px 15px 15px 0;
             display: grid;
-            grid-template-columns: 110px 110px;
             grid-gap: 7px 20px;
+
+            grid-template-columns: 110px 110px;
+
+            padding: 15px 15px 15px 0;
         }
     }
 
@@ -47,13 +52,15 @@
     }
 
     &__label {
-        color: var(--yc-color-text-hint);
-        font-size: var(--yc-text-body2-font-size);
         min-width: 100px;
         margin-right: 25px;
+
+        font-size: var(--yc-text-body2-font-size);
         line-height: 18px;
         white-space: nowrap;
 
+        color: var(--yc-color-text-hint);
+
         .yc-root_theme_dark & {
             color: var(--yc-color-text-hint);
         }
@@ -65,10 +72,11 @@
     }
 
     &__section-title {
+        margin: 15px 0 0;
+
         font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
-        margin: 15px 0 0 0;
         font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
     }
 
     &__link {

package/dist/components/Fullscreen/Fullscreen.scss

@@ -0,0 +1,28 @@
+.kv-fullscreen {
+    position: fixed;
+    z-index: 10;
+    top: 0;
+    left: var(--nv-aside-header-size);
+
+    display: flex;
+    overflow: hidden;
+    flex-grow: 1;
+
+    width: calc(100% - var(--nv-aside-header-size));
+    height: 100%;
+
+    background-color: var(--yc-color-base-background);
+
+    &__close-button {
+        position: fixed;
+        z-index: 11;
+        top: 8px;
+        right: 20px;
+        .yc-button__text {
+            display: flex;
+            align-items: center;
+
+            margin: 0 6px;
+        }
+    }
+}