ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/components/SplitPane/SplitPane.scss

@@ -1,49 +1,29 @@
-.split {
-    position: absolute;
+.kv-split {
     z-index: 0;
+
     display: flex;
+
     height: 100%;
-    outline: none;
+
     user-select: text;
 
-    &.vertical {
-        right: 0;
-        left: 0;
+    outline: none;
+
+    &.horizontal {
         flex-direction: row;
     }
 
-    &.horizontal {
-        top: 0;
-        bottom: 0;
+    &.vertical {
         flex-direction: column;
+
         width: 100%;
         min-height: 100%;
     }
 
-    &__pane {
-        position: relative;
-        outline: none;
-
-        &_secondary {
-            flex: 1;
-
-            &.vertical {
-                min-width: 0;
-            }
-
-            &.horizontal {
-                min-height: 0;
-            }
-        }
-
-        &_hide {
-            overflow: hidden;
-        }
-    }
-
-    &__resizer {
+    .gutter {
         position: relative;
         z-index: 10;
+
         background: var(--yc-color-base-background);
 
         &::after {
@@ -52,13 +32,16 @@
             right: 0;
             bottom: 0;
             left: 0;
-            background-color: var(--yc-color-base-generic-ultralight);
+
             content: '';
+
+            background-color: var(--yc-color-base-generic-ultralight);
         }
 
         &.active::after,
         &:hover::after {
             background-color: var(--yc-color-line-generic-hover);
+
             transition: background-color 1s ease;
         }
 
@@ -66,41 +49,51 @@
             display: none;
         }
 
-        &.horizontal {
+        &.gutter-vertical {
             width: 100%;
             height: 8px;
+
             cursor: row-resize;
 
             &::before {
                 position: absolute;
                 top: 50%;
                 left: 50%;
+
                 width: 16px;
                 height: 4px;
-                border-color: var(--yc-color-base-generic-hover);
-                border-style: solid;
+
+                content: '';
+
                 border-width: 1px 0;
+                border-style: solid;
+                border-color: var(--yc-color-base-generic-hover);
+
                 transform: translate(-50%, -50%);
-                content: '';
             }
         }
 
-        &.vertical {
+        &.gutter-horizontal {
             width: 8px;
             height: 100%;
+
             cursor: col-resize;
 
             &::before {
                 position: absolute;
                 top: 50%;
                 left: 50%;
+
                 width: 4px;
                 height: 16px;
-                border-color: var(--yc-color-base-generic-hover);
-                border-style: solid;
+
+                content: '';
+
                 border-width: 0 1px;
+                border-style: solid;
+                border-color: var(--yc-color-base-generic-hover);
+
                 transform: translate(-50%, -50%);
-                content: '';
             }
         }
     }

package/dist/components/SplitPane/SplitPane.tsx

@@ -0,0 +1,94 @@
+import cn from 'bem-cn-lite';
+import _ from 'lodash';
+import React, {useEffect, useState} from 'react';
+
+import SplitPaneLib, {SplitProps} from 'react-split';
+
+import './SplitPane.scss';
+
+const b = cn('kv-split');
+
+interface SplitPaneProps {
+    children: React.ReactNode;
+    defaultSizePaneKey: string;
+    direction?: SplitProps['direction'];
+    defaultSizes?: SplitProps['sizes'];
+    initialSizes?: SplitProps['sizes'];
+    collapsedSizes?: SplitProps['sizes'];
+    minSize?: number[];
+    triggerCollapse?: boolean;
+    triggerExpand?: boolean;
+    onSplitStartDrugAdditional?: VoidFunction;
+    onSplitDrugAdditional?: VoidFunction;
+}
+
+const minSizeDefaultInner = [0, 100];
+const sizesDefaultInner = [50, 50];
+
+function SplitPane(props: SplitPaneProps) {
+    const [innerSizes, setInnerSizes] = useState<number[]>();
+
+    const getDefaultSizePane = () => {
+        const {defaultSizePaneKey, defaultSizes = sizesDefaultInner, initialSizes} = props;
+        if (initialSizes) {
+            return initialSizes;
+        }
+        const sizes = localStorage.getItem(defaultSizePaneKey)?.split(',').map(Number);
+        return sizes || defaultSizes;
+    };
+    const setDefaultSizePane = (sizes: number[]) => {
+        const {defaultSizePaneKey} = props;
+        localStorage.setItem(defaultSizePaneKey, sizes.join(','));
+    };
+    const onDragHandler = (sizes: number[]) => {
+        const {onSplitDrugAdditional} = props;
+        if (onSplitDrugAdditional) {
+            onSplitDrugAdditional();
+        }
+        setDefaultSizePane(sizes);
+    };
+
+    const onDragStartHandler = () => {
+        const {onSplitStartDrugAdditional} = props;
+        if (onSplitStartDrugAdditional) {
+            onSplitStartDrugAdditional();
+        }
+        setInnerSizes(undefined);
+    };
+
+    useEffect(() => {
+        const {collapsedSizes, triggerCollapse} = props;
+        if (triggerCollapse) {
+            const newSizes = collapsedSizes || minSizeDefaultInner;
+            setDefaultSizePane(newSizes);
+            setInnerSizes(newSizes);
+        }
+    }, [props.triggerCollapse]);
+
+    useEffect(() => {
+        const {triggerExpand, defaultSizes} = props;
+        const newSizes = defaultSizes || sizesDefaultInner;
+        if (triggerExpand) {
+            setDefaultSizePane(newSizes);
+            setInnerSizes(newSizes);
+        }
+    }, [props.triggerExpand]);
+    return (
+        <React.Fragment>
+            <SplitPaneLib
+                direction={props.direction || 'horizontal'}
+                sizes={innerSizes || getDefaultSizePane()}
+                minSize={props.minSize || [0, 0]}
+                onDrag={onDragHandler}
+                className={b(null, props.direction || 'horizontal')}
+                gutterSize={8}
+                onDragStart={onDragStartHandler}
+                expandToMin
+            >
+                {props.children}
+            </SplitPaneLib>
+        </React.Fragment>
+    );
+}
+
+export default SplitPane;

package/dist/components/Tablet/Tablet.scss

@@ -1,16 +1,18 @@
 .tablet {
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
     display: flex;
-    align-items: center;
     justify-content: center;
-    color: var(--yc-color-text-complementary);
-    text-transform: uppercase;
+    align-items: center;
+
+    width: 18px;
+    height: 18px;
+
     font-size: 10px;
     cursor: pointer;
+    text-transform: uppercase;
 
+    color: var(--yc-color-text-complementary);
     border: 1px solid var(--yc-color-base-generic-medium-hover);
+    border-radius: 4px;
 
     &__wrapper {
         margin-right: 2px;
@@ -22,6 +24,7 @@
 
     &__type {
         line-height: 17px;
+
         color: var(--yc-color-text-complementary);
     }
 

package/dist/components/TabletsOverall/TabletsOverall.scss

@@ -0,0 +1,19 @@
+.kv-tablets-overall {
+    &__row {
+        display: flex;
+        gap: 8px;
+
+        align-items: center;
+
+        &_overall {
+            .yc-progress {
+                width: 166px;
+                margin: 0;
+            }
+        }
+    }
+
+    &__label {
+        font-weight: 500;
+    }
+}

package/dist/components/TabletsOverall/TabletsOverall.tsx

@@ -0,0 +1,105 @@
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Progress} from '@yandex-cloud/uikit';
+
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {COLORS_PRIORITY} from '../../utils/constants';
+
+import './TabletsOverall.scss';
+
+// to be able to see problem places with very small percentage, we'll set minimum percentage to 3.
+const minOverallPercentValue = 3;
+
+const colors = {
+    grey: 'var(--yc-color-base-misc-heavy)',
+    green: 'var(--yc-color-base-positive-heavy)',
+    yellow: ' var(--yc-color-base-warning-heavy)',
+    orange: 'var( --yc-color-base-warning-orange)',
+    red: 'var(--yc-color-base-danger-heavy)',
+    blue: 'var(--yc-color-base-info-heavy)',
+};
+
+const b = cn('kv-tablets-overall');
+
+type Color = keyof typeof colors;
+
+interface TabletsOverallProps {
+    tablets: {Overall: string}[];
+}
+
+function TabletsOverall({tablets}: TabletsOverallProps) {
+    const dispatch = useDispatch();
+
+    const tabletsCount = tablets.length;
+
+    const substractPercentsFromMaxPercents = (
+        statesForOverallProgress: Record<Color, number>,
+        substractValue: number,
+    ) => {
+        Object.keys(statesForOverallProgress).some((key) => {
+            if (statesForOverallProgress[key as Color] > 10) {
+                statesForOverallProgress[key as Color] -= minOverallPercentValue - substractValue;
+                return true;
+            }
+            return false;
+        });
+    };
+
+    // determine how many tablets of what color are in "tablets"
+    const statesForOverallProgress: Record<string, number> = tablets.reduce((acc, tablet) => {
+        const color = tablet.Overall.toLowerCase();
+        if (!acc[color]) {
+            acc[color] = 1;
+        } else {
+            acc[color]++;
+        }
+
+        return acc;
+    }, {} as Record<string, number>);
+
+    const tooltipData: {color: string; percents: number; value: number; total: number}[] = [];
+
+    // determine how many percents is every color in statesForOverallProgress and by the way generate information for tooltip
+    Object.keys(statesForOverallProgress).forEach((key) => {
+        const percents = (statesForOverallProgress[key] / tabletsCount) * 100;
+        const value = statesForOverallProgress[key];
+        statesForOverallProgress[key] = percents;
+        tooltipData.push({color: key, percents, value, total: tablets.length});
+    });
+
+    // replace percents which are smaller then 3 to 3.
+    Object.keys(statesForOverallProgress).forEach((key) => {
+        if (statesForOverallProgress[key] < minOverallPercentValue) {
+            substractPercentsFromMaxPercents(
+                statesForOverallProgress,
+                statesForOverallProgress[key],
+            );
+            statesForOverallProgress[key] = minOverallPercentValue;
+        }
+    });
+
+    const memoryProgress = 100;
+    const stack = Object.keys(statesForOverallProgress).map((key) => ({
+        color: colors[key as Color],
+        colorKey: key as Color,
+        value: statesForOverallProgress[key],
+    }));
+
+    // sort stack to achieve order "green, orange, yellow, red, blue, gray"
+    stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]);
+
+    return (
+        <div className={b('row', {overall: true})}>
+            <span className={b('label', {overall: true})}>Overall:</span>
+            <div
+                onMouseLeave={dispatch(hideTooltip)}
+                onMouseEnter={(e) => dispatch(showTooltip(e.target, tooltipData, 'tabletsOverall'))}
+            >
+                <Progress value={memoryProgress} stack={stack} />
+            </div>
+        </div>
+    );
+}
+
+export default TabletsOverall;

package/dist/components/TabletsStatistic/TabletsStatistic.scss

@@ -1,41 +1,47 @@
 .tablets-statistic {
     display: flex;
     align-items: center;
+    gap: 2px;
 
     &__tablet {
-        // min-width: 20px;
-        padding: 2px 4px;
-        height: 20px;
         display: inline-block;
-        border-radius: 4px;
+
+        height: 20px;
+        padding: 0 4px;
+
+        font-size: 11px;
+        line-height: 20px;
         text-align: center;
-        line-height: 14px;
-        color: var(--yc-color-text-complementary);
-        text-transform: uppercase;
-        font-size: 10px;
-        margin-right: 4px;
         text-decoration: none;
-        border: 1px solid var(--yc-color-base-generic-medium-hover);
+        text-transform: uppercase;
+
+        color: var(--yc-color-text-secondary);
+        border: 1px solid;
+        border-radius: 2px;
 
         &_state_green {
-            background-color: var(--yc-color-base-positive-heavy);
+            color: var(--yc-color-text-positive);
+            background-color: var(--yc-color-base-positive);
         }
         &_state_yellow {
-            background-color: var(--yc-color-base-warning-heavy);
+            color: var(--yc-color-text-warning-medium);
+            background-color: var(--yc-color-base-warning);
         }
         &_state_blue {
-            background-color: var(--yc-color-base-info-heavy);
+            color: var(--yc-color-text-info);
+            background-color: var(--yc-color-base-info);
         }
         &_state_orange {
-            background: var(--yc-color-text-warning-heavy);
+            color: var(--yc-color-text-warning-heavy);
+            background-color: var(--yc-color-infographics-warning-light);
         }
         &_state_red {
-            background: var(--yc-color-base-danger-heavy);
-            color: var(--yc-color-text-light-primary);
+            color: var(--yc-color-text-danger);
+            background: var(--yc-color-base-danger);
         }
         &_state_gray {
-            background: var(--yc-color-text-complementary);
-            color: var(--yc-color-text-light-primary);
+            color: var(--yc-color-text-secondary);
+            border: 1px solid var(--yc-color-line-generic-hover);
         }
     }
 }

package/dist/components/TabletsViewer/TabletsViewer.scss

@@ -1,37 +1,40 @@
 .tablets-viewer {
     &__grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, 125px);
         grid-gap: 8px;
+
+        grid-template-columns: repeat(auto-fill, 125px);
     }
 
     &__row {
         display: flex;
         align-items: center;
+
         margin: 0;
     }
 
     &__tablet-label {
-        color: var(--yc-color-text-hint);
-        font-size: var(--yc-text-body-font-size);
+        min-width: 60px;
         margin-right: 20px;
+
+        font-size: var(--yc-text-body-font-size);
         line-height: 18px;
         white-space: nowrap;
-        min-width: 60px;
         text-transform: capitalize;
 
+        color: var(--yc-color-text-hint);
+
         .yc-root_theme_dark & {
             color: var(--yc-color-text-hint);
         }
     }
 
     &__title {
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
-        font-weight: 500;
-        line-height: 20px;
-        font-weight: bold;
         margin: 0;
         margin-bottom: 16px;
+
+        font-size: var(--yc-text-body2-font-size);
+        font-weight: bold;
+        line-height: 20px;
     }
 }

package/dist/components/Tag/Tag.scss

@@ -1,11 +1,13 @@
 .tag {
+    margin-right: 5px;
     padding: 2px 5px;
-    text-transform: uppercase;
-    background: var(--yc-color-base-generic);
-    border-radius: 3px;
+
     font-size: 12px;
+    text-transform: uppercase;
+
     color: var(--yc-color-text-primary);
-    margin-right: 5px;
+    border-radius: 3px;
+    background: var(--yc-color-base-generic);
 
     &:last-child {
         margin-right: 0;

package/dist/components/Tags/Tags.scss

@@ -1,5 +1,5 @@
 .tags {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
+    align-items: center;
 }

package/dist/components/TreeView/TreeView.js

@@ -29,7 +29,7 @@ const TreeView = (props) => {
                     className={b('arrow-icon', {extended: !collapsed})}
                     onClick={clickableLabel ? undefined : onClick}
                 >
-                    <Icon name="arrow-right" viewBox="0 0 6 11" width="6" height="11" />
+                    <Icon name="arrow-right" viewBox="0 0 6 11" width={6} height={11} />
                 </span>
             ) : null}
             {nodeLabel}

package/dist/components/TreeView/TreeView.scss

@@ -5,8 +5,11 @@
 
     &__node-wrapper {
         display: flex;
+        overflow: hidden;
         align-items: center;
 
+        width: 100%;
+
         &_clickable {
             cursor: pointer;
         }
@@ -15,8 +18,10 @@
     &__arrow-icon {
         display: flex;
         justify-content: center;
+
         width: 11px;
         margin-right: 8px;
+
         cursor: pointer;
 
         &_extended {
@@ -27,4 +32,8 @@
             vertical-align: middle;
         }
     }
+    .yc-icon {
+        display: flex;
+        flex-shrink: 0;
+    }
 }

package/dist/components/TruncatedQuery/TruncatedQuery.scss

@@ -1,9 +1,10 @@
 .kv-truncated-query {
-    word-break: break-word;
-    white-space: pre;
-    vertical-align: top;
     max-width: 100%;
 
+    vertical-align: top;
+    white-space: pre;
+    word-break: break-word;
+
     &_color {
         &_secondary {
             color: var(--yc-color-text-secondary);

package/dist/containers/App/App.js

@@ -43,6 +43,7 @@ class App extends React.Component {
         return (
             <AsideNavigation>
                 <Content singleClusterMode={this.props.singleClusterMode} />
+                <div id="fullscreen-root"></div>
             </AsideNavigation>
         );
     }