Recent job details

src/components/layout/AppHeader.jsx

@@ -117,6 +117,7 @@ const AppHeader = () => {
             timestamp: job.Timestamp,
             percent: job.PercentComplete,
             progressText: `${job.PercentComplete}%`,
+            detailsObject: job.Tasks,
           })),
         )
       } else {

src/components/utilities/CippActionsOffcanvas.jsx

@@ -21,7 +21,12 @@ import {
   CRow,
   CSpinner,
 } from '@coreui/react'
-import { CippCodeBlock, CippOffcanvas, ModalService } from 'src/components/utilities'
+import {
+  CippCodeBlock,
+  CippOffcanvas,
+  CippTableOffcanvas,
+  ModalService,
+} from 'src/components/utilities'
 import { CippOffcanvasPropTypes } from 'src/components/utilities/CippOffcanvas'
 import { CippOffcanvasTable } from 'src/components/tables'
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
@@ -31,6 +36,65 @@ import ReactTimeAgo from 'react-time-ago'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 
+const CippOffcanvasCard = ({ action, key }) => {
+  const [offcanvasVisible, setOffcanvasVisible] = useState(false)
+  return (
+    <>
+      <CCard key={key} className="border-top-dark border-top-3 mb-3">
+        <CCardHeader className="d-flex justify-content-between align-items-center">
+          <CCardTitle>Report Name: {action.label}</CCardTitle>
+        </CCardHeader>
+        <CCardBody>
+          <CCardText>
+            {action.value && (
+              <>
+                {action?.link ? (
+                  <Link to={action.link}>Status: {action.value}</Link>
+                ) : (
+                  <span>Status: {action.value}</span>
+                )}
+              </>
+            )}
+          </CCardText>
+          {Array.isArray(action?.detailsObject) && (
+            <CButton size="sm" onClick={() => setOffcanvasVisible(true)}>
+              Details
+            </CButton>
+          )}
+          {Array.isArray(action?.detailsObject) && (
+            <CippTableOffcanvas
+              data={action.detailsObject}
+              title={`${action.label} - Details`}
+              state={offcanvasVisible}
+              hideFunction={() => setOffcanvasVisible(false)}
+            />
+          )}
+        </CCardBody>
+        <CCardFooter className="text-end">
+          <CRow>
+            {action?.percent > 0 && (
+              <CCol xs="8">
+                <div className="mt-1">
+                  <CProgress>
+                    <CProgressBar value={action.percent}>{action?.progressText}</CProgressBar>
+                  </CProgress>
+                </div>
+              </CCol>
+            )}
+            <CCol xs={action?.percent ? '4' : '12'}>
+              <small>{action.timestamp && <ReactTimeAgo date={action.timestamp} />}</small>
+            </CCol>
+          </CRow>
+        </CCardFooter>
+      </CCard>
+    </>
+  )
+}
+CippOffcanvasCard.propTypes = {
+  action: PropTypes.object,
+  key: PropTypes.object,
+}
+
 export default function CippActionsOffcanvas(props) {
   const inputRef = useRef('')
   const [genericGetRequest, getResults] = useLazyGenericGetRequestQuery()
@@ -219,34 +283,7 @@ export default function CippActionsOffcanvas(props) {
   let cardContent
   try {
     cardContent = props.cards.map((action, index) => (
-      <>
-        <CCard key={index} className="border-top-dark border-top-3 mb-3">
-          <CCardHeader className="d-flex justify-content-between align-items-center">
-            <CCardTitle>Report Name: {action.label}</CCardTitle>
-          </CCardHeader>
-          <CCardBody>
-            <CCardText>
-              {action.value && <Link to={action.link}>Status: {action.value}</Link>}
-            </CCardText>
-          </CCardBody>
-          <CCardFooter className="text-end">
-            <CRow>
-              {action?.percent > 0 && (
-                <CCol xs="8">
-                  <div className="mt-1">
-                    <CProgress>
-                      <CProgressBar value={action.percent}>{action?.progressText}</CProgressBar>
-                    </CProgress>
-                  </div>
-                </CCol>
-              )}
-              <CCol xs={action?.percent ? '4' : '12'}>
-                <small>{action.timestamp && <ReactTimeAgo date={action.timestamp} />}</small>
-              </CCol>
-            </CRow>
-          </CCardFooter>
-        </CCard>
-      </>
+      <CippOffcanvasCard action={action} key={index} />
     ))
   } catch (error) {
     // swallow error
@@ -343,6 +380,7 @@ export default function CippActionsOffcanvas(props) {
         <CippCodeBlock
           code={getResults.data?.Results}
           callout={true}
+          calloutDismissible={true}
           calloutColour={getResults.data?.colour ? getResults.data?.colour : 'info'}
           calloutCopyValue={getResults.data?.Results}
         />

src/components/utilities/CippCodeBlock.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { CButton, CCallout } from '@coreui/react'
+import { CButton } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCopy, faClipboard } from '@fortawesome/free-regular-svg-icons'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import { CippCallout } from '../layout'
 
 function CippCodeBlock({
   code,
@@ -16,7 +17,7 @@ function CippCodeBlock({
   callout = false,
   calloutColour = 'info',
   calloutCopyValue = false,
-  dismissable = false,
+  calloutDismissible = false,
 }) {
   const [codeCopied, setCodeCopied] = useState(false)
 
@@ -27,20 +28,26 @@ function CippCodeBlock({
 
   return (
     <div className="cipp-code">
-      <CopyToClipboard text={calloutCopyValue || code} onCopy={() => onCodeCopied()}>
-        <CButton
-          color={codeCopied ? 'success' : 'info'}
-          className="cipp-code-copy-button"
-          size="sm"
-          variant="ghost"
-        >
-          {codeCopied ? <FontAwesomeIcon icon={faClipboard} /> : <FontAwesomeIcon icon={faCopy} />}
-        </CButton>
-      </CopyToClipboard>
+      {!calloutDismissible && (
+        <CopyToClipboard text={calloutCopyValue || code} onCopy={() => onCodeCopied()}>
+          <CButton
+            color={codeCopied ? 'success' : 'info'}
+            className="cipp-code-copy-button"
+            size="sm"
+            variant="ghost"
+          >
+            {codeCopied ? (
+              <FontAwesomeIcon icon={faClipboard} />
+            ) : (
+              <FontAwesomeIcon icon={faCopy} />
+            )}
+          </CButton>
+        </CopyToClipboard>
+      )}
       {callout && (
-        <CCallout color={calloutColour} dismissable={dismissable}>
+        <CippCallout color={calloutColour} dismissible={calloutDismissible}>
           {code}
-        </CCallout>
+        </CippCallout>
       )}
       {!callout && (
         <SyntaxHighlighter
@@ -70,5 +77,5 @@ CippCodeBlock.propTypes = {
   callout: PropTypes.bool,
   calloutColour: PropTypes.string,
   calloutCopyValue: PropTypes.string,
-  dismissable: PropTypes.bool,
+  calloutDismissible: PropTypes.bool,
 }

src/components/utilities/CippTableOffcanvas.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { CippOffcanvas } from 'src/components/utilities'
 import PropTypes from 'prop-types'
-import { CippDatatable } from '../tables'
+import { CippDatatable, CippTable } from '../tables'
+import { cellGenericFormatter } from '../tables/CellGenericFormat'
 
 function CippTableOffcanvas({
   state: visible,
@@ -11,7 +12,37 @@ function CippTableOffcanvas({
   params,
   columns,
   tableProps,
+  data = null,
 }) {
+  if (data !== null && data !== undefined) {
+    if (!Array.isArray(data) && typeof data === 'object') {
+      data = Object.keys(data).map((key) => {
+        return {
+          Key: key,
+          Value: data[key],
+        }
+      })
+    } else {
+      if (Array.isArray(data) && typeof data[0] !== 'object') {
+        data = data.map((row) => {
+          return {
+            Value: row,
+          }
+        })
+      }
+    }
+    columns = []
+    Object.keys(data[0]).map((key) => {
+      columns.push({
+        name: key,
+        selector: (row) => row[key],
+        sortable: true,
+        exportSelector: key,
+        cell: cellGenericFormatter(),
+      })
+    })
+  }
+
   return (
     <>
       <CippOffcanvas
@@ -21,7 +52,13 @@ function CippTableOffcanvas({
         visible={visible}
         hideFunction={hideFunction}
       >
-        <CippDatatable path={path} params={params} columns={columns} tableProps={tableProps} />
+        <>
+          {data !== null && data !== undefined ? (
+            <CippTable data={data} columns={columns} />
+          ) : (
+            <CippDatatable path={path} params={params} columns={columns} tableProps={tableProps} />
+          )}
+        </>
       </CippOffcanvas>
     </>
   )
@@ -35,6 +72,7 @@ CippTableOffcanvas.propTypes = {
   params: PropTypes.object,
   columns: PropTypes.object,
   tableProps: PropTypes.object,
+  data: PropTypes.object,
 }
 
 export default CippTableOffcanvas