Deregistration

.github/workflows/ci.yaml

@@ -134,7 +134,7 @@ jobs:
       - name: Build docs
         uses: lee-dohm/generate-elixir-docs@v1
       - name: Generate openapi.json
-        run: mix openapi.spec.json --start-app=false --spec TrentoWeb.OpenApi.ApiSpec
+        run: mix openapi.spec.json --start-app=false --spec TrentoWeb.OpenApi.V1.ApiSpec
       - name: Generate Swagger UI
         uses: Legion2/swagger-ui-action@v1
         with:

assets/js/components/Button/Button.jsx

@@ -14,10 +14,14 @@ const getButtonClasses = (type) => {
   switch (type) {
     case 'primary-white':
       return 'bg-white hover:opacity-75 focus:outline-none text-jungle-green-500 w-full transition ease-in duration-200 text-center font-semibold rounded shadow';
+    case 'primary-white-fit':
+      return 'bg-white hover:opacity-75 focus:outline-none text-jungle-green-500 w-fit transition ease-in duration-200 text-center font-semibold rounded shadow';
     case 'transparent':
       return 'bg-transparent hover:opacity-75 focus:outline-none w-full transition ease-in duration-200 font-semibold';
     case 'secondary':
-      return 'bg-persimmon hover:opacity-75 focus:outline-none  text-gray-800 w-full transition ease-in duration-200 text-center font-semibold rounded shadow';
+      return 'bg-persimmon hover:opacity-75 focus:outline-none text-gray-800 w-full transition ease-in duration-200 text-center font-semibold rounded shadow';
+    case 'default-fit':
+      return 'bg-jungle-green-500 hover:opacity-75 focus:outline-none text-white w-fit transition ease-in duration-200 text-center font-semibold rounded shadow';
     default:
       return 'bg-jungle-green-500 hover:opacity-75 focus:outline-none text-white w-full transition ease-in duration-200 text-center font-semibold rounded shadow';
   }

assets/js/components/ClustersList.jsx

@@ -17,6 +17,8 @@ const getClusterTypeLabel = (type) => {
       return 'HANA Scale Up';
     case 'hana_scale_out':
       return 'HANA Scale Out';
+    case 'ascs_ers':
+      return 'ASCS/ERS';
     default:
       return 'Unknown';
   }
@@ -67,7 +69,9 @@ function ClustersList() {
         title: 'SID',
         key: 'sid',
         filterFromParams: true,
-        filter: true,
+        filter: (filter, key) => (element) =>
+          element[key].some((sid) => filter.includes(sid)),
+        render: (_, { sid }) => sid.join(', '),
       },
       {
         title: 'Hosts',
@@ -122,7 +126,7 @@ function ClustersList() {
     health: cluster.health,
     name: cluster.name,
     id: cluster.id,
-    sid: cluster.sid,
+    sid: (cluster.sid ? [cluster.sid] : []).concat(cluster.additional_sids),
     type: cluster.type,
     hosts_number: cluster.hosts_number,
     resources_number: cluster.resources_number,

assets/js/components/ClustersList.test.jsx

@@ -58,28 +58,33 @@ describe('ClustersList component', () => {
       },
       {
         filter: 'SID',
-        options: ['PRD', 'QAS'],
+        options: ['PRD', 'QAS', 'HA1', 'HA2'],
         state: {
           ...cleanInitialState,
           clustersList: {
             clusters: [].concat(
               clusterFactory.buildList(4),
               clusterFactory.buildList(2, { sid: 'PRD' }),
-              clusterFactory.buildList(2, { sid: 'QAS' })
+              clusterFactory.buildList(2, { sid: 'QAS' }),
+              clusterFactory.buildList(2, {
+                sid: null,
+                additional_sids: ['HA1', 'HA2'],
+              })
             ),
           },
         },
         expectedRows: 2,
       },
       {
         filter: 'Type',
-        options: ['hana_scale_up'],
+        options: ['hana_scale_up', 'ascs_ers'],
         state: {
           ...cleanInitialState,
           clustersList: {
             clusters: [].concat(
               clusterFactory.buildList(2, { type: 'unknown' }),
-              clusterFactory.buildList(2, { type: 'hana_scale_up' })
+              clusterFactory.buildList(2, { type: 'hana_scale_up' }),
+              clusterFactory.buildList(2, { type: 'ascs_ers' })
             ),
           },
         },
@@ -123,6 +128,24 @@ describe('ClustersList component', () => {
       }
     );
 
+    it('should show SIDs delimited by comma in multi-sid clusters', () => {
+      const state = {
+        ...cleanInitialState,
+        clustersList: {
+          clusters: clusterFactory.buildList(1, {
+            sid: null,
+            additional_sids: ['HA1', 'HA2'],
+          }),
+        },
+      };
+
+      const [StatefulClustersList] = withState(<ClustersList />, state);
+
+      renderWithRouter(StatefulClustersList);
+
+      expect(screen.getByText('HA1, HA2')).toBeVisible();
+    });
+
     it('should put the filters values in the query string when filters are selected', () => {
       const tag = 'Tag1';
       const clusters = clusterFactory.buildList(1, {

assets/js/components/DeregistrationModal/DeregistrationModal.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { EOS_CLEANING_SERVICES } from 'eos-icons-react';
+
+import Modal from '@components/Modal';
+import Button from '@components/Button';
+
+function DeregistrationModal({
+  hostname,
+  isOpen = false,
+  onCleanUp,
+  onCancel,
+}) {
+  return (
+    <Modal
+      title={`Clean up data discovered by agent on host ${hostname}`}
+      open={isOpen}
+      onClose={onCancel}
+    >
+      <div className="text-gray-500">
+        This action will cause Trento to stop tracking all the components
+        discovered by the agent in this host, including the host itself and any
+        other component depending on it.
+      </div>
+      <div className="flex justify-start gap-2 mt-4">
+        <Button
+          type="default-fit"
+          className="inline-block mx-0.5 border-green-500 border w-fit"
+          size="small"
+          onClick={onCleanUp}
+        >
+          <EOS_CLEANING_SERVICES size="base" className="fill-white inline" />
+          <span className="text-white text-sm font-bold pl-1.5">Clean up</span>
+        </Button>
+        <Button
+          type="primary-white-fit"
+          className="inline-block mx-0.5 border-green-500 border"
+          size="small"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+export default DeregistrationModal;

assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import Button from '@components/Button';
+import DeregistrationModal from '.';
+
+export default {
+  title: 'DeregistrationModal',
+  component: DeregistrationModal,
+  argTypes: {
+    hostname: {
+      type: 'string',
+      description: 'The host name to confirm deregistration of',
+      control: { type: 'text' },
+    },
+    isOpen: {
+      type: 'boolean',
+      description: 'Sets the visibility of the modal',
+      control: false,
+    },
+    onCleanUp: {
+      description: 'Callback function to run when "Clean up" button is clicked',
+      action: 'Deregistration',
+      control: false,
+    },
+    onClose: {
+      description: 'Callback function to run when "Cancel" button is clicked',
+      action: 'Cancel',
+      control: false,
+    },
+  },
+};
+
+function ButtonToOpenModal({ hostname }) {
+  const [open, setOpen] = useState(false);
+  const [deregistered, setDeregistered] = useState(false);
+
+  return (
+    <>
+      <Button
+        type="default-fit"
+        className={`inline-block mx-0.5 border-green-500 border w-fit ${
+          deregistered ? 'bg-rose-500' : 'bg-jungle-green-500'
+        }`}
+        size="small"
+        onClick={() => setOpen(true)}
+      >
+        {deregistered
+          ? `Host ${hostname} deregistered`
+          : 'Click me to open modal'}
+      </Button>
+
+      <DeregistrationModal
+        hostname={hostname}
+        isOpen={open}
+        onCleanUp={() => {
+          setDeregistered(true);
+          setOpen(false);
+        }}
+        onCancel={() => setOpen(false)}
+      />
+    </>
+  );
+}
+
+export const Default = {
+  args: {
+    hostname: 'example host',
+  },
+  render: (args) => <ButtonToOpenModal {...args} />,
+};

assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+
+import DeregistrationModal from '.';
+
+describe('Deregistration Modal component', () => {
+  it('should render deregistration modal correctly', async () => {
+    const hostname = faker.name.firstName();
+
+    render(
+      <DeregistrationModal
+        hostname={hostname}
+        isOpen
+        onCleanUp={() => {}}
+        onCancel={() => {}}
+      />
+    );
+
+    expect(await screen.findByText(hostname, { exact: false })).toBeTruthy();
+    expect(
+      await screen.findByRole('button', { name: /Clean up/i })
+    ).toBeTruthy();
+    expect(await screen.findByRole('button', { name: /Cancel/i })).toBeTruthy();
+  });
+});

assets/js/components/DeregistrationModal/index.js

@@ -0,0 +1,3 @@
+import DeregistrationModal from './DeregistrationModal';
+
+export default DeregistrationModal;

assets/js/lib/network/index.js

@@ -68,36 +68,36 @@ function handleResponseStatus(response) {
   return response;
 }
 
-export const post = function post(url, data) {
+export const post = function post(url, data, config = null) {
   return networkClient
-    .post(url, data)
+    .post(url, data, config)
     .then(handleResponseStatus)
     .catch((error) => {
       handleError(error);
     });
 };
 
-export const del = function del(url) {
+export const del = function del(url, config = null) {
   return networkClient
-    .delete(url)
+    .delete(url, config)
     .then(handleResponseStatus)
     .catch((error) => {
       handleError(error);
     });
 };
 
-export const put = function put(url, data) {
+export const put = function put(url, data, config = null) {
   return networkClient
-    .put(url, data)
+    .put(url, data, config)
     .then(handleResponseStatus)
     .catch((error) => {
       handleError(error);
     });
 };
 
-export const get = function get(url) {
+export const get = function get(url, config = null) {
   return networkClient
-    .get(url)
+    .get(url, config)
     .then(handleResponseStatus)
     .catch((error) => {
       handleError(error);

assets/js/lib/network/network.test.js

@@ -24,6 +24,22 @@ describe('networkClient', () => {
     clearCredentialsFromStore();
   });
 
+  it('should use default baseURL', async () => {
+    axiosMock.onGet('/api/v1/test').reply(200, { ok: 'ok' });
+
+    const response = await networkClient.get('/test');
+
+    expect(response.data).toEqual({ ok: 'ok' });
+  });
+
+  it('should apply the specific config in each request', async () => {
+    axiosMock.onGet('/base/test').reply(200, { ok: 'ok' });
+
+    const response = await networkClient.get('/test', { baseURL: '/base' });
+
+    expect(response.data).toEqual({ ok: 'ok' });
+  });
+
   it('should attach the access token from the store when a request is made', async () => {
     storeAccessToken('test-access');
 

assets/js/state/channels.js

@@ -21,6 +21,7 @@ const processChannelEvents = (reduxStore, socket) => {
     'host_details_updated',
     'heartbeat_succeded',
     'heartbeat_failed',
+    'host_deregistered',
   ]);
   registerEvents(reduxStore, socket, 'monitoring:clusters', [
     'cluster_registered',
@@ -30,17 +31,22 @@ const processChannelEvents = (reduxStore, socket) => {
     'checks_results_updated',
     'cluster_health_changed',
     'cluster_cib_last_written_updated',
+    'cluster_deregistered',
   ]);
   registerEvents(reduxStore, socket, 'monitoring:sap_systems', [
     'sap_system_registered',
     'sap_system_health_changed',
     'application_instance_registered',
+    'application_instance_deregistered',
     'application_instance_health_changed',
+    'sap_system_deregistered',
+    'sap_system_updated',
   ]);
   registerEvents(reduxStore, socket, 'monitoring:databases', [
     'database_registered',
     'database_health_changed',
     'database_instance_registered',
+    'database_instance_deregistered',
     'database_instance_health_changed',
     'database_instance_system_replication_changed',
   ]);

assets/js/state/clusters.js

@@ -95,9 +95,14 @@ export const clustersListSlice = createSlice({
         return cluster;
       });
     },
+    removeCluster: (state, { payload: { id } }) => {
+      state.clusters = state.clusters.filter((cluster) => cluster.id !== id);
+    },
   },
 });
 
+export const CLUSTER_DEREGISTERED = 'CLUSTER_DEREGISTERED';
+
 export const {
   setClusters,
   appendCluster,
@@ -110,6 +115,7 @@ export const {
   updateCibLastWritten,
   startClustersLoading,
   stopClustersLoading,
+  removeCluster,
 } = clustersListSlice.actions;
 
 export default clustersListSlice.reducer;