@gravity-ui/dashkit 6.5.1 → 6.6.0-beta.0

package/README.md

@@ -120,6 +120,21 @@ Before using `DashKit` as a react component, it must be configured.
   });
   ```
 
+## Settings
+
+### Autoupdate
+
+This functionality allows you to automatically update the items of the Dash. All items that should participate in the auto-update cycle must have the `reload` method.
+There are two auto-update scenarios available, the first - the classic interval to enable which is enough to pass the `autoupdateInterval` parameter and the second - the so-called `realtimeMode`.
+`realtimeMode` is useful in cases where dash items are updated at different rates and you cannot guarantee data consistency at a given time. `realtimeMode` is based on `Promise.allSettled`.
+
+| Name                | Description                                                                            |    Type   | Default |
+|:--------------------|:---------------------------------------------------------------------------------------|:---------:|:-------:|
+| autoupdateInterval  | The time, in **seconds**, the dash should delay in between executions auto-update      |  `number` |         |
+| realtimeMode        | Enable realtime mode                                                                   | `boolean` |         |
+| realtimeModeDelayMs | The time, in **milliseconds**, the dash should delay after all items have been updated |  `number` |   5000  |
+| silentLoading       | Items update status indicator. It will be passed into the Item `reload` method         | `boolean` |  false  |
+
 ### Config
 
 ```ts

package/build/cjs/components/GridLayout/GridLayout.d.ts

@@ -18,6 +18,10 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         adjustedWidgetLayout: any;
     }) => void;
     getItemsMeta: () => any;
+    getAutoupdateIntervalMs(): number;
+    startReloadItems(): any;
+    startReloadItemsTimeout(timeoutMs: any): void;
+    forceReloadItems(): void;
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (newLayout: any) => void;

package/build/cjs/components/GridLayout/GridLayout.js

@@ -50,25 +50,48 @@ class GridLayout extends react_1.default.PureComponent {
         document.addEventListener('visibilitychange', this.onVisibilityChange);
     }
     componentDidUpdate() {
-        clearTimeout(this._timeout);
-        this.reloadItems();
+        this.forceReloadItems();
     }
     componentWillUnmount() {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
     }
-    reloadItems() {
-        const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
-        const { isPageHidden } = this.state;
+    getAutoupdateIntervalMs() {
+        const { settings: { autoupdateInterval } = {} } = this.context;
         const autoupdateIntervalMs = Number(autoupdateInterval) * 1000;
+        return autoupdateIntervalMs;
+    }
+    startReloadItems() {
+        const { editMode, settings: { silentLoading } = {}, reloadItems } = this.context;
+        const { isPageHidden } = this.state;
+        if (!isPageHidden && !editMode) {
+            this._lastReloadAt = new Date().getTime();
+            return reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+        }
+        return Promise.resolve();
+    }
+    startReloadItemsTimeout(timeoutMs) {
+        this._timeout = setTimeout(() => this.forceReloadItems(), timeoutMs);
+    }
+    forceReloadItems() {
+        clearTimeout(this._timeout);
+        this._timeout = undefined;
+        this.reloadItems();
+    }
+    reloadItems() {
+        if (this._timeout)
+            return;
+        const { settings: { realtimeMode, realtimeModeDelayMs = 5000 } = {} } = this.context;
+        if (realtimeMode) {
+            this.startReloadItems().then(() => {
+                this.startReloadItemsTimeout(realtimeModeDelayMs);
+            });
+            return;
+        }
+        const autoupdateIntervalMs = this.getAutoupdateIntervalMs();
         if (autoupdateIntervalMs) {
-            const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
-            const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
-            if (!isPageHidden && !editMode && reloadIntervalRemains <= 0) {
-                this._lastReloadAt = new Date().getTime();
-                reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
-            }
-            this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
+            this.startReloadItems();
+            this.startReloadItemsTimeout(autoupdateIntervalMs);
         }
     }
     render() {

package/build/cjs/hocs/withContext.js

@@ -121,7 +121,8 @@ function useMemoStateContext(props) {
         });
     }, [props.layout, layoutUpdateCounter]);
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
-        pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
+        const promises = pluginsRefs.map((ref) => ref && ref.reload && ref.reload(data));
+        return Promise.allSettled(promises);
     }, []);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,

package/build/cjs/typings/common.d.ts

@@ -9,8 +9,10 @@ export interface Settings {
 }
 export type MenuItem = (typeof MenuItems)[keyof typeof MenuItems] | OverlayCustomControlItem;
 export interface SettingsProps {
-    autoupdateInterval: number;
+    autoupdateInterval?: number;
     silentLoading: boolean;
+    realtimeMode?: boolean;
+    realtimeModeDelayMs?: number;
 }
 export interface ContextProps {
     [key: string]: any;

package/build/esm/components/GridLayout/GridLayout.d.ts

@@ -18,6 +18,10 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         adjustedWidgetLayout: any;
     }) => void;
     getItemsMeta: () => any;
+    getAutoupdateIntervalMs(): number;
+    startReloadItems(): any;
+    startReloadItemsTimeout(timeoutMs: any): void;
+    forceReloadItems(): void;
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (newLayout: any) => void;

package/build/esm/components/GridLayout/GridLayout.js

@@ -47,25 +47,48 @@ export default class GridLayout extends React.PureComponent {
         document.addEventListener('visibilitychange', this.onVisibilityChange);
     }
     componentDidUpdate() {
-        clearTimeout(this._timeout);
-        this.reloadItems();
+        this.forceReloadItems();
     }
     componentWillUnmount() {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
     }
-    reloadItems() {
-        const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
-        const { isPageHidden } = this.state;
+    getAutoupdateIntervalMs() {
+        const { settings: { autoupdateInterval } = {} } = this.context;
         const autoupdateIntervalMs = Number(autoupdateInterval) * 1000;
+        return autoupdateIntervalMs;
+    }
+    startReloadItems() {
+        const { editMode, settings: { silentLoading } = {}, reloadItems } = this.context;
+        const { isPageHidden } = this.state;
+        if (!isPageHidden && !editMode) {
+            this._lastReloadAt = new Date().getTime();
+            return reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+        }
+        return Promise.resolve();
+    }
+    startReloadItemsTimeout(timeoutMs) {
+        this._timeout = setTimeout(() => this.forceReloadItems(), timeoutMs);
+    }
+    forceReloadItems() {
+        clearTimeout(this._timeout);
+        this._timeout = undefined;
+        this.reloadItems();
+    }
+    reloadItems() {
+        if (this._timeout)
+            return;
+        const { settings: { realtimeMode, realtimeModeDelayMs = 5000 } = {} } = this.context;
+        if (realtimeMode) {
+            this.startReloadItems().then(() => {
+                this.startReloadItemsTimeout(realtimeModeDelayMs);
+            });
+            return;
+        }
+        const autoupdateIntervalMs = this.getAutoupdateIntervalMs();
         if (autoupdateIntervalMs) {
-            const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
-            const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
-            if (!isPageHidden && !editMode && reloadIntervalRemains <= 0) {
-                this._lastReloadAt = new Date().getTime();
-                reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
-            }
-            this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
+            this.startReloadItems();
+            this.startReloadItemsTimeout(autoupdateIntervalMs);
         }
     }
     render() {

package/build/esm/hocs/withContext.js

@@ -117,7 +117,8 @@ function useMemoStateContext(props) {
         });
     }, [props.layout, layoutUpdateCounter]);
     const reloadItems = React.useCallback((pluginsRefs, data) => {
-        pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
+        const promises = pluginsRefs.map((ref) => ref && ref.reload && ref.reload(data));
+        return Promise.allSettled(promises);
     }, []);
     return React.useMemo(() => ({
         layout: resultLayout,

package/build/esm/typings/common.d.ts

@@ -9,8 +9,10 @@ export interface Settings {
 }
 export type MenuItem = (typeof MenuItems)[keyof typeof MenuItems] | OverlayCustomControlItem;
 export interface SettingsProps {
-    autoupdateInterval: number;
+    autoupdateInterval?: number;
     silentLoading: boolean;
+    realtimeMode?: boolean;
+    realtimeModeDelayMs?: number;
 }
 export interface ContextProps {
     [key: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "6.5.1",
+  "version": "6.6.0-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {