ydb-embedded-ui 1.1.3 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+### [1.2.2](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.2.1...v1.2.2) (2022-05-04)
+
+
+### Bug Fixes
+
+* code-review ([288fda3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/288fda3cd207908e9b5c0486c4d486c6f2e17dd4))
+* reducer clusterInfo should not be used ([1cafcbf](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/1cafcbfb15f668b100cf6628b540b7cd234f6024))
+
+### [1.2.1](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.2.0...v1.2.1) (2022-04-27)
+
+
+### Bug Fixes
+
+* **Vdisk:** should not fail if no node id passed ([d66686d](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/d66686d0cbd9f61c4e106f6775db2fca226c922f))
+
+## [1.2.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.1.3...v1.2.0) (2022-04-26)
+
+
+### Features
+
+* **Storage:** smoother loading state for storage table ([f7f38c4](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/f7f38c455dd9abc3f898048081e90af9b460f922))
+
+
+### Bug Fixes
+
+* prevent ghost autofetch ([153d829](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/153d8291d315f1dab001a69981a12e30d3d2aea9))
+
 ### [1.1.3](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.1.2...v1.1.3) (2022-04-20)
 
 

package/dist/components/TableSkeleton/TableSkeleton.scss

@@ -0,0 +1,38 @@
+.table-skeleton {
+    width: 100%;
+
+    &__row {
+        display: flex;
+        align-items: center;
+
+        height: var(--data-table-row-height);
+
+        .yc-skeleton {
+            height: var(--yc-text-body2-line-height);
+        }
+    }
+
+    &__col-1 {
+        width: 10%;
+        margin-right: 5%;
+    }
+
+    &__col-2 {
+        width: 7%;
+        margin-right: 5%;
+    }
+
+    &__col-3,
+    &__col-4 {
+        width: 5%;
+        margin-right: 5%;
+    }
+
+    &__col-5 {
+        width: 20%;
+    }
+
+    &__col-full {
+        width: 100%;
+    }
+}

package/dist/components/TableSkeleton/TableSkeleton.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import block from 'bem-cn-lite';
+import { Skeleton } from '@yandex-cloud/uikit';
+
+import './TableSkeleton.scss';
+
+const b = block('table-skeleton');
+
+interface TableSkeletonProps {
+    className?: string;
+    rows?: number;
+}
+
+export const TableSkeleton: FC<TableSkeletonProps> = ({ rows = 2, className }) => (
+    <div className={b(null, className)}>
+        <div className={b('row')}>
+            <Skeleton className={b('col-1')} />
+            <Skeleton className={b('col-2')} />
+            <Skeleton className={b('col-3')} />
+            <Skeleton className={b('col-4')} />
+            <Skeleton className={b('col-5')} />
+        </div>
+        {[...new Array(rows)].map((_, index) => (
+            <div className={b('row')} key={`skeleton-row-${index}`}>
+                <Skeleton className={b('col-full')} />
+            </div>
+        ))}
+    </div>
+);

package/dist/containers/App/App.js

@@ -17,6 +17,8 @@ registerLanguages();
 class App extends React.Component {
     static propTypes = {
         isAuthenticated: PropTypes.bool,
+        singleClusterMode: PropTypes.bool,
+        clusterName: PropTypes.string,
         children: PropTypes.node,
     };
 
@@ -40,9 +42,10 @@ class App extends React.Component {
     }
 
     renderContentWithNavigation() {
+        const {singleClusterMode, clusterName} = this.props;
         return (
             <AsideNavigation>
-                <Content singleClusterMode={this.props.singleClusterMode} />
+                <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
                 <div id="fullscreen-root"></div>
             </AsideNavigation>
         );
@@ -58,6 +61,7 @@ function mapStateToProps(state) {
         isAuthenticated: state.authentication.isAuthenticated,
         internalUser: state.authentication.user,
         singleClusterMode: state.singleClusterMode,
+        clusterName: state.cluster.data?.Name,
     };
 }
 

package/dist/containers/App/Content.js

@@ -59,7 +59,7 @@ export function Content(props) {
     };
     return (
         <React.Fragment>
-            {!isClustersPage && <Header />}
+            {!isClustersPage && <Header clusterName={props.clusterName} />}
             <main className={b('main')}>{renderRoute()}</main>
             <ReduxTooltip />
             <AppIcons />
@@ -70,6 +70,7 @@ export function Content(props) {
 Content.propTypes = {
     singleClusterMode: PropTypes.bool,
     children: PropTypes.node,
+    clusterName: PropTypes.string,
 };
 
 function ContentWrapper(props) {

package/dist/containers/Header/Header.tsx

@@ -26,16 +26,16 @@ function ClusterName({name}: {name: string}) {
     );
 }
 
-function Header() {
+interface HeaderProps {
+    clusterName: string
+}
+
+function Header({clusterName}: HeaderProps) {
     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();
 

package/dist/containers/Storage/Storage.js

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader, RadioButton, Label} from '@yandex-cloud/uikit';
+import {RadioButton, Label} from '@yandex-cloud/uikit';
 
 import StorageFilter from './StorageFilter/StorageFilter';
 import {AutoFetcher} from '../../utils/autofetcher';
+import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 
 import {
     getStorageInfo,
@@ -68,17 +69,14 @@ class Storage extends React.Component {
             storageType,
             setHeader,
             getNodesList,
-            getStorageInfo,
         } = this.props;
 
         this.autofetcher = new AutoFetcher();
         getNodesList();
         if (tenant || nodeId) {
             setVisibleEntities(VisibleEntities.All);
-            getStorageInfo({
-                tenant,
+            this.getStorageInfo({
                 filter: FILTER_OPTIONS.All,
-                nodeId,
                 type: storageType,
             });
         } else {
@@ -88,16 +86,12 @@ class Storage extends React.Component {
                     link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
                 },
             ]);
-            getStorageInfo({
-                tenant,
-                nodeId,
+            this.getStorageInfo({
                 filter: FILTER_OPTIONS.Missing,
                 type: storageType,
             });
             this.autofetcher.fetch(() =>
-                getStorageInfo({
-                    tenant,
-                    nodeId,
+                this.getStorageInfo({
                     filter: FILTER_OPTIONS.Missing,
                     type: storageType,
                 }),
@@ -107,30 +101,23 @@ class Storage extends React.Component {
 
     componentDidUpdate(prevProps) {
         const {
-            tenant,
             visibleEntities,
-            getStorageInfo,
-            nodeId,
             storageType,
             autorefresh,
             database,
         } = this.props;
 
         const startFetch = () => {
-            getStorageInfo({
-                tenant,
+            this.getStorageInfo({
                 filter: FILTER_OPTIONS[visibleEntities],
-                nodeId,
                 type: storageType,
             });
 
             this.autofetcher.stop();
             this.autofetcher.start();
             this.autofetcher.fetch(() =>
-                getStorageInfo({
-                    tenant,
+                this.getStorageInfo({
                     filter: FILTER_OPTIONS[visibleEntities],
-                    nodeId,
                     type: storageType,
                 }),
             );
@@ -157,11 +144,25 @@ class Storage extends React.Component {
         this.props.setInitialState();
     }
 
+    getStorageInfo(data) {
+        const {
+            tenant,
+            nodeId,
+            getStorageInfo,
+        } = this.props;
+
+        getStorageInfo({
+            tenant,
+            nodeId,
+            ...data,
+        }, {
+            concurrentId: 'getStorageInfo',
+        });
+    }
+
     renderLoader() {
         return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
+            <TableSkeleton className={b('loader')}/>
         );
     }
 
@@ -200,8 +201,9 @@ class Storage extends React.Component {
     };
 
     renderControls() {
-        const {setStorageFilter, visibleEntities, storageType, flatListStorageEntities} =
+        const {setStorageFilter, visibleEntities, storageType, flatListStorageEntities, loading, wasLoaded} =
             this.props;
+        const showLoader = loading && !wasLoaded;
         return (
             <div className={b('controls')}>
                 <div className={b('search')}>
@@ -232,25 +234,28 @@ class Storage extends React.Component {
                 </RadioButton>
                 <Label theme="info" size="m">{`${
                     storageType === StorageTypes.groups ? 'Groups' : 'Nodes'
-                }: ${flatListStorageEntities.length}`}</Label>
+                }: ${(showLoader) ? '...' : flatListStorageEntities.length}`}</Label>
             </div>
         );
     }
 
     render() {
         const {loading, wasLoaded, error} = this.props;
-        if (loading && !wasLoaded) {
-            return this.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            return (
-                <div className={b()}>
-                    {this.renderControls()}
-                    {this.renderDataTable()}
-                </div>
-            );
-        }
+        const showLoader = loading && !wasLoaded;
+
+        return (
+            <div className={b()}>
+                {this.renderControls()}
+                {error && (
+                    <div>{error.statusText}</div>
+                )}
+                {showLoader ? (
+                    this.renderLoader()
+                ) : (
+                    this.renderDataTable()
+                )}
+            </div>
+        );
     }
 }
 

package/dist/containers/Storage/Storage.scss

@@ -43,12 +43,6 @@
         }
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-
-        margin-top: 100px;
-    }
     .entity-status {
         justify-content: center;
     }

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -235,11 +235,18 @@ function Vdisk(props) {
                 <DiskStateProgressBar
                     diskAllocatedPercent={vdiskAllocatedPercent}
                     severity={severity}
-                    href={createHref(
-                        routes.node,
-                        {id: props.NodeId, activeTab: STRUCTURE},
-                        {pdiskId: props.PDisk?.PDiskId, vdiskId: stringifyVdiskId(props.VDiskId)},
-                    )}
+                    href={
+                        props.NodeId
+                            ? createHref(
+                                  routes.node,
+                                  {id: props.NodeId, activeTab: STRUCTURE},
+                                  {
+                                      pdiskId: props.PDisk?.PDiskId,
+                                      vdiskId: stringifyVdiskId(props.VDiskId),
+                                  },
+                              )
+                            : undefined
+                    }
                 />
             </div>
         </React.Fragment>

package/dist/services/api.js

@@ -35,7 +35,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             storage: true,
         });
     }
-    getStorageInfo({tenant, filter, nodeId, type}) {
+    getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}) {
         return this.get(
             this.getPath(
                 `/viewer/json/${type === StorageTypes.nodes ? 'nodes' : 'storage'}?enums=true`,
@@ -45,6 +45,9 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 node_id: nodeId,
                 with: filter,
             },
+            {
+                concurrentId,
+            },
         );
     }
     getPdiskInfo(nodeId, pdiskId) {

package/dist/store/reducers/index.js

@@ -20,7 +20,6 @@ import tablet from './tablet';
 import executeQuery from './executeQuery';
 import explainQuery from './explainQuery';
 import tabletsFilters from './tabletsFilters';
-import clusterInfo from './clusterInfo';
 import settings from './settings';
 import preview from './preview';
 import nodesList from './clusterNodes';
@@ -63,7 +62,6 @@ export const rootReducer = {
     explainQuery,
     tabletsFilters,
     heatmap,
-    clusterInfo,
     settings,
     preview,
     nodesList,

package/dist/store/reducers/storage.js

@@ -74,6 +74,8 @@ const storage = function z(state = initialState, action) {
             return {
                 ...state,
                 visible: action.data,
+                wasLoaded: false,
+                error: undefined,
             };
         }
         case SET_STORAGE_TYPE: {
@@ -81,6 +83,7 @@ const storage = function z(state = initialState, action) {
                 ...state,
                 type: action.data,
                 wasLoaded: false,
+                error: undefined,
             };
         }
         default:
@@ -94,9 +97,9 @@ export function setInitialState() {
     };
 }
 
-export function getStorageInfo({tenant, filter, nodeId, type}) {
+export function getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}) {
     return createApiRequest({
-        request: window.api.getStorageInfo({tenant, filter, nodeId, type}),
+        request: window.api.getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}),
         actions: FETCH_STORAGE,
     });
 }

package/dist/utils/autofetcher.ts

@@ -3,6 +3,7 @@ export class AutoFetcher {
         this.timeout = AutoFetcher.DEFAULT_TIMEOUT;
         this.active = true;
         this.timer = undefined;
+        this.launchCounter = 0;
     }
 
     wait(ms: number) {
@@ -16,6 +17,8 @@ export class AutoFetcher {
             return;
         }
 
+        const currentLaunch = this.launchCounter;
+
         await this.wait(this.timeout);
 
         if (this.active) {
@@ -23,6 +26,12 @@ export class AutoFetcher {
             await request();
             const finishTs = Date.now();
 
+            if (currentLaunch !== this.launchCounter) {
+                // autofetcher was restarted while request was in progress
+                // stop further fetches, we are in deprecated thread
+                return;
+            }
+
             const responseTime = finishTs - startTs;
             const nextTimeout =
                 responseTime > AutoFetcher.MIN_TIMEOUT ? responseTime : AutoFetcher.MIN_TIMEOUT;
@@ -40,6 +49,7 @@ export class AutoFetcher {
         this.active = false;
     }
     start() {
+        this.launchCounter++;
         this.active = true;
     }
 
@@ -48,4 +58,5 @@ export class AutoFetcher {
     timeout: number;
     active: boolean;
     timer: undefined | ReturnType<typeof setTimeout>;
+    launchCounter: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.1.3",
+  "version": "1.2.2",
   "files": [
     "dist"
   ],

package/dist/store/reducers/clusterInfo.js

@@ -1,48 +0,0 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-
-const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
-
-const initialState = {loading: false};
-
-const clusterInfo = function (state = initialState, action) {
-    switch (action.type) {
-        case FETCH_CLUSTER.REQUEST: {
-            return {
-                ...state,
-                loading: true,
-            };
-        }
-        case FETCH_CLUSTER.SUCCESS: {
-            const {data = {}} = action;
-
-            return {
-                ...state,
-                ...data,
-                loading: false,
-                error: undefined,
-            };
-        }
-        case FETCH_CLUSTER.FAILURE: {
-            return {
-                ...state,
-                error: action.error,
-                loading: false,
-            };
-        }
-        default:
-            return state;
-    }
-};
-
-export function getCluster(name) {
-    return createApiRequest({
-        request: window.api.getClustersList(),
-        actions: FETCH_CLUSTER,
-        dataHandler: ({clusters = []}) => {
-            return clusters.filter((item) => item.name === name)[0];
-        },
-    });
-}
-
-export default clusterInfo;