ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/components/Fullscreen/Fullscreen.tsx

@@ -0,0 +1,81 @@
+import React, {useEffect} from 'react';
+import ReactDOM from 'react-dom';
+
+import {Button} from '@yandex-cloud/uikit';
+import cn from 'bem-cn-lite';
+
+import {useDispatch} from 'react-redux';
+import {disableFullscreen} from '../../store/reducers/fullscreen';
+import Icon from '../Icon/Icon';
+
+import './Fullscreen.scss';
+
+const b = cn('kv-fullscreen');
+
+interface FullscreenProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface FullscreenWrapperProps {
+    children: React.ReactNode;
+}
+
+class FullscreenWrapper extends React.Component<FullscreenWrapperProps> {
+    constructor(props: FullscreenWrapperProps) {
+        super(props);
+        this.el = document.createElement('div');
+    }
+
+    componentDidMount() {
+        this.modalRoot = document.getElementById('fullscreen-root');
+        if (this.modalRoot) {
+            this.modalRoot.appendChild(this.el);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.modalRoot) {
+            this.modalRoot.removeChild(this.el);
+        }
+    }
+
+    render() {
+        return ReactDOM.createPortal(this.props.children, this.el);
+    }
+
+    modalRoot: null | HTMLElement = null;
+    private el: HTMLElement;
+}
+
+function Fullscreen(props: FullscreenProps) {
+    const dispatch = useDispatch();
+    const escFunction = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+            onDisableFullScreen();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', escFunction, false);
+        return () => {
+            document.removeEventListener('keydown', escFunction, false);
+        };
+    }, []);
+
+    const onDisableFullScreen = () => {
+        dispatch(disableFullscreen());
+    };
+
+    return (
+        <FullscreenWrapper>
+            <div className={b(null, props.className)}>
+                <Button onClick={onDisableFullScreen} view="raised" className={b('close-button')}>
+                    <Icon name="disableFullscreen" viewBox={'0 0 16 16 '} width={16} height={16} />
+                </Button>
+                {props.children}
+            </div>
+        </FullscreenWrapper>
+    );
+}
+
+export default Fullscreen;

package/dist/components/GroupTreeViewer/GroupTreeViewer.scss

@@ -4,6 +4,7 @@
     &__row {
         display: flex;
         align-items: center;
+
         height: 34px;
     }
 

package/dist/components/GroupViewer/GroupViewer.scss

@@ -6,16 +6,20 @@
     }
 
     &__label {
-        color: var(--yc-color-text-complementary);
-        font-size: var(--yc-text-body-font-size);
         margin-right: 20px;
+
+        font-size: var(--yc-text-body-font-size);
+
+        color: var(--yc-color-text-complementary);
     }
 
     &__name {
-        color: var(--yc-color-base-special);
-        text-decoration: none;
         display: inline-block;
 
+        text-decoration: none;
+
+        color: var(--yc-color-base-special);
+
         &:before {
             transform: translateY(3px);
         }

package/dist/components/Icon/Icon.js

@@ -18,6 +18,8 @@ Icon.propTypes = {
     height: PropTypes.number,
     width: PropTypes.number,
     viewBox: PropTypes.string,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
 };
 Icon.defaultProps = {
     height: 16,

package/dist/components/InfoViewer/InfoViewer.scss

@@ -2,47 +2,53 @@
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
     &__title {
+        margin: 0 0 16px;
+
         font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
         font-weight: 500;
-        margin: 0 0 16px;
+        line-height: var(--yc-text-body2-line-height);
     }
 
     &__items {
-        display: grid;
-        grid-template-columns: max-content max-content;
-        grid-column-gap: 15px;
-        grid-row-gap: 7px;
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+
+        max-width: 100%;
     }
 
     &__row {
         display: flex;
-        align-items: center;
         align-items: flex-end;
+
+        max-width: 100%;
         height: 24px;
     }
 
     &__label {
-        color: var(--yc-color-text-primary);
-        // font-size: var(--yc-text-body-font-size);
-        white-space: nowrap;
-        max-width: 200px;
-        min-width: 200px;
-        align-items: baseline;
         display: flex;
         flex: 1 1 auto;
+        align-items: baseline;
+
+        max-width: 200px;
+
+        white-space: nowrap;
+
+        color: var(--yc-color-text-secondary);
     }
 
     &__dots {
-        min-width: 20px;
         display: flex;
         flex: 1 1 auto;
-        border-bottom: 1px dotted var(--yc-color-text-complementary);
+
         margin: 0 2px;
+
+        border-bottom: 1px dotted var(--yc-color-text-secondary);
     }
 
     &__value {
-        white-space: nowrap;
         display: flex;
+
+        white-space: nowrap;
     }
 }

package/dist/components/NodesViewer/NodesViewer.js

@@ -11,7 +11,7 @@ import ProblemFilter, {problemFilterType} from '../ProblemFilter/ProblemFilter';
 
 import {withSearch} from '../../HOCS';
 import {calcUptime} from '../../utils';
-import {ALL} from '../../utils/constants';
+import {ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {changeFilter} from '../../store/reducers/settings';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {getNodesColumns} from '../../utils/getNodesColumns';
@@ -20,13 +20,6 @@ import './NodesViewer.scss';
 
 const b = cn('nodes-viewer');
 
-const tableSettings = {
-    displayIndices: false,
-    stickyHead: DataTable.MOVING,
-    syncHeadOnResize: true,
-    dynamicRender: true,
-};
-
 class NodesViewer extends React.PureComponent {
     static propTypes = {
         nodes: PropTypes.array.isRequired,
@@ -127,9 +120,9 @@ class NodesViewer extends React.PureComponent {
             showControls,
             hideTooltip,
             showTooltip,
-            additionalNodesInfo={},
+            additionalNodesInfo = {},
         } = this.props;
-        const {filteredNodes} = this.state;
+        const {filteredNodes = []} = this.state;
 
         const columns = getNodesColumns({
             tabletsPath: path,
@@ -138,32 +131,29 @@ class NodesViewer extends React.PureComponent {
             getNodeRef: additionalNodesInfo.getNodeRef,
         });
 
-        if (filteredNodes && Array.isArray(filteredNodes)) {
-            const nodesToShow = NodesViewer.selectNodesToShow(filteredNodes, searchQuery);
-
-            return (
-                <div className={`${b()} ${className}`}>
-                    {showControls ? this.renderControls() : null}
-                    <div className={b('table-wrapper')}>
-                        {nodesToShow.length === 0 ? (
-                            <div className="no-problem" />
-                        ) : (
-                            <div className={b('table-content')}>
-                                <DataTable
-                                    theme="internal"
-                                    key={filter}
-                                    data={nodesToShow}
-                                    columns={columns}
-                                    settings={tableSettings}
-                                />
-                            </div>
-                        )}
-                    </div>
-                </div>
-            );
-        }
+        const nodesToShow = NodesViewer.selectNodesToShow(filteredNodes, searchQuery);
 
-        return <div className="error">no nodes data</div>;
+        return (
+            <div className={`${b()} ${className}`}>
+                {showControls ? this.renderControls() : null}
+                <div className={b('table-wrapper')}>
+                    {nodesToShow.length === 0 ? (
+                        <div className="no-problem" />
+                    ) : (
+                        <div className={b('table-content')}>
+                            <DataTable
+                                theme="yandex-cloud"
+                                key={filter}
+                                data={nodesToShow}
+                                columns={columns}
+                                settings={DEFAULT_TABLE_SETTINGS}
+                                emptyDataMessage="No such nodes"
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
     }
 }
 

package/dist/components/NodesViewer/NodesViewer.scss

@@ -1,24 +1,24 @@
 @import '../../styles/mixins.scss';
 
 .nodes-viewer {
-    @include flex-container();
     overflow: auto;
+    @include flex-container();
 
     &__controls {
-        margin: 25px 0 20px 20px;
         display: flex;
         align-items: center;
+        gap: 12px;
 
-        & > * {
-            margin-right: 25px;
-        }
+        margin: 0 0 8px;
     }
 
     &__name {
-        color: var(--yc-color-base-special);
+        display: inline-block;
+
         cursor: pointer;
         text-decoration: none;
-        display: inline-block;
+
+        color: var(--yc-color-base-special);
     }
 
     &__search {
@@ -30,9 +30,10 @@
     }
 
     &__tablets {
-        padding: 0 !important;
         overflow-x: auto;
 
+        padding: 0 !important;
+
         .tablets-viewer__grid {
             justify-content: center;
             grid-template-columns: 125px;
@@ -40,16 +41,17 @@
     }
 
     &__table-wrapper {
-        @include flex-container();
         overflow: auto;
+        @include flex-container();
     }
 
     &__table-content {
         overflow: auto;
+
         height: 100%;
         @include freeze-nth-column(1);
         @include freeze-nth-column(2, 80px);
-        @include freeze-nth-column(3, 120px);
+        @include freeze-nth-column(3, 430px);
 
         @include table-styles;
         @include table-sticky-styles;
@@ -58,8 +60,10 @@
         width: 100%;
         span {
             display: block;
-            width: 100%;
             overflow: hidden;
+
+            width: 100%;
+
             text-overflow: ellipsis;
         }
     }

package/dist/components/PDiskViewer/PDiskViewer.scss

@@ -5,9 +5,11 @@
     &__item,
     &__size {
         margin-right: 24px;
-        color: var(--yc-color-text-complementary);
+
         font-size: var(--yc-text-body2-font-size);
         line-height: 0;
+
+        color: var(--yc-color-text-complementary);
     }
 
     &__item .entity-status {
@@ -25,16 +27,20 @@
 
     &__size {
         width: 120px;
-        color: var(--yc-color-text-complementary);
+
         font-size: 10px;
+
+        color: var(--yc-color-text-complementary);
     }
 
     &__label {
         margin: 0 5px;
         &_link {
-            color: var(--yc-color-base-special);
-            text-decoration: none;
             display: inline-block;
+
+            text-decoration: none;
+
+            color: var(--yc-color-base-special);
         }
     }
 }

package/dist/components/Pagination/Pagination.scss

@@ -1,5 +1,6 @@
 .elements-pagination {
     display: flex;
+
     padding-left: 1px;
 
     &__divider {
@@ -7,16 +8,18 @@
     }
 
     &__control {
-        margin: 0 -1px;
         display: flex;
         align-items: center;
+
+        margin: 0 -1px;
     }
 
     &__icon {
-        color: var(--yc-color-text-primary);
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
+
+        color: var(--yc-color-text-primary);
     }
 
     &__control:hover {

package/dist/components/PoolBar/PoolBar.scss

@@ -1,40 +1,44 @@
 .pool-bar {
     position: relative;
-    width: 7px;
+
+    width: 6px;
     height: 20px;
-    margin-right: 3px;
-    border-radius: 2px;
-    border: 1px solid;
+    margin-right: 2px;
+
     cursor: pointer;
 
+    border: 1px solid;
+    border-radius: 1px;
+
     &:last-child {
         margin-right: 0;
     }
 
     &_type_normal {
-        border-color: var(--yc-color-base-positive-heavy);
+        border-color: var(--yc-color-infographics-positive-heavy);
     }
     &_type_warning {
-        border-color: var(--yc-color-text-warning-heavy);
+        border-color: var(--yc-color-infographics-warning-heavy);
     }
     &_type_danger {
-        border-color: var(--yc-color-base-danger-heavy);
+        border-color: var(--yc-color-infographics-danger-heavy);
     }
 
     &__value {
         position: absolute;
         bottom: 0;
+
         width: 100%;
         min-height: 1px;
 
         &_type_normal {
-            background-color: var(--yc-color-base-positive-heavy);
+            background-color: var(--yc-color-infographics-positive-heavy);
         }
         &_type_warning {
-            background-color: var(--yc-color-text-warning-heavy);
+            background-color: var(--yc-color-infographics-warning-heavy);
         }
         &_type_danger {
-            background-color: var(--yc-color-base-danger-heavy);
+            background-color: var(--yc-color-infographics-danger-heavy);
         }
     }
 }

package/dist/components/PoolUsage/PoolUsage.scss

@@ -3,8 +3,8 @@
     line-height: var(--yc-text-body2-line-height);
     &__info {
         display: flex;
-        align-items: center;
         justify-content: space-between;
+        align-items: center;
     }
 
     &__pool-name {
@@ -18,6 +18,7 @@
 
     &__threads {
         font-size: var(--yc-text-body-font-size);
+
         color: var(--yc-color-text-hint);
 
         .yc-root_theme_dark & {
@@ -26,27 +27,34 @@
     }
 
     &__percents {
-        color: var(--yc-color-text-primary);
-        font-size: var(--yc-text-body-font-size);
         margin-right: 2px;
+
+        font-size: var(--yc-text-body-font-size);
+
+        color: var(--yc-color-text-primary);
     }
 
     &__visual {
-        height: 6px;
-        font-size: var(--yc-text-body2-font-size);
+        position: relative;
+
         display: flex;
-        align-items: center;
+        overflow: hidden;
         justify-content: center;
+        align-items: center;
+
+        height: 6px;
+
+        font-size: var(--yc-text-body2-font-size);
+
         border-radius: 4px;
-        position: relative;
-        overflow: hidden;
         background-color: var(--yc-color-base-generic-accent);
     }
 
     &__usage-line {
         position: absolute;
-        left: 0;
         top: 0;
+        left: 0;
+
         height: 100%;
 
         &_type_green {

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -27,7 +27,7 @@ export class ProgressViewer extends React.Component {
     };
 
     static defaultProps = {
-        size: 'ns',
+        size: 'xs',
         colorizeProgress: false,
         capacity: 100,
         inverseColorize: false,

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -1,32 +1,37 @@
 .progress-viewer {
+    position: relative;
+
+    display: flex;
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+
     min-width: 120px;
-    padding: 0 4px;
     height: 23px;
+    padding: 0 4px;
+
     font-size: var(--yc-text-body2-font-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--yc-color-text-light-primary);
-    background: var(--yc-color-base-generic-accent);
-    position: relative;
-    overflow: hidden;
-    border-radius: 4px;
     white-space: nowrap;
 
+    color: var(--yc-color-text-light-primary);
+    border-radius: 2px;
+    background: var(--yc-color-base-generic);
+
     &__line {
         position: absolute;
-        height: 100%;
-        left: 0;
         top: 0;
+        left: 0;
+
+        height: 100%;
 
         &_bg_scarlet {
-            background: var(--yc-color-base-danger-heavy);
+            background: var(--yc-color-infographics-danger-heavy);
         }
         &_bg_apple {
-            background: var(--yc-color-base-positive-heavy);
+            background: var(--yc-color-infographics-positive-heavy);
         }
         &_bg_saffron {
-            background: var(--yc-color-base-warning-heavy);
+            background: var(--yc-color-infographics-warning-heavy);
         }
     }
 
@@ -42,38 +47,43 @@
     }
 
     &_size_xs {
-        height: 18px;
-        font-size: 10px;
-        line-height: var(--yc-text-lead-line-height);
+        height: 20px;
+
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
     }
 
     &_size_s {
         height: 28px;
+
         font-size: var(--yc-text-body-font-size);
         line-height: 28px;
     }
     &_size_m {
         height: 32px;
+
         font-size: var(--yc-text-body2-font-size);
         line-height: 32px;
     }
 
     &_size_ns {
         height: 24px;
+
         font-size: 13px;
         line-height: var(--yc-text-lead-line-height);
     }
 
     &_size_n {
         height: 36px;
+
         font-size: var(--yc-text-body-font-size);
         line-height: 36px;
     }
 
     &_size_l {
         height: 38px;
+
         font-size: var(--yc-text-lead-font-size);
-        line-height: var(--yc-text-lead-line-height);
         line-height: 38px;
     }
 

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.scss

@@ -0,0 +1,14 @@
+.kv-query-execution-status {
+    display: flex;
+    gap: 4px;
+
+    align-items: center;
+
+    color: var(--yc-color-text-complementary);
+    &__result-status-icon {
+        color: var(--yc-color-text-positive);
+        &_error {
+            color: var(--yc-color-text-danger);
+        }
+    }
+}

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -0,0 +1,29 @@
+import cn from 'bem-cn-lite';
+
+import Icon from '../Icon/Icon';
+
+import './QueryExecutionStatus.scss';
+
+const b = cn('kv-query-execution-status');
+
+interface QueryExecutionStatusProps {
+    className?: string;
+    hasError?: boolean;
+}
+
+function QueryExecutionStatus({className, hasError}: QueryExecutionStatusProps) {
+    return hasError === undefined ? null : (
+        <div className={b(null, className)}>
+            <Icon
+                name={hasError ? 'failure' : 'success'}
+                viewBox={hasError ? '0 0 512 512' : '0 0 16 16'}
+                width={16}
+                height={16}
+                className={b('result-status-icon', {error: hasError})}
+            />
+            {hasError ? 'Failed' : 'Completed'}
+        </div>
+    );
+}
+
+export default QueryExecutionStatus;