From 5d9046f9d7877deb221b152bd705a7e8af61a011 Mon Sep 17 00:00:00 2001
From: Federico Rodriguez <federico.rodriguez@wazuh.com>
Date: Thu, 24 Oct 2024 15:40:40 +0200
Subject: [PATCH] Fix agents chart loading state (#7120)

* Fix agents chart loading state

* Add changelog
---
 CHANGELOG.md                                  |  1 +
 .../public/components/overview/overview.tsx   |  4 +-
 .../controllers/overview/components/stats.js  | 82 +++++++++++--------
 3 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5cc2303e22..7bd848e047 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 - Fixed read-only users could not access to Statistics application [#7001](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7001)
 - Fixed no-agent-alert spawn with selected agent in agent-welcome view [#7029](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7029)
+- Fixed loading state of the agents status chart in the home overview [#7120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7120)
 - Fixed security policy exception when it contained deprecated actions [#7042](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7042)
 - Fixed export formatted csv data with special characters from tables [#7048](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7048)
 - Fixed column reordering feature [#7072](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7072)
diff --git a/plugins/main/public/components/overview/overview.tsx b/plugins/main/public/components/overview/overview.tsx
index de7a53e7de..91e9c97528 100644
--- a/plugins/main/public/components/overview/overview.tsx
+++ b/plugins/main/public/components/overview/overview.tsx
@@ -40,6 +40,7 @@ export const Overview: React.FC = withRouteResolvers({
   savedSearch,
 })(() => {
   const [agentsCounts, setAgentsCounts] = useState<object>({});
+  const [isAgentsLoading, setIsAgentsLoading] = useState<boolean>(true);
   const { tab = 'welcome', tabView = 'dashboard', agentId } = useRouterSearch();
   const navigationService = NavigationService.getInstance();
   const pinnedAgentManager = new PinnedAgentManager();
@@ -131,6 +132,7 @@ export const Overview: React.FC = withRouteResolvers({
         },
       } = await WzRequest.apiReq('GET', '/agents/summary/status', {});
       setAgentsCounts(data);
+      setIsAgentsLoading(false);
     } catch (error) {
       return Promise.reject(error);
     }
@@ -167,7 +169,7 @@ export const Overview: React.FC = withRouteResolvers({
         <EuiPage paddingSize='l'>
           <EuiFlexGroup direction='column'>
             <EuiFlexItem>
-              <Stats {...agentsCounts} />
+              <Stats {...agentsCounts} isAgentsLoading={isAgentsLoading} />
             </EuiFlexItem>
             <EuiFlexItem>
               <OverviewWelcome {...agentsCounts} />
diff --git a/plugins/main/public/controllers/overview/components/stats.js b/plugins/main/public/controllers/overview/components/stats.js
index 97fbb7cfec..aec7fcbfba 100644
--- a/plugins/main/public/controllers/overview/components/stats.js
+++ b/plugins/main/public/controllers/overview/components/stats.js
@@ -79,20 +79,39 @@ export const Stats = withErrorBoundary(
       );
     }
 
+    /**
+     * Calculate the size of the visualization evaluating if it renders the internal loading or the chart
+     * based on the viewport size
+     */
+    getVisualizationSize() {
+      const normalLoadingSize = { width: 377, height: '150px' };
+      const mobileLoadingSize = {
+        height: '150px',
+      };
+      const loadingSize =
+        window.innerWidth < 768 ? mobileLoadingSize : normalLoadingSize;
+      const size = this.props.isAgentsLoading
+        ? loadingSize
+        : { width: '100%', height: '150px' };
+      return size;
+    }
+
     render() {
+      const { isAgentsLoading } = this.props;
       const hasResults = this.agentStatus.some(
         ({ status }) => this.props[status],
       );
+      const showAgentsChart = isAgentsLoading || hasResults;
 
       return (
         <EuiFlexGroup gutterSize='l'>
           <EuiFlexItem grow={false}>
             <EuiCard betaBadgeLabel='Agents summary' title=''>
-              {hasResults ? (
+              {showAgentsChart ? (
                 <VisualizationBasic
-                  isLoading={this.state.loadingSummary}
+                  isLoading={isAgentsLoading}
                   type='donut'
-                  size={{ width: '100%', height: '150px' }}
+                  size={this.getVisualizationSize()}
                   showLegend
                   data={this.agentStatus.map(
                     ({ status, label, color, onClick }) => ({
@@ -107,36 +126,33 @@ export const Stats = withErrorBoundary(
                   )}
                 />
               ) : (
-                !hasResults &&
-                this.props !== undefined && (
-                  <EuiEmptyPrompt
-                    body={
-                      <p>
-                        This instance has no agents registered.
-                        <br />
-                        Please deploy agents to begin monitoring your endpoints.
-                      </p>
-                    }
-                    actions={
-                      <WzButtonPermissions
-                        color='primary'
-                        fill
-                        permissions={[
-                          { action: 'agent:create', resource: '*:*:*' },
-                        ]}
-                        iconType='plusInCircle'
-                        href={NavigationService.getInstance().getUrlForApp(
-                          endpointSummary.id,
-                          {
-                            path: `#${endpointSummary.redirectTo()}deploy`,
-                          },
-                        )}
-                      >
-                        Deploy new agent
-                      </WzButtonPermissions>
-                    }
-                  />
-                )
+                <EuiEmptyPrompt
+                  body={
+                    <p>
+                      This instance has no agents registered.
+                      <br />
+                      Please deploy agents to begin monitoring your endpoints.
+                    </p>
+                  }
+                  actions={
+                    <WzButtonPermissions
+                      color='primary'
+                      fill
+                      permissions={[
+                        { action: 'agent:create', resource: '*:*:*' },
+                      ]}
+                      iconType='plusInCircle'
+                      href={NavigationService.getInstance().getUrlForApp(
+                        endpointSummary.id,
+                        {
+                          path: `#${endpointSummary.redirectTo()}deploy`,
+                        },
+                      )}
+                    >
+                      Deploy new agent
+                    </WzButtonPermissions>
+                  }
+                />
               )}
             </EuiCard>
           </EuiFlexItem>