Add Deletion in progress status for every device

Add possibility that user can see Deletion in progress status for every device
Add new checkbox filter for Deletion in progress status
The status changes to `Yes` whenever deleted device

closes astarte-platform#398

Signed-off-by: Armin Ahmetovic <armin.ahmetovic@secomind.com>

src/DeviceStatusPage/DeviceInfoCard.tsx

@@ -27,6 +27,10 @@ interface ConnectionStatusProps {
   status: AstarteDevice['connectionStatus'];
 }
 
+interface DeletionStatusProps {
+  status: AstarteDevice['deletionInProgress'];
+}
+
 const ConnectionStatus = ({ status }: ConnectionStatusProps): React.ReactElement => {
   let statusString;
   let icon;
@@ -57,6 +61,29 @@ const ConnectionStatus = ({ status }: ConnectionStatusProps): React.ReactElement
   );
 };
 
+const DeletionStatus = ({ status }: DeletionStatusProps): React.ReactElement => {
+  let statusString;
+
+  switch (status) {
+    case true:
+      statusString = 'Yes';
+      break;
+
+    case false:
+      statusString = 'No';
+      break;
+    default:
+      statusString = 'No';
+      break;
+  }
+
+  return (
+    <>
+      <span>{statusString}</span>
+    </>
+  );
+};
+
 interface DeviceInfoCardProps {
   device: AstarteDevice;
   onInhibitCredentialsClick: () => void;
@@ -83,6 +110,10 @@ const DeviceInfoCard = ({
       <p>
         <ConnectionStatus status={device.connectionStatus} />
       </p>
+      <h6>Deletion in progress</h6>
+      <p>
+        <DeletionStatus status={device.deletionInProgress} />
+      </p>
       <h6>Credentials inhibited</h6>
       <p>{device.hasCredentialsInhibited ? 'True' : 'False'}</p>
       <div className="mt-auto">

src/DeviceStatusPage/DeviceStatusEventsCard.tsx

@@ -34,6 +34,7 @@ const DeviceStatusEventsCard = ({ device }: DeviceStatusEventsCardProps): React.
     { label: 'First registration', value: device.firstRegistration?.toLocaleString() },
     { label: 'Last connection', value: device.lastConnection?.toLocaleString() },
     { label: 'Last disconnection', value: device.lastDisconnection?.toLocaleString() },
+    { label: 'Deletion in progress', value: device.deletionInProgress },
   ].filter(({ value }) => value !== undefined);
 
   return (

src/DevicesPage.tsx

@@ -40,6 +40,7 @@ interface DeviceFilters {
   attributeKey?: string;
   attributeValue?: string;
   activeSinceDate?: Date;
+  deletionInProgress?: boolean;
 }
 
 const DEVICES_PER_PAGE = 20;
@@ -100,6 +101,7 @@ const DeviceRow = ({ device, filters }: DeviceRowProps): React.ReactElement => {
   let lastEvent;
   let icon;
   let iconTooltip;
+  let deletionInProgress;
 
   if (device.isConnected) {
     icon = 'statusConnected' as const;
@@ -115,6 +117,12 @@ const DeviceRow = ({ device, filters }: DeviceRowProps): React.ReactElement => {
     lastEvent = 'Never connected';
   }
 
+  if (device.deletionInProgress) {
+    deletionInProgress = 'Yes';
+  } else {
+    deletionInProgress = 'No';
+  }
+
   return (
     <tr>
       <td>
@@ -125,6 +133,7 @@ const DeviceRow = ({ device, filters }: DeviceRowProps): React.ReactElement => {
         <MatchedAttributes filters={filters} attributes={device.attributes} />
       </td>
       <td>{lastEvent}</td>
+      <td>{deletionInProgress}</td>
     </tr>
   );
 };
@@ -141,6 +150,7 @@ const DeviceTable = ({ deviceList, filters }: DeviceTableProps): React.ReactElem
         <th>Status</th>
         <th>Device handle</th>
         <th>Last connection event</th>
+        <th>Deletion in progress</th>
       </tr>
     </thead>
     <tbody>
@@ -160,6 +170,7 @@ const matchFilters = (device: AstarteDevice, filters: DeviceFilters) => {
     showDisconnected = true,
     showNeverConnected = true,
     activeSinceDate,
+    deletionInProgress = false,
   } = filters;
 
   if (
@@ -180,6 +191,10 @@ const matchFilters = (device: AstarteDevice, filters: DeviceFilters) => {
     return false;
   }
 
+  if (deletionInProgress && !device.deletionInProgress) {
+    return false;
+  }
+
   if (
     (attributeKey !== '' || attributeValue !== '') &&
     !Array.from(device.attributes).some(([key, value]) =>
@@ -282,6 +297,7 @@ const FilterForm = ({ filters, onUpdateFilters }: FilterFormProps): React.ReactE
     attributeKey = '',
     attributeValue = '',
     activeSinceDate,
+    deletionInProgress = false,
   } = filters;
 
   return (
@@ -329,6 +345,15 @@ const FilterForm = ({ filters, onUpdateFilters }: FilterFormProps): React.ReactE
             onUpdateFilters({ ...filters, showNeverConnected: e.target.checked })
           }
         />
+        <Form.Check
+          type="checkbox"
+          id="checkbox-deletion-in-progress"
+          label="Deletion in progress"
+          checked={deletionInProgress}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            onUpdateFilters({ ...filters, deletionInProgress: e.target.checked })
+          }
+        />
       </Form.Group>
       <Form.Group controlId="filterActiveSince" className="mb-4">
         <Form.Label>

src/astarte-client/models/Device/index.ts

@@ -60,6 +60,8 @@ export interface AstarteDeviceObject {
   lastSeenIp?: string;
 
   lastCredentialsRequestIp?: string;
+
+  deletionInProgress: boolean;
 }
 
 const generateMapValidation =
@@ -119,6 +121,7 @@ const astarteDeviceObjectSchema: yup.ObjectSchema<AstarteDeviceObject> = yup
     lastConnection: yup.date().notRequired(),
     lastSeenIp: yup.string().notRequired(),
     lastCredentialsRequestIp: yup.string().notRequired(),
+    deletionInProgress: yup.boolean().required(),
   })
   .required();
 
@@ -157,6 +160,8 @@ export class AstarteDevice {
 
   lastCredentialsRequestIp?: string;
 
+  deletionInProgress: boolean;
+
   constructor(obj: AstarteDeviceObject) {
     const validatedObj = astarteDeviceObjectSchema.validateSync(obj);
     this.id = validatedObj.id;
@@ -175,6 +180,7 @@ export class AstarteDevice {
     this.lastConnection = validatedObj.lastConnection;
     this.lastSeenIp = validatedObj.lastSeenIp;
     this.lastCredentialsRequestIp = validatedObj.lastCredentialsRequestIp;
+    this.deletionInProgress = validatedObj.deletionInProgress;
   }
 
   get hasNameAlias(): boolean {
@@ -194,4 +200,11 @@ export class AstarteDevice {
     }
     return this.isConnected ? 'connected' : 'disconnected';
   }
+
+  get deletionInProgressStatus(): string {
+    if (this.deletionInProgress) {
+      return 'Yes';
+    }
+    return 'No';
+  }
 }

src/astarte-client/transforms/device.ts

@@ -64,6 +64,7 @@ export const fromAstarteDeviceDTO = (dto: AstarteDeviceDTO): AstarteDevice =>
     lastSeenIp: dto.last_seen_ip != null ? dto.last_seen_ip : undefined,
     lastCredentialsRequestIp:
       dto.last_credentials_request_ip != null ? dto.last_credentials_request_ip : undefined,
+    deletionInProgress: !!dto.deletion_in_progress,
   });
 
 export const toAstarteDeviceDTO = (obj: AstarteDevice): AstarteDeviceDTO => ({
@@ -89,4 +90,5 @@ export const toAstarteDeviceDTO = (obj: AstarteDevice): AstarteDeviceDTO => ({
   last_seen_ip: obj.lastSeenIp != null ? obj.lastSeenIp : undefined,
   last_credentials_request_ip:
     obj.lastCredentialsRequestIp != null ? obj.lastCredentialsRequestIp : undefined,
+  deletion_in_progress: !!obj.deletionInProgress,
 });

src/astarte-client/types/dto/device.d.ts

@@ -53,4 +53,5 @@ export interface AstarteDeviceDTO {
     exchanged_msgs?: number;
     exchanged_bytes?: number;
   }>;
+  deletion_in_progress?: boolean;
 }