Remove many loading spinners in some views (#6956)

* feat: Add loading searchbar progress component * Change loading spinners to search progress in some views * style: Remove unused imports and elements from LoadingSearchbarProgress * Bump Wazuh 4.9.2 rev 00 (#6971) * Bump version to 4.9.2 * Fix changelog * Update Wazuh version to 4.9.1 in all files * Fix Prettier issues * Refactor error handling imports in wz-flyout-discover * Fix Prettier issues * Update loading spinner to loading searchbar progress component * Refactor loading spinners to use searchbar progress bars * Refactor loading spinner and panel components * Update condition to check for server in third argument * Remove loading spinner component and styles * Refactor compliance table functions and components * Remove unnecessary SCSS file import in LoadingSearchbarProgress * Refactor function parameters and object keys in compliance table --------- Co-authored-by: Federico Rodriguez <[email protected]>
wazuh · Sep 18, 2024 · 59c8784 · 59c8784
1 parent b9a98e4
commit 59c8784
Show file tree

Hide file tree

Showing 33 changed files with 1,075 additions and 1,073 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Upgraded Event-tab column selector showing first the picked columns [#6984](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6984)
 - Changed vulnerabilities.reference to links in Vulnerability Detection > Inventory columns [#6960](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6960)
 - Upgraded the `follow-redirects` dependency to `1.15.6` [#6982](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6982)
+- Changed many loading spinners in some views to loading search progress [#6956](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6956)
 
 ## Wazuh v4.9.0 - OpenSearch Dashboards 2.13.0 - Revision 07
 
@@ -644,7 +645,7 @@ All notable changes to the Wazuh app project will be documented in this file.
   [#3367](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3367)
   [#3373](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3373)
   [#3374](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3374)
-  [#3390](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3390)  
+  [#3390](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3390)
   [#3410](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3410)
   [#3408](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3408)
   [#3429](https://github.com/wazuh/wazuh-dashboard-plugins/pull/3429)

diff --git a/docker/osd-dev/dev.sh b/docker/osd-dev/dev.sh
@@ -133,7 +133,7 @@ up)
    docker compose --profile $profile -f dev.yml up -Vd
 
    # Display a command to deploy an agent when using the real server
-   if [[ "$5" =~ "server" ]]; then
+   if [[ "$3" =~ "server" ]]; then
      echo
      echo "**************WARNING**************"
      echo "The agent version must be a published one. This uses only released versions."

diff --git a/...s/main/public/components/common/loading-searchbar-progress/loading-searchbar-progress.tsx b/...s/main/public/components/common/loading-searchbar-progress/loading-searchbar-progress.tsx
@@ -0,0 +1,12 @@
+import { EuiProgress } from '@elastic/eui';
+import React from 'react';
+
+interface LoadingSearchbarProgress {
+  message?: React.ReactNode;
+}
+
+export function LoadingSearchbarProgress({
+  message,
+}: LoadingSearchbarProgress) {
+  return <EuiProgress size='xs' color='primary' />;
+}
diff --git a/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx b/plugins/main/public/components/common/wazuh-data-grid/wz-data-grid.tsx
@@ -29,7 +29,7 @@ import {
   ErrorFactory,
   HttpError,
 } from '../../../react-services/error-management';
-import { LoadingSpinner } from '../loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../loading-searchbar-progress/loading-searchbar-progress';
 import { DiscoverNoResults } from '../no-results/no-results';
 import { DocumentViewTableAndJson } from '../wazuh-discover/components/document-view-table-and-json';
 import DiscoverDataGridAdditionalControls from '../wazuh-discover/components/data-grid-additional-controls';
@@ -152,7 +152,7 @@ const WazuhDataGrid = (props: tWazuhDataGridProps) => {
 
   return (
     <>
-      {isLoading ? <LoadingSpinner /> : null}
+      {isLoading ? <LoadingSearchbarProgress /> : null}
       {!isLoading && !results?.hits?.total === 0 ? (
         <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
       ) : null}

diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
@@ -16,7 +16,7 @@ import { IntlProvider } from 'react-intl';
 import { IndexPattern } from '../../../../../../src/plugins/data/common';
 import { SearchResponse } from '../../../../../../src/core/server';
 import { DiscoverNoResults } from '../no-results/no-results';
-import { LoadingSpinner } from '../loading-spinner/loading-spinner';
+import { LoadingSearchbarProgress } from '../loading-searchbar-progress/loading-searchbar-progress';
 import {
   useDataGrid,
   tDataGridColumn,
@@ -190,17 +190,17 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
 
   return (
     <IntlProvider locale='en'>
-      <EuiPageTemplate
-        className='discoverContainer'
-        restrictWidth='100%'
-        fullHeight={true}
-        grow
-        paddingSize='none'
-        pageContentProps={{ color: 'transparent' }}
-      >
-        {isDataSourceLoading ? (
-          <LoadingSpinner />
-        ) : (
+      {isDataSourceLoading ? (
+        <LoadingSearchbarProgress />
+      ) : (
+        <EuiPageTemplate
+          className='discoverContainer'
+          restrictWidth='100%'
+          fullHeight={true}
+          grow
+          paddingSize='none'
+          pageContentProps={{ color: 'transparent' }}
+        >
           <WzSearchBar
             appName='wazuh-discover-search-bar'
             {...searchBarProps}
@@ -209,91 +209,91 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
             showQueryBar={true}
             showSaveQuery={true}
           />
-        )}
-        {!isDataSourceLoading && results?.hits?.total === 0 ? (
-          <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
-        ) : null}
-        <div
-          className={
-            !isDataSourceLoading && dataSource && results?.hits?.total > 0
-              ? ''
-              : 'wz-no-display'
-          }
-        >
-          <EuiPanel
-            paddingSize='s'
-            hasShadow={false}
-            hasBorder={false}
-            color='transparent'
+          {!isDataSourceLoading && results?.hits?.total === 0 ? (
+            <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
+          ) : null}
+          <div
+            className={
+              !isDataSourceLoading && dataSource && results?.hits?.total > 0
+                ? ''
+                : 'wz-no-display'
+            }
           >
-            <EuiFlexGroup gutterSize='s' direction='column'>
-              <EuiFlexItem grow={false} className='discoverChartContainer'>
-                <EuiPanel
-                  hasBorder={false}
-                  hasShadow={false}
-                  color='transparent'
-                  paddingSize='none'
-                >
-                  <EuiPanel>
-                    <DashboardByRenderer
-                      input={histogramChartInput(
-                        AlertsRepository.getStoreIndexPatternId(),
-                        fetchFilters,
-                        query,
-                        absoluteDateRange.from,
-                        absoluteDateRange.to,
-                      )}
-                    />
+            <EuiPanel
+              paddingSize='s'
+              hasShadow={false}
+              hasBorder={false}
+              color='transparent'
+            >
+              <EuiFlexGroup gutterSize='s' direction='column'>
+                <EuiFlexItem grow={false} className='discoverChartContainer'>
+                  <EuiPanel
+                    hasBorder={false}
+                    hasShadow={false}
+                    color='transparent'
+                    paddingSize='none'
+                  >
+                    <EuiPanel>
+                      <DashboardByRenderer
+                        input={histogramChartInput(
+                          AlertsRepository.getStoreIndexPatternId(),
+                          fetchFilters,
+                          query,
+                          absoluteDateRange.from,
+                          absoluteDateRange.to,
+                        )}
+                      />
+                    </EuiPanel>
                   </EuiPanel>
-                </EuiPanel>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiDataGrid
-                  {...dataGridProps}
-                  className={sideNavDocked ? 'dataGridDockedNav' : ''}
-                  toolbarVisibility={{
-                    additionalControls: (
-                      <>
-                        <DiscoverDataGridAdditionalControls
-                          totalHits={results?.hits?.total || 0}
-                          isExporting={isExporting}
-                          onClickExportResults={onClickExportResults}
-                          maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
-                          dateRange={absoluteDateRange}
-                        />
-                      </>
-                    ),
-                  }}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPanel>
-          {inspectedHit && (
-            <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
-              <EuiFlyoutHeader>
-                <DocDetailsHeader
-                  doc={inspectedHit}
-                  indexPattern={dataSource?.indexPattern}
-                />
-              </EuiFlyoutHeader>
-              <EuiFlyoutBody>
-                <EuiFlexGroup direction='column'>
-                  <EuiFlexItem>
-                    <DocumentViewTableAndJson
-                      document={inspectedHit}
-                      indexPattern={indexPattern}
-                      renderFields={getAllCustomRenders(
-                        defaultTableColumns,
-                        wzDiscoverRenderColumns,
-                      )}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlyoutBody>
-            </EuiFlyout>
-          )}
-        </div>
-      </EuiPageTemplate>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiDataGrid
+                    {...dataGridProps}
+                    className={sideNavDocked ? 'dataGridDockedNav' : ''}
+                    toolbarVisibility={{
+                      additionalControls: (
+                        <>
+                          <DiscoverDataGridAdditionalControls
+                            totalHits={results?.hits?.total || 0}
+                            isExporting={isExporting}
+                            onClickExportResults={onClickExportResults}
+                            maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
+                            dateRange={absoluteDateRange}
+                          />
+                        </>
+                      ),
+                    }}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+            {inspectedHit && (
+              <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
+                <EuiFlyoutHeader>
+                  <DocDetailsHeader
+                    doc={inspectedHit}
+                    indexPattern={dataSource?.indexPattern}
+                  />
+                </EuiFlyoutHeader>
+                <EuiFlyoutBody>
+                  <EuiFlexGroup direction='column'>
+                    <EuiFlexItem>
+                      <DocumentViewTableAndJson
+                        document={inspectedHit}
+                        indexPattern={indexPattern}
+                        renderFields={getAllCustomRenders(
+                          defaultTableColumns,
+                          wzDiscoverRenderColumns,
+                        )}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlyoutBody>
+              </EuiFlyout>
+            )}
+          </div>
+        </EuiPageTemplate>
+      )}
     </IntlProvider>
   );
 };