ydb-embedded-ui 1.0.4 → 1.1.2

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+### [1.1.2](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.1.1...v1.1.2) (2022-04-19)
+
+
+### Bug Fixes
+
+* **ObjectSummary:** should correctly parse table creation time ([c9887dd](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/c9887dd162720667dcbe3b4834b3b0ba5a9f3f6e))
+
+### [1.1.1](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.1.0...v1.1.1) (2022-04-19)
+
+
+### Bug Fixes
+
+* add typecheck + fix type errors ([e6d9086](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/e6d9086c46702a611f848c992377d18826ca2e23))
+* **Node:** scroll to selected vdisk should not apply to undefined container ([7236a43](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/7236a43655b935777abb5b8df228ae011ceb6bed))
+
+## [1.1.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.4...v1.1.0) (2022-04-15)
+
+
+### Features
+
+* local precommit check ([d5da9b3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/d5da9b3fb89eeeb5461e7e14fe33964a8ed9078d))
+* new Node Structure view ([5cf5dd3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/5cf5dd39fa59625be4bb89f16796f16ecb9d9d78))
+
+
+### Bug Fixes
+
+* **Authentication:** should be able to send authentication data with empty password [YDB-1610] ([5d4d881](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/5d4d8810bb2ddabb9db1316a99194f5a1bd986b6))
+* **Cluster:** should show additional info ([cb21ce3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/cb21ce317c55d05c7a7c166bc09dc1fe14e41692))
+* code-review ([a706903](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/a706903e6a30ee62aff5829c37ba8c197335e106))
+* different interface fixes ([0bd3a32](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/0bd3a32bf1502cc6d0f7419aa9d00653afe5d7bf))
+* improve usability ([20f1acc](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/20f1acc255876968ea366a860d33a12eecc5e74f))
+* **Nodes:** default path to node should be Overview ([ac4add6](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/ac4add6c1403ac2b9614f252fabf23b9e97ef2c2))
+* query run type select should be styled as action button [YDB-1567] ([d06cd6a](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/d06cd6ac72ccb8c7eef205fddb1153e6383baeea))
+* **QueryEditor:** should resolve row key by index [YDB-1604] ([4acd2a3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/4acd2a30d03f2e45368587839549f4e5981f93dd))
+* refactoring ([0c5aca5](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/0c5aca5b96bc5d5e9c3f121aa1ffe394f3fbd28f))
+* **Storage:** wording fixed [YDB-1552] ([431f77f](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/431f77f090073037404639c686246d2f115d98f4))
+* styles ([2725055](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/2725055b0f25e711c73e2888da41cfaf2657b110))
+
 ### [1.0.4](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.3...v1.0.4) (2022-03-24)
 
 

package/dist/assets/icons/question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z"/></svg>

package/dist/components/AsideNavigation/AsideHeader.tsx

@@ -20,7 +20,7 @@ import {
     FooterItemIconView,
 } from './constants';
 import i18n from './i18n';
-import {Lang} from 'utils/i18n';
+
 import {getLocalData, setLocalData} from './helpers';
 import {SetSlotsContext, SlotsProvider} from './AsideHeaderFooterSlot/SlotsContext';
 import {SlotName} from './AsideHeaderFooterSlot/AsideHeaderFooterSlot';
@@ -28,6 +28,7 @@ import {SlotName} from './AsideHeaderFooterSlot/AsideHeaderFooterSlot';
 import controlMenuButton from '../../assets/icons/control-menu-button.svg';
 
 import './AsideHeader.scss';
+import {Lang} from '../../utils/i18n';
 
 const b = block('nv-aside-header');
 

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -31,7 +31,7 @@ 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';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 
 const b = cn('cluster-info');
 
@@ -62,7 +62,7 @@ interface ClusterInfoProps {
     setHeader: any;
     getClusterInfo: (clusterName: string) => void;
     clusterTitle?: string;
-    additionalInfo?: IClusterInfoItem[];
+    additionalClusterInfo?: IClusterInfoItem[];
     loading: boolean;
     singleClusterMode: boolean;
     wasLoaded: boolean;
@@ -128,7 +128,11 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
     private autofetcher: any;
 
     private getInfo() {
-        const {cluster = {} as ICluster, additionalInfo = [], singleClusterMode} = this.props;
+        const {
+            cluster = {} as ICluster,
+            additionalClusterInfo = [],
+            singleClusterMode,
+        } = this.props;
         const {StorageTotal, StorageUsed} = cluster;
 
         let link = backend + '/internal';
@@ -173,7 +177,7 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
                 label: 'Versions',
                 value: <div>{cluster.Versions?.join(', ')}</div>,
             },
-            ...additionalInfo,
+            ...additionalClusterInfo,
             {
                 label: 'Internal viewer',
                 value: (

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -3,13 +3,12 @@
 .full-node-viewer {
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
-    @include container-fluid();
 
     &__title {
         margin: 0 20px 0 0;
 
         font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body2-line-height);
         text-transform: uppercase;
     }
@@ -27,14 +26,12 @@
 
     &__common-info {
         display: flex;
+        flex-direction: column;
         justify-content: flex-start;
         align-items: stretch;
     }
 
     &__section {
-        margin-right: 20px;
-        padding: 15px;
-
         border-radius: 10px;
 
         &_pools {
@@ -42,8 +39,6 @@
             grid-gap: 7px 20px;
 
             grid-template-columns: 110px 110px;
-
-            padding: 15px 15px 15px 0;
         }
     }
 
@@ -72,10 +67,10 @@
     }
 
     &__section-title {
-        margin: 15px 0 0;
+        margin: 15px 0 10px;
 
         font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body2-line-height);
     }
 

package/dist/components/InfoViewer/InfoViewer.scss

@@ -2,10 +2,10 @@
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
     &__title {
-        margin: 0 0 16px;
+        margin: 15px 0 10px;
 
         font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body2-line-height);
     }
 
@@ -30,6 +30,7 @@
         flex: 1 1 auto;
         align-items: baseline;
 
+        min-width: 200px;
         max-width: 200px;
 
         white-space: nowrap;

package/dist/components/InternalLink/InternalLink.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
 import {Link} from 'react-router-dom';
@@ -13,3 +14,10 @@ export default function InternalLink({to, children, onClick, className}) {
         children
     );
 }
+
+InternalLink.propTypes = {
+    to: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+    className: PropTypes.string,
+};

package/dist/components/Loader/Loader.scss

@@ -0,0 +1,5 @@
+@import '../../styles/mixins.scss';
+
+.kv-loader {
+    @include loader();
+}

package/dist/components/Loader/Loader.tsx

@@ -0,0 +1,16 @@
+import cn from 'bem-cn-lite';
+import {Loader as KitLoader, LoaderSize} from '@yandex-cloud/uikit';
+
+import './Loader.scss';
+
+const b = cn('kv-loader');
+
+function Loader({size = 'l'}: {size?: LoaderSize}) {
+    return (
+        <div className={b()}>
+            <KitLoader size={size} />
+        </div>
+    );
+}
+
+export default Loader;

package/dist/components/PDiskViewer/PDiskViewer.js

@@ -8,6 +8,8 @@ import EntityStatus from '../EntityStatus/EntityStatus';
 import {formatStorageValues} from '../../utils';
 import routes, {createHref} from '../../routes';
 
+import {getDefaultNodePath} from '../../containers/Node/NodePages';
+
 import './PDiskViewer.scss';
 
 const b = cn('pdisk-viewer');
@@ -48,10 +50,7 @@ class PDiskViewer extends React.Component {
                             <EntityStatus
                                 status={'green'}
                                 label="NodeID"
-                                path={createHref(routes.node, {
-                                    id: disk.NodeId,
-                                    activeTab: 'storage',
-                                })}
+                                path={getDefaultNodePath(disk.NodeId)}
                                 name={disk.NodeId}
                             />
                         </div>

package/dist/containers/App/App.scss

@@ -171,3 +171,7 @@ body,
 .app_embedded {
     font-family: 'Rubik', sans-serif;
 }
+
+.yc-popup {
+    max-width: 500px;
+}

package/dist/containers/App/Content.js

@@ -12,7 +12,6 @@ import Tenant from '../Tenant/Tenant';
 import Node from '../Node/Node';
 import Pdisk from '../Pdisk/Pdisk';
 import Group from '../Group/Group';
-import VdiskPdiskNode from '../VdiskPdiskNode/VdiskPdiskNode';
 import Pool from '../Pool/Pool';
 import Tablet from '../Tablet/Tablet';
 import TabletsFilters from '../TabletsFilters/TabletsFilters';
@@ -44,7 +43,6 @@ export function Content(props) {
                     <Route path={routes.cluster} component={Cluster} />
                     <Route path={routes.tenant} component={Tenant} />
                     <Route path={routes.pdisk} component={Pdisk} />
-                    <Route path={routes.vdisk} component={VdiskPdiskNode} />
                     <Route path={routes.node} component={Node} />
                     <Route path={routes.group} component={Group} />
                     <Route path={routes.pool} component={Pool} />

package/dist/containers/AppIcons/AppIcons.js

@@ -2,6 +2,10 @@ const AppIcons = () => (
     /* eslint-disable */
     <svg width="0" height="0">
         <defs>
+            <path
+                id="icon.information"
+                d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"
+            />
             <path
                 id="icon.tablePreview"
                 d="M13.2812 2.4375H2.71875C2.0332 2.4375 1.5 2.99609 1.5 3.65625V12.5938C1.5 13.2793 2.0332 13.8125 2.71875 13.8125H13.2812C13.9414 13.8125 14.5 13.2793 14.5 12.5938V3.65625C14.5 2.99609 13.9414 2.4375 13.2812 2.4375ZM7.1875 12.1875H3.125V9.75H7.1875V12.1875ZM7.1875 8.125H3.125V5.6875H7.1875V8.125ZM12.875 12.1875H8.8125V9.75H12.875V12.1875ZM12.875 8.125H8.8125V5.6875H12.875V8.125Z"

package/dist/containers/Authentication/Authentication.tsx

@@ -43,7 +43,7 @@ function Authentication({authenticate, error}: any) {
         authenticate(login, pass);
     };
 
-    const onEnterClick = (e: KeyboardEvent<HTMLInputElement>) => {
+    const onEnterClick = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         if (e.keyCode === 13) {
             onLoginClick();
         }
@@ -99,7 +99,7 @@ function Authentication({authenticate, error}: any) {
                     onClick={onLoginClick}
                     width="max"
                     size="l"
-                    disabled={Boolean(!login || !pass || loginError || passwordError)}
+                    disabled={Boolean(!login || loginError || passwordError)}
                     className={b('button-sign-in')}
                 >
                     Sign in

package/dist/containers/Cluster/Cluster.tsx

@@ -35,7 +35,7 @@ function Cluster(props: ClusterProps) {
                 return <Storage {...props} />;
             }
             case CLUSTER_PAGES.cluster.id: {
-                return <ClusterInfo />;
+                return <ClusterInfo additionalClusterInfo={props.additionalClusterInfo} />;
             }
             default: {
                 return null;

package/dist/containers/Header/Header.tsx

@@ -60,7 +60,12 @@ function Header() {
         }
 
         const breadcrumbItems = header.reduce((acc, el) => {
-            acc.push({text: el.text, action: () => history.push(el.link)});
+            const action = () => {
+                if (el.link) {
+                    history.push(el.link);
+                }
+            };
+            acc.push({text: el.text, action});
             return acc;
         }, [] as BreadcrumbsItem[]);
 

package/dist/containers/Heatmap/Heatmap.js

@@ -35,7 +35,6 @@ class Heatmap extends React.Component {
         hideTooltip: PropTypes.func,
         getTabletsInfo: PropTypes.func,
         nodeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        timeoutForRequest: PropTypes.number,
         path: PropTypes.string,
         clearWasLoadingFlag: PropTypes.func,
         metrics: PropTypes.array,

package/dist/containers/Node/Node.scss

@@ -5,6 +5,8 @@
     @include flex-container();
 
     &__content {
+        position: relative;
+
         overflow: auto;
         @include flex-container();
     }
@@ -17,7 +19,8 @@
     }
 
     &__tabs {
-        padding: 0 15px;
+        padding: 16px 20px 0;
+        @include body2-typography();
     }
 
     &__tab {
@@ -33,4 +36,12 @@
             text-transform: uppercase;
         }
     }
+
+    &__overview-wrapper {
+        padding: 0 20px 20px;
+    }
+
+    &__node-page-wrapper {
+        padding: 20px;
+    }
 }

package/dist/containers/Node/Node.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import {useRouteMatch} from 'react-router';
+import cn from 'bem-cn-lite';
+import {useDispatch, useSelector} from 'react-redux';
+import _ from 'lodash';
+
+import {Tabs} from '@yandex-cloud/uikit';
+import {Link} from 'react-router-dom';
+
+import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
+import Tablets from '../Tablets/Tablets';
+import Storage from '../Storage/Storage';
+import NodeOverview from './NodeOverview/NodeOverview';
+import NodeStructure from './NodeStructure/NodeStructure';
+import Loader from '../../components/Loader/Loader';
+
+import {getNodeInfo, resetNode} from '../../store/reducers/node';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+import {setHeader} from '../../store/reducers/header';
+import {AutoFetcher} from '../../utils/autofetcher';
+
+import './Node.scss';
+
+const b = cn('node');
+
+export const STORAGE_ROLE = 'Storage';
+
+const headerNodes = {
+    text: CLUSTER_PAGES.nodes.title,
+    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
+};
+
+const autofetcher = new AutoFetcher();
+
+interface NodeProps {
+    additionalNodesInfo?: any;
+    className?: string;
+}
+
+function Node(props: NodeProps) {
+    const dispatch = useDispatch();
+
+    const wasLoaded = useSelector((state: any) => state.node.wasLoaded);
+    const loading = useSelector((state: any) => state.node.loading);
+    const error = useSelector((state: any) => state.node.error);
+
+    const node = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
+
+    const nodeHost = node?.Host;
+
+    const match =
+        useRouteMatch<{id: string; activeTab: string}>(routes.node) ?? Object.create(null);
+
+    const {id: nodeId, activeTab} = match.params;
+
+    const {activeTabVerified, nodeTabs} = React.useMemo(() => {
+        const hasStorage = _.find(node?.Roles as any[], (el) => el === STORAGE_ROLE);
+        let activeTabVerified = activeTab;
+        if (!hasStorage && activeTab === STORAGE) {
+            activeTabVerified = OVERVIEW;
+        }
+        const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
+
+        const nodeTabs = nodePages.map((page) => {
+            return {
+                ...page,
+                title: page.name,
+            };
+        });
+
+        return {activeTabVerified, nodeTabs};
+    }, [activeTab, node]);
+
+    React.useEffect(() => {
+        const fetchData = () => dispatch(getNodeInfo(nodeId));
+        fetchData();
+        autofetcher.start();
+        autofetcher.fetch(() => fetchData());
+        dispatch(setHeader([headerNodes]));
+        return () => {
+            autofetcher.stop();
+            dispatch(resetNode());
+        };
+    }, [nodeId]);
+
+    React.useEffect(() => {
+        dispatch(
+            setHeader([
+                headerNodes,
+                {
+                    text: nodeHost,
+                },
+            ]),
+        );
+    }, [nodeHost]);
+
+    const renderTabs = () => {
+        return (
+            <div className={b('tabs')}>
+                <Tabs
+                    items={nodeTabs}
+                    activeTab={activeTabVerified}
+                    wrapTo={({id}, node) => (
+                        <Link
+                            to={createHref(routes.node, {id: nodeId, activeTab: id})}
+                            key={id}
+                            className={b('tab')}
+                        >
+                            {node}
+                        </Link>
+                    )}
+                    allowNotSelected={true}
+                />
+            </div>
+        );
+    };
+    const renderTabContent = () => {
+        const {additionalNodesInfo} = props;
+
+        switch (activeTab) {
+            case STORAGE: {
+                return (
+                    <div className={b('storage')}>
+                        <Storage nodeId={nodeId} />
+                    </div>
+                );
+            }
+            case TABLETS: {
+                return <Tablets nodeId={nodeId} className={b('node-page-wrapper')} />;
+            }
+
+            case OVERVIEW: {
+                return (
+                    <NodeOverview
+                        additionalNodesInfo={additionalNodesInfo}
+                        node={node}
+                        className={b('overview-wrapper')}
+                    />
+                );
+            }
+
+            case STRUCTURE: {
+                return (
+                    <NodeStructure
+                        className={b('node-page-wrapper')}
+                        nodeId={nodeId}
+                        additionalNodesInfo={additionalNodesInfo}
+                    />
+                );
+            }
+            default:
+                return false;
+        }
+    };
+
+    if (loading && !wasLoaded) {
+        return <Loader />;
+    } else if (error) {
+        return <div>{error.statusText}</div>;
+    } else {
+        if (node) {
+            return (
+                <div className={b(null, props.className)}>
+                    {renderTabs()}
+
+                    <div className={b('content')}>{renderTabContent()}</div>
+                </div>
+            );
+        }
+        return <div className="error">no node data</div>;
+    }
+}
+
+export default Node;

package/dist/containers/Node/NodeOverview/NodeOverview.tsx

@@ -0,0 +1,23 @@
+
+//@ts-ignore
+import FullNodeViewer from '../../../components/FullNodeViewer/FullNodeViewer';
+import {backend} from '../../../store';
+
+interface NodeOverviewProps {
+    node: any;
+    additionalNodesInfo: any;
+    className?: string;
+}
+
+function NodeOverview({node, additionalNodesInfo, className}: NodeOverviewProps) {
+    return (
+        <FullNodeViewer
+            node={node}
+            backend={backend}
+            additionalNodesInfo={additionalNodesInfo}
+            className={className}
+        />
+    );
+}
+
+export default NodeOverview;

package/dist/containers/Node/NodePages.js

@@ -1,13 +1,29 @@
+import routes, {createHref} from '../../routes';
+
 export const STORAGE = 'storage';
 export const TABLETS = 'tablets';
+export const OVERVIEW = 'overview';
+export const STRUCTURE = 'structure';
 
 export const NODE_PAGES = [
+    {
+        id: OVERVIEW,
+        name: 'Overview',
+    },
     {
         id: STORAGE,
         name: 'Storage',
     },
+    {id: STRUCTURE, name: 'Structure'},
     {
         id: TABLETS,
         name: 'Tablets',
     },
 ];
+
+export function getDefaultNodePath(nodeId) {
+    return createHref(routes.node, {
+        id: nodeId,
+        activeTab: OVERVIEW,
+    });
+}