ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/containers/Authentication/Authentication.tsx

@@ -1,10 +1,14 @@
 import {KeyboardEvent, useEffect, useState} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Button, TextInput} from '@yandex-cloud/uikit';
+import {Button, TextInput, Icon, Link as ExternalLink} from '@yandex-cloud/uikit';
 //@ts-ignore
 import {authenticate} from '../../store/reducers/authentication';
 
+import ydbLogoIcon from '../../assets/icons/ydb.svg';
+import showIcon from '../../assets/icons/show.svg';
+import hideIcon from '../../assets/icons/hide.svg';
+
 import './Authentication.scss';
 
 const b = cn('authentication');
@@ -14,6 +18,7 @@ function Authentication({authenticate, error}: any) {
     const [pass, setPass] = useState('');
     const [loginError, setLoginError] = useState('');
     const [passwordError, setPasswordError] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
 
     useEffect(() => {
         if (error?.data?.error?.includes('user')) {
@@ -44,34 +49,62 @@ function Authentication({authenticate, error}: any) {
         }
     };
 
+    const onTogglePasswordVisibility = () => {
+        setShowPassword((prev) => !prev);
+    };
+
     return (
         <section className={b()}>
-            <div className={b('form-wrapper')}>
-                <h2>Please sign in:</h2>
+            <form className={b('form-wrapper')}>
+                <div className={b('header')}>
+                    <div className={b('logo')}>
+                        <Icon data={ydbLogoIcon} size={24} />
+                        YDB
+                    </div>
+                    <ExternalLink href="http://ydb.tech/docs" target="_blank">
+                        Documentation
+                    </ExternalLink>
+                </div>
+                <h2 className={b('title')}>Sign in</h2>
                 <div className={b('field-wrapper')}>
                     <TextInput
                         value={login}
                         onUpdate={onLoginUpdate}
                         placeholder={'Username'}
                         error={loginError}
+                        size="l"
+                        autoFocus
                     />
                 </div>
                 <div className={b('field-wrapper')}>
                     <TextInput
                         value={pass}
                         onUpdate={onPassUpdate}
-                        type="password"
+                        type={showPassword ? 'text' : 'password'}
                         placeholder={'Password'}
                         error={passwordError}
                         onKeyDown={onEnterClick}
+                        size="l"
                     />
-                </div>
-                <div className={b('field-wrapper')}>
-                    <Button view="action" onClick={onLoginClick} width="max">
-                        Let me in!
+                    <Button
+                        onClick={onTogglePasswordVisibility}
+                        size="l"
+                        className={b('show-password-button')}
+                    >
+                        <Icon data={showPassword ? hideIcon : showIcon} size={16} />
                     </Button>
                 </div>
-            </div>
+                <Button
+                    view="action"
+                    onClick={onLoginClick}
+                    width="max"
+                    size="l"
+                    disabled={Boolean(!login || !pass || loginError || passwordError)}
+                    className={b('button-sign-in')}
+                >
+                    Sign in
+                </Button>
+            </form>
         </section>
     );
 }

package/dist/containers/Cluster/Cluster.scss

@@ -1,10 +1,11 @@
 @import '../../styles/mixins.scss';
 
 .cluster {
-    @include flex-container();
-    padding: 0 20px;
     overflow: auto;
 
+    padding: 0 20px;
+    @include flex-container();
+
     &__tab {
         text-decoration: none;
 
@@ -41,12 +42,13 @@
     &__controls {
         display: flex;
         justify-content: space-between;
+
         margin: 17px 0;
     }
 
     &__table-wrapper {
         display: flex;
-        flex-direction: column;
         flex: 1 1 auto;
+        flex-direction: column;
     }
 }

package/dist/containers/Cluster/Cluster.tsx

@@ -0,0 +1,49 @@
+import cn from 'bem-cn-lite';
+//@ts-ignore
+import Tenants from '../Tenants/Tenants';
+//@ts-ignore
+import Nodes from '../Nodes/Nodes';
+//@ts-ignore
+import Storage from '../Storage/Storage';
+import routes, {CLUSTER_PAGES} from '../../routes';
+
+import './Cluster.scss';
+import {useRouteMatch} from 'react-router';
+import ClusterInfo from '../../components/ClusterInfo/ClusterInfo';
+
+const b = cn('cluster');
+
+interface ClusterProps {
+    additionalClusterInfo: any;
+    additionalTenantsInfo: any;
+    additionalNodesInfo: any;
+}
+
+function Cluster(props: ClusterProps) {
+    const match = useRouteMatch<{activeTab?: string}>(routes.cluster);
+    const activeTab = match?.params?.activeTab ?? CLUSTER_PAGES.tenants.id;
+    const renderRoutes = () => {
+        switch (activeTab) {
+            case CLUSTER_PAGES.tenants.id: {
+                return <Tenants {...props} />;
+            }
+            case CLUSTER_PAGES.nodes.id: {
+                return <Nodes {...props} />;
+            }
+            case CLUSTER_PAGES.storage.id: {
+                //@ts-ignore
+                return <Storage {...props} />;
+            }
+            case CLUSTER_PAGES.cluster.id: {
+                return <ClusterInfo />;
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+
+    return <div className={b()}>{renderRoutes()}</div>;
+}
+
+export default Cluster;

package/dist/containers/Group/Group.scss

@@ -1,6 +1,6 @@
 @import '../../styles/mixins';
 
 .group {
-    @include flex-container();
     overflow: auto;
+    @include flex-container();
 }

package/dist/containers/Header/Header.scss

@@ -1,72 +1,28 @@
+@import '../../styles/mixins.scss';
+
 .header {
-    height: 60px;
-    flex: 0 0 auto;
-    padding: 0 15px;
     display: flex;
-    align-items: center;
+    flex: 0 0 40px;
     justify-content: space-between;
-    border-bottom: 1px solid var(--yc-color-base-generic);
-
-    &__logo {
-        margin-right: 40px;
-        color: var(--yc-color-text-dark-primary);
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-light-primary);
-        }
-        .yc-root_theme_light & {
-            color: var(--yc-color-text-dark-primary);
-        }
-        user-select: none;
-        height: 38px;
-        width: 143px;
-    }
-    &__cluster-info {
-    }
-    &__cluster-info-title {
-        color: var(--yc-color-text-secondary);
-        text-transform: uppercase;
-        font-size: 12px;
-        margin-bottom: 3px;
-    }
-    &__cluster-info-name {
-        font-size: 17px;
-        font-weight: 500;
-    }
+    align-items: center;
 
-    &__theme-toggle {
-        display: flex;
-        align-items: center;
-        margin-right: 15px;
-        margin-left: auto;
-        color: var(--yc-color-text-primary);
+    padding: 0 20px 0 18px;
 
-        .yc-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+    font-weight: 600;
 
-        .yc-button__text {
-            margin: 0;
-        }
-    }
+    border-bottom: 1px solid var(--yc-color-line-generic);
 
-    &__theme-toggle + .host {
-        margin-left: 25px;
-    }
+    @include body2-typography;
 
-    &__space-divider {
-        width: 100%;
-    }
+    &__cluster-info-title {
+        font-size: var(--yc-text-body-font-size);
+        text-transform: uppercase;
 
-    &__theme-button {
-        width: 36px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        color: var(--yc-color-text-secondary);
     }
 
-    &__help-center {
-        margin-right: 15px;
+    &__cluster-info-name {
+        font-size: var(--yc-text-body2-font-size);
+        font-weight: 500;
     }
 }

package/dist/containers/Header/Header.tsx

@@ -0,0 +1,75 @@
+import {useEffect} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import cn from 'bem-cn-lite';
+import {useHistory, useLocation} from 'react-router';
+
+import {clusterName as clusterNameLocation} from '../../store';
+import {getClusterInfo} from '../../store/reducers/cluster';
+import {getHostInfo} from '../../store/reducers/host';
+
+import './Header.scss';
+import {Breadcrumbs, BreadcrumbsItem} from '@yandex-cloud/uikit';
+import {HeaderItemType} from '../../store/reducers/header';
+
+const b = cn('header');
+
+function ClusterName({name}: {name: string}) {
+    return (
+        <div className={b('cluster-info')}>
+            <div className={b('cluster-info-title')}>cluster</div>
+            <div className={b('cluster-info-name')}>{name}</div>
+        </div>
+    );
+}
+
+function Header() {
+    const dispatch = useDispatch();
+    const {data: host}: {data: {ClusterName?: string}} = useSelector((state: any) => state.host);
+    const {singleClusterMode, header}: {singleClusterMode: boolean; header: HeaderItemType[]} =
+        useSelector((state: any) => state);
+
+    const clusterName: string = useSelector(
+        (state: any) => state.cluster.data?.Name || state.clusterInfo.title,
+    );
+
+    const location = useLocation();
+    const history = useHistory();
+
+    const {pathname} = location;
+
+    useEffect(() => {
+        const isClustersPage = pathname.includes('/clusters');
+
+        if (!isClustersPage && !clusterName && !singleClusterMode) {
+            dispatch(getClusterInfo(clusterNameLocation));
+        }
+        dispatch(getHostInfo());
+    }, []);
+
+    const renderHeader = () => {
+        const clusterNameFinal = singleClusterMode ? host.ClusterName : clusterName;
+
+        const breadcrumbItems = header.reduce((acc, el) => {
+            acc.push({text: el.text, action: () => history.push(el.link)});
+            return acc;
+        }, [] as BreadcrumbsItem[]);
+
+        return (
+            <header className={b()}>
+                <div>
+                    <Breadcrumbs
+                        items={breadcrumbItems}
+                        lastDisplayedItemsCount={1}
+                        firstDisplayedItemsCount={1}
+                    />
+                </div>
+                <div>
+                    {clusterNameFinal && <ClusterName name={clusterNameFinal} />}
+                </div>
+            </header>
+        );
+    };
+    return renderHeader();
+}
+
+export default Header;

package/dist/containers/Header/Host/Host.scss

@@ -5,11 +5,14 @@
     &__common {
         display: flex;
         align-items: center;
+
         margin-bottom: 4px;
     }
     &__status {
         display: flex;
+
         margin-right: 15px;
+
         font-size: var(--yc-text-body2-font-size);
         line-height: var(--yc-text-body2-line-height);
     }
@@ -19,6 +22,7 @@
     }
     &__info-item {
         display: flex;
+
         margin-right: 20px;
 
         &:last-child {
@@ -26,18 +30,21 @@
         }
     }
     &__label {
-        color: var(--yc-color-text-hint);
+        margin-right: 10px;
+
         font-size: var(--yc-text-body-font-size);
         line-height: var(--yc-text-body-line-height);
-        margin-right: 10px;
+
+        color: var(--yc-color-text-hint);
 
         .yc-root_theme_dark & {
             color: var(--yc-color-text-hint);
         }
     }
     &__value {
-        color: var(--yc-color-text-primary);
         font-size: var(--yc-text-body-font-size);
         line-height: var(--yc-text-body-line-height);
+
+        color: var(--yc-color-text-primary);
     }
 }

package/dist/containers/Heatmap/Heatmap.js

@@ -12,7 +12,7 @@ import {Loader, Checkbox} from '@yandex-cloud/uikit';
 import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
 import {Histogram} from './Histogram/Histogram';
-import {AutoFetcher} from '../Cluster/Cluster';
+import {AutoFetcher} from '../../utils/autofetcher';
 
 import './Heatmap.scss';
 

package/dist/containers/Heatmap/Heatmap.scss

@@ -1,28 +1,33 @@
 @import '../../styles/mixins';
 
 .heatmap {
-    @include flex-container();
     overflow: auto;
 
+    height: 100%;
+    @include flex-container();
+
     &__loader {
         display: flex;
         flex: 1 1 auto;
-        align-items: center;
         justify-content: center;
+        align-items: center;
     }
 
     &__limits {
         display: flex;
         align-items: center;
+
         margin-left: 20px;
     }
     &__limits-block {
         display: flex;
+
         margin-right: 10px;
     }
     &__limits-title {
-        color: var(--yc-color-text-secondary);
         margin-right: 5px;
+
+        color: var(--yc-color-text-secondary);
     }
     &__limits-value {
     }
@@ -42,11 +47,12 @@
     }
 
     &__label {
+        margin-right: 16px;
+
         font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
         font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
         text-transform: uppercase;
-        margin-right: 16px;
 
         &_overall {
             margin-right: 15px;
@@ -58,19 +64,21 @@
     }
     &__canvas-container {
         overflow: auto;
+
         cursor: pointer;
     }
 
     &__filters {
         display: flex;
         align-items: center;
-        margin: 10px 0;
+
+        margin: 0 0 10px;
     }
 
     &__filter-control {
-        margin-right: 10px;
         min-width: 100px;
         max-width: 200px;
+        margin-right: 10px;
 
         &:last-child {
             margin-right: 0;
@@ -85,6 +93,7 @@
 
     &__row {
         display: flex;
+
         margin-bottom: 2px;
     }
 

package/dist/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js

@@ -111,9 +111,9 @@ export const HeatmapCanvas = (props) => {
         }
     };
     const _onCanvasMouseLeave = () => {
-        // Таймаут нужен для того, чтобы точно скрыть тултип. В методе _onCanvasMouseMove используется throttle.
-        // И это может вызвать функцию отрисовки тултипа уже после фактического покидания области канваса. Для этого
-        // в таймауте используем задержку больше, чем время задержки в throttle.
+        // Timeout is needed to surely hide tooltip. In _onCanvasMouseMove method is is used "throttle"
+        // and it can cause tooltip render function after canvas field is actually leaved.
+        //So we use in timeout we use a delay greater then delay in throttle.
         setTimeout(() => {
             props.hideTooltip();
         }, 40);

package/dist/containers/Heatmap/Histogram/Histogram.scss

@@ -4,46 +4,58 @@
 
     &__chart {
         position: relative;
+
         display: flex;
         align-items: baseline;
+
         width: 800px;
         height: 300px;
+        margin-top: 30px;
+        margin-left: 50px;
+
         border-bottom: 1px solid var(--yc-color-base-generic);
         border-left: 1px solid var(--yc-color-base-generic);
-        margin-left: 50px;
-        margin-top: 30px;
     }
     &__x-min {
-        color: var(--yc-color-text-secondary);
         position: absolute;
         bottom: -25px;
         left: -3px;
+
+        color: var(--yc-color-text-secondary);
     }
     &__x-max {
-        color: var(--yc-color-text-secondary);
         position: absolute;
-        bottom: -25px;
         right: 0;
+        bottom: -25px;
+
+        color: var(--yc-color-text-secondary);
     }
     &__y-min {
-        color: var(--yc-color-text-secondary);
         position: absolute;
-        width: 20px;
         bottom: -7px;
         left: -30px;
+
+        width: 20px;
+
         text-align: right;
+
+        color: var(--yc-color-text-secondary);
     }
     &__y-max {
-        color: var(--yc-color-text-secondary);
         position: absolute;
-        width: 50px;
         top: -5px;
         left: -60px;
+
+        width: 50px;
+
         text-align: right;
+
+        color: var(--yc-color-text-secondary);
     }
     &__item {
         width: 1.5%;
         margin-right: 0.5%;
+
         cursor: pointer;
     }
 }

package/dist/containers/Node/Node.js

@@ -10,7 +10,7 @@ import {withRouter, Link} from 'react-router-dom';
 import FullNodeViewer from '../../components/FullNodeViewer/FullNodeViewer';
 import {TABLETS, STORAGE, NODE_PAGES} from './NodePages';
 import Tablets from '../Tablets/Tablets';
-import Storage from '../StorageV2/Storage';
+import Storage from '../Storage/Storage';
 
 import {getNodeInfo} from '../../store/reducers/node';
 import {NODE_AUTO_RELOAD_INTERVAL} from '../../utils/constants';

package/dist/containers/Node/Node.scss

@@ -1,18 +1,19 @@
 @import '../../styles/mixins';
 
 .node {
-    @include flex-container();
     overflow: auto;
+    @include flex-container();
 
     &__content {
-        @include flex-container();
         overflow: auto;
+        @include flex-container();
     }
 
     &__storage {
-        padding-left: 20px;
         overflow: auto;
+
         height: 100%;
+        padding-left: 20px;
     }
 
     &__tabs {
@@ -20,9 +21,10 @@
     }
 
     &__tab {
-        text-decoration: none;
         margin-right: 40px;
 
+        text-decoration: none;
+
         &:last-child {
             margin-right: 0;
         }