CippActionsOffcanvas updates

- Add dismissable callout to code block - Add progress bar to cards - Update queue to include progress percentage
JohnDuprey · Apr 22, 2024 · e61e475 · e61e475
1 parent b2c0f67
commit e61e475
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/src/components/layout/AppHeader.jsx b/src/components/layout/AppHeader.jsx
@@ -94,11 +94,13 @@ const AppHeader = () => {
           value: job.Status,
           link: job.Link,
           timestamp: job.Timestamp,
+          percent: job.PercentComplete,
+          progressText: `${job.PercentComplete}%`,
         })),
       )
     } else {
       setCippQueueExtendedInfo([
-        { label: 'No jobs to display', value: '', timpestamp: Date(), link: '#' },
+        { label: 'No jobs to display', value: '', timestamp: Date(), link: '#' },
       ])
     }
   }, [cippQueueList])
@@ -197,6 +199,7 @@ const AppHeader = () => {
         extendedInfo={[]}
         cards={cippQueueExtendedInfo}
         refreshFunction={refreshCippQueue}
+        isRefreshing={cippQueueList.isFetching || cippQueueList.isLoading}
         actions={[
           {
             label: 'Clear History',

diff --git a/src/components/utilities/CippActionsOffcanvas.jsx b/src/components/utilities/CippActionsOffcanvas.jsx
@@ -5,14 +5,20 @@ import {
   CCallout,
   CCard,
   CCardBody,
+  CCardFooter,
   CCardHeader,
   CCardText,
   CCardTitle,
+  CCol,
   CFormInput,
   CFormSelect,
   CListGroup,
   CListGroupItem,
   COffcanvasTitle,
+  CProgress,
+  CProgressBar,
+  CProgressStacked,
+  CRow,
   CSpinner,
 } from '@coreui/react'
 import { CippCodeBlock, CippOffcanvas, ModalService } from 'src/components/utilities'
@@ -222,8 +228,23 @@ export default function CippActionsOffcanvas(props) {
             <CCardText>
               {action.value && <Link to={action.link}>Status: {action.value}</Link>}
             </CCardText>
-            <small>{action.timestamp && <ReactTimeAgo date={action.timestamp} />}</small>
           </CCardBody>
+          <CCardFooter className="text-end">
+            <CRow>
+              {action.percent && (
+                <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>
       </>
     ))
@@ -295,6 +316,7 @@ export default function CippActionsOffcanvas(props) {
       id={props.id}
       hideFunction={props.hideFunction}
       refreshFunction={props.refreshFunction}
+      isRefreshing={props.isRefreshing}
     >
       {getResults.isFetching && (
         <CCallout color="info">
@@ -310,6 +332,7 @@ export default function CippActionsOffcanvas(props) {
         <CippCodeBlock
           code={postResults.data?.Results}
           callout={true}
+          dismissable={true}
           calloutCopyValue={getResults.data?.Results}
         />
       )}

diff --git a/src/components/utilities/CippCodeBlock.jsx b/src/components/utilities/CippCodeBlock.jsx
@@ -16,6 +16,7 @@ function CippCodeBlock({
   callout = false,
   calloutColour = 'info',
   calloutCopyValue = false,
+  dismissable = false,
 }) {
   const [codeCopied, setCodeCopied] = useState(false)
 
@@ -36,7 +37,11 @@ function CippCodeBlock({
           {codeCopied ? <FontAwesomeIcon icon={faClipboard} /> : <FontAwesomeIcon icon={faCopy} />}
         </CButton>
       </CopyToClipboard>
-      {callout && <CCallout color={calloutColour}>{code}</CCallout>}
+      {callout && (
+        <CCallout color={calloutColour} dismissable={dismissable}>
+          {code}
+        </CCallout>
+      )}
       {!callout && (
         <SyntaxHighlighter
           language={language}
@@ -62,4 +67,8 @@ CippCodeBlock.propTypes = {
   showLineNumbers: PropTypes.bool,
   startingLineNumber: PropTypes.number,
   wrapLongLines: PropTypes.bool,
+  callout: PropTypes.bool,
+  calloutColour: PropTypes.string,
+  calloutCopyValue: PropTypes.string,
+  dismissable: PropTypes.bool,
 }
diff --git a/src/components/utilities/CippOffcanvas.jsx b/src/components/utilities/CippOffcanvas.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { CButton, COffcanvas, COffcanvasHeader, COffcanvasBody } from '@coreui/react'
+import { CButton, COffcanvas, COffcanvasHeader, COffcanvasBody, CSpinner } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
@@ -23,11 +23,10 @@ export default function CippOffcanvas(props) {
               color="link"
               size="lg"
               onClick={() => {
-                //console.log('refresh')
                 props.refreshFunction()
               }}
             >
-              <FontAwesomeIcon icon="sync" />
+              {props.isRefreshing ? <CSpinner size="sm" /> : <FontAwesomeIcon icon="sync" />}
             </CButton>
           )}
           <CButton className="cipp-offcanvas-close" color="link" onClick={props.hideFunction}>
@@ -48,6 +47,7 @@ export const CippOffcanvasPropTypes = {
   id: PropTypes.string,
   hideFunction: PropTypes.func.isRequired,
   refreshFunction: PropTypes.func,
+  isRefreshing: PropTypes.bool,
   addedClass: PropTypes.string,
 }