Create a new selector for both types of instances

trento-project · Aug 21, 2023 · 205711b · 205711b
1 parent 029883f
commit 205711b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 33 deletions.
diff --git a/assets/js/components/ClustersList.jsx b/assets/js/components/ClustersList.jsx
@@ -11,6 +11,8 @@ import { post, del } from '@lib/network';
 import { useSearchParams } from 'react-router-dom';
 import HealthSummary from '@components/HealthSummary/HealthSummary';
 import { getCounters } from '@components/HealthSummary/summarySelection';
+import { getConcatenatedInstances } from '@state/selectors';
+
 import { get } from 'lodash';
 
 const getClusterTypeLabel = (type) => {
@@ -26,20 +28,8 @@ const getClusterTypeLabel = (type) => {
   }
 };
 
-const getSapSystemLinkBySID = (
-  applicationInstances,
-  databaseInstances,
-  sid
-) => {
-  const foundInstance = applicationInstances
-    .map((instance) => ({ ...instance, type: 'sap_systems' }))
-    .concat(
-      databaseInstances.map((instance) => ({
-        ...instance,
-        type: 'databases',
-      }))
-    )
-    .find((instance) => instance.sid === sid);
+const getSapSystemLinkBySID = (instances, sid) => {
+  const foundInstance = instances.find((instance) => instance.sid === sid);
 
   return foundInstance;
 };
@@ -59,6 +49,7 @@ function ClustersList() {
   const { applicationInstances, databaseInstances } = useSelector(
     (state) => state.sapSystemsList
   );
+  const concatenatedInstances = useSelector(getConcatenatedInstances());
   const dispatch = useDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -97,8 +88,7 @@ function ClustersList() {
         render: (_, { sid, id }) =>
           sid.map((singleSid, index) => {
             const linkData = getSapSystemLinkBySID(
-              applicationInstances,
-              databaseInstances,
+              concatenatedInstances,
               singleSid
             );
             return (

diff --git a/assets/js/components/HostsList.jsx b/assets/js/components/HostsList.jsx
@@ -20,20 +20,13 @@ import Tooltip from '@components/Tooltip';
 import CleanUpButton from '@components/CleanUpButton';
 
 import { addTagToHost, removeTagFromHost, deregisterHost } from '@state/hosts';
+import { getConcatenatedInstances } from '@state/selectors';
 
 import { post, del } from '@lib/network';
 import { agentVersionWarning } from '@lib/agent';
 
-const getInstancesByHost = (applicationInstances, databaseInstances, hostId) =>
-  applicationInstances
-    .map((instance) => ({ ...instance, type: 'sap_systems' }))
-    .concat(
-      databaseInstances.map((instance) => ({
-        ...instance,
-        type: 'databases',
-      }))
-    )
-    .filter((instance) => instance.host_id === hostId);
+const getInstancesByHost = (instances, hostId) =>
+  instances.filter((instance) => instance.host_id === hostId);
 
 const addTag = (tag, hostId) => {
   post(`/hosts/${hostId}/tags`, {
@@ -48,8 +41,7 @@ const removeTag = (tag, hostId) => {
 function HostsList() {
   const hosts = useSelector((state) => state.hostsList.hosts);
   const clusters = useSelector((state) => state.clustersList.clusters);
-  const { applicationInstances } = useSelector((state) => state.sapSystemsList);
-  const { databaseInstances } = useSelector((state) => state.databasesList);
+  const concatenatedInstances = useSelector(getConcatenatedInstances());
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [cleanUpModalOpen, setCleanUpModalOpen] = useState(false);
@@ -212,11 +204,7 @@ function HostsList() {
 
   const data = hosts.map((host) => {
     const cluster = clusters.find((c) => c.id === host.cluster_id);
-    const sapSystemList = getInstancesByHost(
-      applicationInstances,
-      databaseInstances,
-      host.id
-    );
+    const sapSystemList = getInstancesByHost(concatenatedInstances, host.id);
 
     return {
       heartbeat: host.heartbeat,

diff --git a/assets/js/state/selectors/index.js b/assets/js/state/selectors/index.js
@@ -91,3 +91,16 @@ export const getInstancesOnHost = (hostId) => (state) => {
 
   return [...foundApplicationInstances, ...foundDatabaseInstances];
 };
+
+export const getConcatenatedInstances = () => (state) => {
+  const { databaseInstances, applicationInstances } = state.sapSystemsList;
+
+  return applicationInstances
+    .map((instance) => ({ ...instance, type: 'sap_systems' }))
+    .concat(
+      databaseInstances.map((instance) => ({
+        ...instance,
+        type: 'databases',
+      }))
+    );
+};