@apia/dashboard-controller 4.0.90 → 4.0.93

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as _apia_util from '@apia/util';
-import { TId, EventEmitter } from '@apia/util';
+import { TId, EventEmitter, TasksQueue } from '@apia/util';
 import * as react from 'react';
 import { ReactNode, FC, KeyboardEvent, MouseEvent as MouseEvent$1, ComponentType, ReactPortal } from 'react';
-import { TApiaApiResult, IApiaApiRequestConfig } from '@apia/api';
 import { TSpacingLayout } from '@apia/theme';
+import { TApiaApiResult, IApiaApiRequestConfig } from '@apia/api';
 import * as _reduxjs_toolkit_dist_configureStore from '@reduxjs/toolkit/dist/configureStore';
 import * as redux_thunk from 'redux-thunk';
 import * as redux from 'redux';
@@ -73,6 +73,92 @@ interface TPanelIdentifierProps {
 }
 declare const PanelIdentifier: ({ children, name, id, title, type, }: TPanelIdentifierProps) => react.JSX.Element;
 
+type TPanelLayout = TSpacingLayout;
+
+/**
+ * **Favor de leer con cuidado el siguiente contenido, es muy importante para
+ * la performance**
+ *
+ * El hook useYieldPanelIsReady es una parte muy importante del flujo de
+ * trabajo de los dashboards. **El no reportar la carga de un panel tiene
+ * penalizaciones graves en el tiempo de renderizado inicial**, esto es porque
+ * el dashboard espera que todos los paneles hayan terminado la carga
+ * estructural básica antes de empezar con los refresh iniciales, y esto termina
+ * impactando en el tiempo que demora en bajar la cortina.
+ *
+ * **Aclaración:** Actualmente se espera las cargas estructurales para lanzar
+ * los refresh iniciales por motivos de arquitectura. Esa restricción será
+ * eliminada probablemente en el corto plazo, pero eso no cambia la necesidad de
+ * reportar las estructuras ya que esta información es igualmente utilizada para
+ * el bajado de la cortina de Skeletons.
+ *
+ * Por ejemplo, si todos los paneles están optimizados para lograr cargas
+ * iniciales rápidas pero el logo de la aplicación no reporta que su estructura
+ * está pronta, el dashboard va a bajar su cortina solamente luego de que expire
+ * el timeout **DASH_COURTAIN_TRESHOLD**, que por defecto viene establecido en 5
+ * segundos.
+ *
+ * Esto significa que aún cuando la cortina se hubiera podido bajar quizás a
+ * los pocos ms de cargado el html inicial, no lo hará porque supone que el
+ * panel Logo aún no terminó su carga estructural.
+ *
+ * Siempre que un panel esté presente en un dashboard, deberá reportar cuando
+ * la carga estructural esté pronta. Esto puede ser hecho de dos formas:
+ *
+ * - Usando { setRef } = usePanelContext(): En el elemento crucial de HTML del
+ * elemento hacer ref={setRef}. Esta es la forma más óptima ya que nos garantiza
+ * que el panel se reporte cuando su estructura HTML ya esté disponible,
+ * evitando ninguna demora.
+ *
+ * - Usando useYieldPanelIsReady(): Este hook es una alternativa disponible
+ * para las situaciones en las que no tenemos ningún elemento HTML de
+ * importancia o cuando ese elemento no está disponible hasta después de la
+ * carga inicial. Al usar este hook el panel se reportará automáticamente una
+ * vez que haya hecho el renderizado inicial.
+ */
+declare function useYieldPanelIsReady(): void;
+
+type TPanelContext = {
+    /**
+     * Permite establecer contenido arbitrario en el footer del panel.
+     */
+    setFooterContent(content: ReactNode): void;
+    /**
+     * setLayout es una función que permite decidir en qué formato se muestran
+     * los contenidos del panel.
+     *
+     * dense: No hay paddings
+     * clever: Hay paddings grandes
+     */
+    setLayout: (newLayout: TPanelLayout) => void;
+    setTitle: (newTitle: string) => void;
+    panelProps: Omit<TPanelProps$1, 'children'>;
+    /**
+     * Cuando un panel renderiza sus hijos en pantalla, debe setear el ref de
+     * modo que se pueda continuar con el flujo normal del panel. Este ref puede
+     * estar en cualquier nivel, cuando sea instanciado, se llamará al refresh
+     * inicial.
+     */
+    setRef: (el: HTMLElement | null) => void;
+};
+declare function usePanelContext(): TPanelContext;
+declare const PanelContextProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: TPanelContext;
+}) => react.JSX.Element;
+declare function useMakePanelContext(panelProps: Omit<TPanelProps$1, 'children'>): {
+    footerContent: ReactNode;
+    title: string;
+    footer: TFooter | null;
+    handleFooterClick: (ev: react.MouseEvent | react.KeyboardEvent) => void;
+    contextValue: TPanelContext;
+    ref: (el: HTMLDivElement) => void;
+};
+
+declare const EmptyPanelWrapper: PanelContainer;
+
+type TOnSucceed = (hasSucceed: boolean, data: TActionResult) => unknown;
+
 declare const eventsController: {
     callbacks: TPanelEventRegister<any>[];
     broadcast(eventType: string, payload: any): void;
@@ -110,8 +196,6 @@ type TBasicAction = {
 };
 declare function handleAction(panelIdentifier: TPanelIdentifier, event: KeyboardEvent | MouseEvent$1, action: TBasicAction): void;
 
-type TOnSucceed = (hasSucceed: boolean, data: TActionResult) => unknown;
-
 type TFooter = TBasicAction & {
     force?: boolean;
 };
@@ -171,6 +255,12 @@ type TActionHandler = (result: TActionResult) => unknown;
  */
 declare function usePanelActions(actionsHandler?: Record<string, TActionHandler>): TActionDispatcher;
 
+type TUsePanelFooter = {
+    footerContent?: ReactNode;
+    footer: TFooter | null;
+    handleFooterClick: (ev: MouseEvent$1 | KeyboardEvent) => void;
+};
+
 declare const externalFirePanelAction: TExternalActionDispatcher;
 
 declare function usePanelIsLoading(): boolean;
@@ -187,96 +277,6 @@ declare const useActionEventHandlers: () => {
     onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => (action: TBasicAction) => void;
 };
 
-type TPanelLayout = TSpacingLayout;
-
-/**
- * **Favor de leer con cuidado el siguiente contenido, es muy importante para
- * la performance**
- *
- * El hook useYieldPanelIsReady es una parte muy importante del flujo de
- * trabajo de los dashboards. **El no reportar la carga de un panel tiene
- * penalizaciones graves en el tiempo de renderizado inicial**, esto es porque
- * el dashboard espera que todos los paneles hayan terminado la carga
- * estructural básica antes de empezar con los refresh iniciales, y esto termina
- * impactando en el tiempo que demora en bajar la cortina.
- *
- * **Aclaración:** Actualmente se espera las cargas estructurales para lanzar
- * los refresh iniciales por motivos de arquitectura. Esa restricción será
- * eliminada probablemente en el corto plazo, pero eso no cambia la necesidad de
- * reportar las estructuras ya que esta información es igualmente utilizada para
- * el bajado de la cortina de Skeletons.
- *
- * Por ejemplo, si todos los paneles están optimizados para lograr cargas
- * iniciales rápidas pero el logo de la aplicación no reporta que su estructura
- * está pronta, el dashboard va a bajar su cortina solamente luego de que expire
- * el timeout **DASH_COURTAIN_TRESHOLD**, que por defecto viene establecido en 5
- * segundos.
- *
- * Esto significa que aún cuando la cortina se hubiera podido bajar quizás a
- * los pocos ms de cargado el html inicial, no lo hará porque supone que el
- * panel Logo aún no terminó su carga estructural.
- *
- * Siempre que un panel esté presente en un dashboard, deberá reportar cuando
- * la carga estructural esté pronta. Esto puede ser hecho de dos formas:
- *
- * - Usando { setRef } = usePanelContext(): En el elemento crucial de HTML del
- * elemento hacer ref={setRef}. Esta es la forma más óptima ya que nos garantiza
- * que el panel se reporte cuando su estructura HTML ya esté disponible,
- * evitando ninguna demora.
- *
- * - Usando useYieldPanelIsReady(): Este hook es una alternativa disponible
- * para las situaciones en las que no tenemos ningún elemento HTML de
- * importancia o cuando ese elemento no está disponible hasta después de la
- * carga inicial. Al usar este hook el panel se reportará automáticamente una
- * vez que haya hecho el renderizado inicial.
- */
-declare function useYieldPanelIsReady(): void;
-
-type TPanelContext = {
-    /**
-     * Permite establecer contenido arbitrario en el footer del panel.
-     */
-    setFooterContent(content: ReactNode): void;
-    /**
-     * setLayout es una función que permite decidir en qué formato se muestran
-     * los contenidos del panel.
-     *
-     * dense: No hay paddings
-     * clever: Hay paddings grandes
-     */
-    setLayout: (newLayout: TPanelLayout) => void;
-    setTitle: (newTitle: string) => void;
-    panelProps: Omit<TPanelProps$1, 'children'>;
-    /**
-     * Cuando un panel renderiza sus hijos en pantalla, debe setear el ref de
-     * modo que se pueda continuar con el flujo normal del panel. Este ref puede
-     * estar en cualquier nivel, cuando sea instanciado, se llamará al refresh
-     * inicial.
-     */
-    setRef: (el: HTMLElement | null) => void;
-};
-declare function usePanelContext(): TPanelContext;
-declare const PanelContextProvider: ({ children, value, }: {
-    children: ReactNode;
-    value: TPanelContext;
-}) => react.JSX.Element;
-declare function useMakePanelContext(panelProps: Omit<TPanelProps$1, 'children'>): {
-    footerContent: ReactNode;
-    title: string;
-    footer: TFooter | null;
-    handleFooterClick: (ev: react.MouseEvent | react.KeyboardEvent) => void;
-    contextValue: TPanelContext;
-    ref: (el: HTMLDivElement) => void;
-};
-
-declare const EmptyPanelWrapper: PanelContainer;
-
-type TUsePanelFooter = {
-    footerContent?: ReactNode;
-    footer: TFooter | null;
-    handleFooterClick: (ev: MouseEvent$1 | KeyboardEvent) => void;
-};
-
 /**
  * Permite acceder a la identidad del panel actual.
  */
@@ -364,6 +364,7 @@ declare class DashboardPanel extends EventEmitter<{
     isCollapsed: boolean;
     portal: ReactPortal;
     props: TPanelProps;
+    tasksQueue: TasksQueue;
     constructor({ id, dashboard, PanelContainer, }: {
         id: string;
         dashboard: Dashboard;
@@ -376,7 +377,8 @@ declare class DashboardPanel extends EventEmitter<{
     getContainer(): HTMLElement;
     getParameters(): TParamsStore;
     hide(): void;
-    refresh(): Promise<TActionResult>;
+    refresh(): Promise<TActionResult | undefined>;
+    queuedRefresh(): Promise<TActionResult | undefined>;
     setHasLoaded(): void;
     show(): void;
     PanelElement: ({ ActualPanelContainer, Element, }: {
@@ -418,6 +420,7 @@ declare class Dashboard extends EventEmitter<{
     urlContext: string;
     bootstrapper: DashboardPanelsBootstraper;
     panels: Record<string, DashboardPanel> | null;
+    queueRefresh: boolean;
     router: Router;
     scenes: Record<string, string[]>;
     getPanel: (id: string) => DashboardPanel;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ApiaApi, makeApiaUrl } from '@apia/api';
-import { EventEmitter, useMount, useImperativeComponentEvents, getLabel, makeImperativeComponent, toBoolean, parseXmlAsync, isChild, getSpecificParent, ucfirst, downloadUrl, useLatest } from '@apia/util';
+import { EventEmitter, useMount, useImperativeComponentEvents, getLabel, makeImperativeComponent, TasksQueue, toBoolean, parseXmlAsync, isChild, getSpecificParent, ucfirst, downloadUrl, useLatest } from '@apia/util';
 import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef, useDeferredValue, Suspense, lazy, Component, startTransition } from 'react';
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
 import { Icon } from '@apia/icons';
@@ -494,7 +494,6 @@ function useMakePanelContext(panelProps) {
   );
   const { footer, handleFooterClick } = usePanelFooter(panelProps);
   const [footerContent, setFooterContent] = useState(null);
-  const dispatch = usePanelActions();
   const hasRefreshedOnStartup = useRef(false);
   const dashboard = useDashboardContext();
   const setRef = useCallback(
@@ -502,7 +501,7 @@ function useMakePanelContext(panelProps) {
       if (el && !hasRefreshedOnStartup.current) {
         hasRefreshedOnStartup.current = true;
         if (panelProps.refreshOnStart) {
-          void dispatch({ action: "refresh" }).then(() => {
+          dashboard.getPanel(panelProps.id).refresh().then(() => {
             dashboard.bootstrapper.setPanelHasLoaded(identifier.panelId);
           });
         } else {
@@ -510,12 +509,7 @@ function useMakePanelContext(panelProps) {
         }
       }
     },
-    [
-      dashboard.bootstrapper,
-      dispatch,
-      identifier.panelId,
-      panelProps.refreshOnStart
-    ]
+    [dashboard, identifier.panelId, panelProps.id, panelProps.refreshOnStart]
   );
   const contextValue = useMemo(
     () => ({ setFooterContent, setTitle, setLayout, panelProps, setRef }),
@@ -941,6 +935,7 @@ class DashboardPanel extends EventEmitter {
     __publicField$3(this, "isCollapsed", false);
     __publicField$3(this, "portal");
     __publicField$3(this, "props", {});
+    __publicField$3(this, "tasksQueue", new TasksQueue());
     __privateAdd$3(this, _elements, {
       props: () => {
         const panelData = document.querySelector(
@@ -1119,7 +1114,16 @@ class DashboardPanel extends EventEmitter {
     this.emit("isVisible", this.isVisible);
   }
   refresh() {
-    return this.fireAction({ action: "refresh" });
+    if (this.dashboard.queueRefresh) {
+      return this.queuedRefresh();
+    } else {
+      return this.fireAction({ action: "refresh" });
+    }
+  }
+  queuedRefresh() {
+    return this.tasksQueue.run(async () => {
+      return await this.fireAction({ action: "refresh" });
+    });
   }
   setHasLoaded() {
     this.hasLoaded = true;
@@ -1748,6 +1752,8 @@ class Dashboard extends EventEmitter {
     this.urlContext = urlContext;
     __publicField(this, "bootstrapper", new DashboardPanelsBootstraper(this));
     __publicField(this, "panels", null);
+    __publicField(this, "queueRefresh", true);
+    //TODO: Crear parametro del dashboard
     __publicField(this, "router", new Router());
     __publicField(this, "scenes", {});
     __privateAdd(this, _currentScene, "/");