ydb-embedded-ui 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* should prepare internal link correctly ([3da36e2](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/3da36e22f6adbce6a1b14ac1afb0fb4aa46bb75f))
+
+### [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)
 
 

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -32,7 +32,7 @@ class FullNodeViewer extends React.Component {
     render() {
         const {node, className, additionalNodesInfo={}} = this.props;
         const nodeHref = additionalNodesInfo.getNodeRef
-            ? additionalNodesInfo.getNodeRef(node)
+            ? additionalNodesInfo.getNodeRef(node) + 'internal'
             : undefined;
 
         const commonInfo = [

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/Node/NodeStructure/Pdisk.tsx

@@ -68,11 +68,11 @@ function getColumns({
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.slotId],
             width: 100,
             render: ({value, row}) => {
-                let vdiskInternalViewerLink: string | undefined;
+                let vdiskInternalViewerLink = '';
 
                 if (nodeHref && value !== undefined) {
                     vdiskInternalViewerLink +=
-                        nodeHref + '/actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(value);
+                        nodeHref + 'actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(value);
                 }
 
                 return (
@@ -195,10 +195,10 @@ export function PDisk(props: PDiskProps) {
             SerialNumber,
         } = data;
 
-        let pDiskInternalViewerLink: string | undefined;
+        let pDiskInternalViewerLink = '';
 
         if (nodeHref) {
-            pDiskInternalViewerLink += nodeHref + '/actors/pdisks/pdisk' + pad9(PDiskId);
+            pDiskInternalViewerLink += nodeHref + 'actors/pdisks/pdisk' + pad9(PDiskId);
         }
 
         const pdiskInfo: any = [

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/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -153,7 +153,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     };
 
     const renderObjectOverview = () => {
-        const startTimeInMilliseconds = currentSchemaData?.CreateStep / 1000;
+        const startTimeInMilliseconds = Number(currentSchemaData?.CreateStep);
         let createTime = '';
         if (startTimeInMilliseconds) {
             createTime = new Date(startTimeInMilliseconds).toUTCString();

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/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.1",
+  "version": "1.2.0",
   "files": [
     "dist"
   ],