Tweaks to Durable Maintenance

src/components/tables/CippTable.jsx

@@ -38,6 +38,7 @@ import { debounce } from 'lodash-es'
 import { useSearchParams } from 'react-router-dom'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import { setDefaultColumns } from 'src/store/features/app'
+import { CippCallout } from '../layout'
 
 const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
   <>
@@ -614,7 +615,7 @@ export default function CippTable({
             className="m-1"
             size="sm"
           >
-            <FontAwesomeIcon icon={faSync} />
+            <FontAwesomeIcon icon={faSync} spin={isFetching} />
           </CButton>
         </CTooltip>,
       ])
@@ -888,7 +889,7 @@ export default function CippTable({
         {(updatedColumns || !dynamicColumns) && (
           <>
             {(massResults.length >= 1 || loopRunning) && (
-              <CCallout color="info">
+              <CippCallout color="info" dismissible>
                 {massResults[0]?.data?.Metadata?.Heading && (
                   <CAccordion flush>
                     {massResults.map((message, idx) => {
@@ -963,7 +964,7 @@ export default function CippTable({
                     <CSpinner size="sm" />
                   </li>
                 )}
-              </CCallout>
+              </CippCallout>
             )}
             <DataTable
               customStyles={customStyles}

src/components/utilities/CippActionsOffcanvas.jsx

@@ -35,6 +35,7 @@ import { stringCamelCase } from 'src/components/utilities/CippCamelCase'
 import ReactTimeAgo from 'react-time-ago'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { cellGenericFormatter } from '../tables/CellGenericFormat'
 
 const CippOffcanvasCard = ({ action, key }) => {
   const [offcanvasVisible, setOffcanvasVisible] = useState(false)
@@ -154,6 +155,28 @@ export default function CippActionsOffcanvas(props) {
           title: 'Info',
           size: 'lg',
         })
+      } else if (modalType === 'table') {
+        const QueryColumns = []
+        const columns = Object.keys(modalBody[0]).map((key) => {
+          QueryColumns.push({
+            name: key,
+            selector: (row) => row[key],
+            sortable: true,
+            exportSelector: key,
+            cell: cellGenericFormatter(),
+          })
+        })
+
+        ModalService.open({
+          data: modalBody,
+          componentType: 'table',
+          componentProps: {
+            columns: QueryColumns,
+            keyField: 'SKU',
+          },
+          title: 'Info',
+          size: 'lg',
+        })
       } else {
         ModalService.confirm({
           key: modalContent,
@@ -389,7 +412,7 @@ export default function CippActionsOffcanvas(props) {
       {getResults.isError && (
         <CCallout color="danger">Could not connect to API: {getResults.error.message}</CCallout>
       )}
-      {!cardContent && (
+      {!cardContent && props?.extendedInfo && props?.extendedInfo?.length > 0 && (
         <CCard className="content-card">
           <CCardHeader className="d-flex justify-content-between align-items-center">
             <CCardTitle>

src/views/cipp/app-settings/SettingsMaintenance.jsx

@@ -7,7 +7,7 @@ import { cellGenericFormatter } from 'src/components/tables/CellGenericFormat'
 import { CippCallout, CippContentCard } from 'src/components/layout'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import CippButtonCard from 'src/components/contentcards/CippButtonCard'
-import { ModalService } from 'src/components/utilities'
+import { CippActionsOffcanvas, ModalService } from 'src/components/utilities'
 
 /**
  * Performs maintenance operations on settings.
@@ -50,6 +50,54 @@ export function SettingsMaintenance() {
     })
   }
 
+  const Actions = (row, rowIndex, formatExtraData) => {
+    const [ocVisible, setOCVisible] = useState(false)
+    const [getOrchestratorHistory, orchestratorHistory] = useLazyGenericGetRequestQuery()
+
+    function loadOffCanvasDetails(id) {
+      setOCVisible(true)
+      getOrchestratorHistory({
+        path: 'api/ExecDurableFunctions',
+        params: { Action: 'ListOrchestratorHistory', PartitionKey: id },
+      })
+    }
+    var actions = [
+      {
+        label: 'View History',
+        color: 'info',
+        modal: true,
+        modalType: 'table',
+        modalBody: orchestratorHistory?.data?.Results ? orchestratorHistory?.data?.Results : '',
+      },
+      {
+        label: 'Purge Orchestrator',
+        color: 'danger',
+        modal: true,
+        icon: <FontAwesomeIcon icon="trash" className="me-2" />,
+        modalUrl: `/api/ExecDurableFunctions?Action=PurgeOrchestrators&PartitionKey=${row.PartitionKey}`,
+        modalMessage:
+          'Are you sure you want to purge this orchestrator instance and related history?',
+      },
+    ]
+
+    return (
+      <>
+        <CButton size="sm" color="link" onClick={() => loadOffCanvasDetails(row.PartitionKey)}>
+          <FontAwesomeIcon icon="ellipsis-v" />
+        </CButton>
+        <CippActionsOffcanvas
+          title={'History - ' + row?.PartitionKey}
+          actions={actions}
+          extendedInfo={[]}
+          placement="end"
+          visible={ocVisible}
+          id={row.id}
+          hideFunction={() => setOCVisible(false)}
+        />
+      </>
+    )
+  }
+
   const ResetButton = (
     <>
       <CButton
@@ -127,36 +175,59 @@ export function SettingsMaintenance() {
           <CippContentCard title="Orchestrators" titleType="big">
             <CippTable
               data={orchestrators?.data?.Orchestrators}
+              tableProps={{
+                selectableRows: true,
+                actionsList: [
+                  {
+                    label: 'Purge Orchestrator',
+                    color: 'danger',
+                    modal: true,
+                    icon: <FontAwesomeIcon icon="trash" className="me-2" />,
+                    modalUrl: `/api/ExecDurableFunctions?Action=PurgeOrchestrators&PartitionKey=!PartitionKey`,
+                    modalMessage:
+                      'Are you sure you want to purge the selected orchestrator instances and related history?',
+                  },
+                ],
+              }}
               columns={[
                 {
                   name: 'Created',
                   selector: (row) => row['CreatedTime'],
                   sortable: true,
+                  exportSelector: 'CreatedTime',
                   cell: cellDateFormatter({ format: 'short' }),
                 },
                 {
                   name: 'Completed',
                   selector: (row) => row?.CompletedTime,
                   sortable: true,
+                  exportSelector: 'CompletedTime',
                   cell: cellDateFormatter({ format: 'short' }),
                 },
                 {
                   name: 'Name',
                   selector: (row) => row['Name'],
                   sortable: true,
+                  exportSelector: 'Name',
                   cell: cellGenericFormatter(),
                 },
                 {
                   name: 'Status',
                   selector: (row) => row['RuntimeStatus'],
                   sortable: true,
+                  exportSelector: 'RuntimeStatus',
                   cell: cellGenericFormatter(),
                 },
                 {
                   name: 'Input',
                   selector: (row) => row['Input'],
                   cell: cellGenericFormatter(),
                 },
+                {
+                  name: 'Actions',
+                  cell: Actions,
+                  maxWidth: '100px',
+                },
               ]}
               filterlist={[
                 { filterName: 'Running', filter: 'Complex: RuntimeStatus eq Running' },