SapSystemsOverview and DatabasesOverview storybook

assets/js/components/DatabasesOverview/DatabasesOverview.jsx

@@ -1,35 +1,24 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React, { Fragment } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { filter } from 'lodash';
+
 import PageHeader from '@components/PageHeader';
 import HealthIcon from '@components/Health';
 import Table from '@components/Table';
 import Tags from '@components/Tags';
-import { addTagToDatabase, removeTagFromDatabase } from '@state/databases';
-
-import { post, del } from '@lib/network';
-import { getCounters } from '@components/HealthSummary/summarySelection';
 import HealthSummary from '@components/HealthSummary/HealthSummary';
-import DatabaseItemOverview from './DatabaseItemOverview';
-
-const byDatabase = (id) => (instance) => instance.sap_system_id === id;
-
-const addTag = (tag, sapSystemId) => {
-  post(`/databases/${sapSystemId}/tags`, {
-    value: tag,
-  });
-};
+import { getCounters } from '@components/HealthSummary/summarySelection';
 
-const removeTag = (tag, sapSystemId) => {
-  del(`/databases/${sapSystemId}/tags/${tag}`);
-};
+import DatabaseItemOverview from './DatabaseItemOverview';
 
-function DatabasesOverview() {
-  const { databases, databaseInstances, loading } = useSelector(
-    (state) => state.databasesList
-  );
-  const dispatch = useDispatch();
+function DatabasesOverview({
+  databases,
+  databaseInstances,
+  loading,
+  onTagAdded,
+  onTagRemoved,
+}) {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const config = {
@@ -103,25 +92,15 @@ function DatabasesOverview() {
         key: 'tags',
         className: 'w-80',
         filterFromParams: true,
-        filter: (filter, key) => (element) =>
-          element[key].some((tag) => filter.includes(tag)),
+        filter: (filters, key) => (element) =>
+          element[key].some((tag) => filters.includes(tag)),
         render: (content, item) => (
           <Tags
             tags={content}
             resourceId={item.id}
             onChange={() => {}}
-            onAdd={(tag) => {
-              addTag(tag, item.id);
-              dispatch(
-                addTagToDatabase({ tags: [{ value: tag }], id: item.id })
-              );
-            }}
-            onRemove={(tag) => {
-              removeTag(tag, item.id);
-              dispatch(
-                removeTagFromDatabase({ tags: [{ value: tag }], id: item.id })
-              );
-            }}
+            onAdd={(tag) => onTagAdded(tag, item.id)}
+            onRemove={(tag) => onTagRemoved(tag, item.id)}
           />
         ),
       },
@@ -138,7 +117,9 @@ function DatabasesOverview() {
     attachedRdbms: database.tenant,
     tenant: database.tenant,
     dbAddress: database.db_host,
-    databaseInstances: databaseInstances.filter(byDatabase(database.id)),
+    databaseInstances: filter(databaseInstances, {
+      sap_system_id: database.id,
+    }),
     tags: (database.tags && database.tags.map((tag) => tag.value)) || [],
   }));
 

assets/js/components/DatabasesOverview/DatabasesOverview.stories.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  clusterFactory,
+  databaseFactory,
+  databaseInstanceFactory,
+  hostFactory,
+} from '@lib/test-utils/factories';
+
+import DatabasesOverview from './DatabasesOverview';
+
+const databases = databaseFactory.buildList(3);
+
+const enrichedInstances = databases[0].database_instances
+  .concat(databases[1].database_instances)
+  .concat(databases[2].database_instances)
+  .map((instance) => {
+    const cluster = clusterFactory.build();
+    return {
+      ...instance,
+      host: {
+        ...hostFactory.build({ id: instance.host_id, cluster_id: cluster.id }),
+        cluster,
+      },
+    };
+  });
+
+const databaseWithSR = databaseFactory.build();
+
+const systemReplicationInstances = [
+  databaseInstanceFactory.build({
+    sap_system_id: databaseWithSR.id,
+    system_replication: 'Primary',
+  }),
+  databaseInstanceFactory.build({
+    sap_system_id: databaseWithSR.id,
+    system_replication: 'Secondary',
+    system_replication_status: 'ACTIVE',
+  }),
+];
+
+function ContainerWrapper({ children }) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+  );
+}
+
+export default {
+  title: 'DatabasesOverview',
+  components: DatabasesOverview,
+  argTypes: {
+    databases: {
+      control: { type: 'array' },
+      description: 'Databases',
+    },
+    databaseInstances: {
+      control: { type: 'array' },
+      description: 'Database instances',
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Loading',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: false },
+      },
+    },
+    onTagAdded: {
+      action: 'Add tag',
+      description: 'Called when a new tag is added',
+    },
+    onTagRemoved: {
+      action: 'Remove tag',
+      description: 'Called when an existing tag is removed',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  render: (args) => (
+    <ContainerWrapper>
+      <DatabasesOverview {...args} />
+    </ContainerWrapper>
+  ),
+};
+
+export const Databases = {
+  args: {
+    databases,
+    databaseInstances: enrichedInstances,
+    loading: false,
+  },
+};
+
+export const WithSystemReplication = {
+  args: {
+    databases: [databaseWithSR],
+    databaseInstances: systemReplicationInstances,
+    loading: false,
+  },
+};

assets/js/components/DatabasesOverview/DatabasesOverview.test.jsx

@@ -3,84 +3,53 @@ import { screen, waitFor } from '@testing-library/react';
 import 'intersection-observer';
 import '@testing-library/jest-dom';
 import { databaseFactory } from '@lib/test-utils/factories';
-import { renderWithRouter, withState } from '@lib/test-utils';
+import { renderWithRouter } from '@lib/test-utils';
 import { filterTable, clearFilter } from '@components/Table/Table.test';
 
 import DatabasesOverview from './DatabasesOverview';
 
 describe('DatabasesOverview component', () => {
   describe('filtering', () => {
-    const cleanInitialState = {
-      hostsList: {
-        hosts: [],
-      },
-      clustersList: {
-        clusters: [],
-      },
-      databasesList: {
-        databases: [],
-        databaseInstances: [],
-      },
-    };
-
     const scenarios = [
       {
         filter: 'Health',
         options: ['unknown', 'passing', 'warning', 'critical'],
-        state: {
-          ...cleanInitialState,
-          databasesList: {
-            databases: [].concat(
-              databaseFactory.buildList(2, { health: 'unknown' }),
-              databaseFactory.buildList(2, { health: 'passing' }),
-              databaseFactory.buildList(2, { health: 'warning' }),
-              databaseFactory.buildList(2, { health: 'critical' })
-            ),
-            databaseInstances: [],
-          },
-        },
+        databases: [].concat(
+          databaseFactory.buildList(2, { health: 'unknown' }),
+          databaseFactory.buildList(2, { health: 'passing' }),
+          databaseFactory.buildList(2, { health: 'warning' }),
+          databaseFactory.buildList(2, { health: 'critical' })
+        ),
         expectedRows: 2,
       },
       {
         filter: 'SID',
         options: ['PRD', 'QAS'],
-        state: {
-          ...cleanInitialState,
-          databasesList: {
-            databases: [].concat(
-              databaseFactory.buildList(4),
-              databaseFactory.buildList(2, { sid: 'PRD' }),
-              databaseFactory.buildList(2, { sid: 'QAS' })
-            ),
-            databaseInstances: [],
-          },
-        },
+        databases: [].concat(
+          databaseFactory.buildList(4),
+          databaseFactory.buildList(2, { sid: 'PRD' }),
+          databaseFactory.buildList(2, { sid: 'QAS' })
+        ),
         expectedRows: 2,
       },
       {
         filter: 'Tags',
         options: ['Tag1', 'Tag2'],
-        state: {
-          ...cleanInitialState,
-          databasesList: {
-            databases: [].concat(
-              databaseFactory.buildList(2),
-              databaseFactory.buildList(2, { tags: [{ value: 'Tag1' }] }),
-              databaseFactory.buildList(2, { tags: [{ value: 'Tag2' }] })
-            ),
-            databaseInstances: [],
-          },
-        },
+        databases: [].concat(
+          databaseFactory.buildList(2),
+          databaseFactory.buildList(2, { tags: [{ value: 'Tag1' }] }),
+          databaseFactory.buildList(2, { tags: [{ value: 'Tag2' }] })
+        ),
         expectedRows: 2,
       },
     ];
 
     it.each(scenarios)(
       'should filter the table content by $filter filter',
-      ({ filter, options, state, expectedRows }) => {
-        const [StatefulDatbaseList] = withState(<DatabasesOverview />, state);
-
-        renderWithRouter(StatefulDatbaseList);
+      ({ filter, options, databases, expectedRows }) => {
+        renderWithRouter(
+          <DatabasesOverview databases={databases} databaseInstances={[]} />
+        );
 
         options.forEach(async (option) => {
           filterTable(filter, option);
@@ -101,21 +70,11 @@ describe('DatabasesOverview component', () => {
         tags: [{ value: 'Tag1' }],
       });
 
-      const state = {
-        ...cleanInitialState,
-        databasesList: {
-          databases,
-          databaseInstances: [],
-        },
-      };
-
       const { health, sid, tags } = databases[0];
 
-      const [StatefulDatabasesOverview] = withState(
-        <DatabasesOverview />,
-        state
+      renderWithRouter(
+        <DatabasesOverview databases={databases} databaseInstances={[]} />
       );
-      renderWithRouter(StatefulDatabasesOverview);
 
       [
         ['Health', health],

assets/js/components/DatabasesOverview/DatabasesOverviewPage.jsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { getEnrichedDatabaseInstances } from '@state/selectors/sapSystem';
+import { addTagToDatabase, removeTagFromDatabase } from '@state/databases';
+import { post, del } from '@lib/network';
+
+import DatabasesOverview from './DatabasesOverview';
+
+const addTag = (tag, databaseID) => {
+  post(`/databases/${databaseID}/tags`, {
+    value: tag,
+  });
+};
+
+const removeTag = (tag, databaseID) => {
+  del(`/databases/${databaseID}/tags/${tag}`);
+};
+
+function DatabasesOverviewPage() {
+  const { databases, loading } = useSelector((state) => state.databasesList);
+  const enrichedDatabaseInstances = useSelector((state) =>
+    getEnrichedDatabaseInstances(state)
+  );
+  const dispatch = useDispatch();
+
+  return (
+    <DatabasesOverview
+      databases={databases}
+      databaseInstances={enrichedDatabaseInstances}
+      loading={loading}
+      onTagAdded={(tag, databaseID) => {
+        addTag(tag, databaseID);
+        dispatch(addTagToDatabase({ tags: [{ value: tag }], id: databaseID }));
+      }}
+      onTagRemoved={(tag, databaseID) => {
+        removeTag(tag, databaseID);
+        dispatch(
+          removeTagFromDatabase({ tags: [{ value: tag }], id: databaseID })
+        );
+      }}
+    />
+  );
+}
+
+export default DatabasesOverviewPage;

assets/js/components/DatabasesOverview/index.js

@@ -1,3 +1,3 @@
-import DatabasesOverview from './DatabasesOverview';
+import DatabasesOverviewPage from './DatabasesOverviewPage';
 
-export default DatabasesOverview;
+export default DatabasesOverviewPage;