From eee8b8b726ee194d2f4f0d97559dfb8104b795d4 Mon Sep 17 00:00:00 2001
From: Mohamed OULD HOCINE <106236152+gally47@users.noreply.github.com>
Date: Mon, 10 Jun 2024 14:04:09 +0200
Subject: [PATCH] Fix sidecar undefined error (#19487) (#19547)

* Fix sidecar undefined error

* changelog file

* use ifs instead of switch
---
 changelog/unreleased/pr-19487.toml             |  4 ++++
 .../CollectorsAdministration.tsx               |  4 +++-
 .../CollectorsAdministrationActions.tsx        | 18 +++++++++++++++---
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 changelog/unreleased/pr-19487.toml

diff --git a/changelog/unreleased/pr-19487.toml b/changelog/unreleased/pr-19487.toml
new file mode 100644
index 000000000000..47cdf527ee16
--- /dev/null
+++ b/changelog/unreleased/pr-19487.toml
@@ -0,0 +1,4 @@
+type = "f"
+message = "Fix sidecar undefined error"
+
+pulls = ["19487"]
diff --git a/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministration.tsx b/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministration.tsx
index 8d16fa3c0d45..7441ac96c227 100644
--- a/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministration.tsx
+++ b/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministration.tsx
@@ -357,7 +357,9 @@ const CollectorsAdministration = ({
     onPageChange(page, pageSize);
   };
 
-  const selectedSidecarCollectorPairs = selected.map((selectedSidecarCollectorId) => sidecarCollectorPairs.find(({ sidecar, collector }) => sidecarCollectorId(sidecar, collector) === selectedSidecarCollectorId));
+  const selectedSidecarCollectorPairs = selected.map((selectedSidecarCollectorId) => sidecarCollectorPairs.find(
+    ({ sidecar, collector }) => sidecarCollectorId(sidecar, collector) === selectedSidecarCollectorId),
+  ).filter((sidecarCollectorPair) => !!sidecarCollectorPair?.collector && !!sidecarCollectorPair?.sidecar);
 
   let formattedCollectors;
 
diff --git a/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministrationActions.tsx b/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministrationActions.tsx
index 0925ee3775a2..bb3780cd1528 100644
--- a/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministrationActions.tsx
+++ b/graylog2-web-interface/src/components/sidecars/administration/CollectorsAdministrationActions.tsx
@@ -50,14 +50,26 @@ const CollectorsAdministrationActions = ({
   const onCancelConfigurationModal = useCallback(() => setShowConfigurationModal(false), []);
 
   const selectedLogCollectorsNames = uniq(selectedSidecarCollectorPairs.map(({ collector }) => collector.name));
-  const configButtonTooltip = `Cannot change configurations of ${selectedLogCollectorsNames.join(', ')} collectors simultaneously`;
+  const disableConfigButton = !selectedSidecarCollectorPairs.length || selectedLogCollectorsNames.length !== 1;
+
+  const getConfigButtonTooltip = () => {
+    if (!selectedSidecarCollectorPairs.length) {
+      return 'Incompatible collectors, please check your sidecar configuration.';
+    }
+
+    if (selectedLogCollectorsNames.length !== 1) {
+      return `Cannot change configurations of ${selectedLogCollectorsNames.join(', ')} collectors simultaneously.`;
+    }
+
+    return 'Assign Configurations';
+  };
 
   return (
     <ButtonToolbar>
-      <ConfigurationButton title={(selectedLogCollectorsNames.length > 1) ? configButtonTooltip : undefined}
+      <ConfigurationButton title={getConfigButtonTooltip()}
                            bsStyle="primary"
                            bsSize="small"
-                           disabled={selectedLogCollectorsNames.length !== 1}
+                           disabled={disableConfigButton}
                            onClick={() => setShowConfigurationModal(true)}>
         <Icon name="edit_square" /> Assign Configurations
       </ConfigurationButton>