Skip to content

Commit 5ce3855

Browse files
JohnDupreyJohnDuprey
authored
Merge pull request #2361 from JohnDuprey/dev
Recent job details
2 parents 03c979d + f305105 commit 5ce3855

File tree

4 files changed

+130
-46
lines changed

4 files changed

+130
-46
lines changed

‎src/components/layout/AppHeader.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ const AppHeader = () => {
117117
timestamp: job.Timestamp,
118118
percent: job.PercentComplete,
119119
progressText: `${job.PercentComplete}%`,
120+
detailsObject: job.Tasks,
120121
})),
121122
)
122123
} else {

‎src/components/utilities/CippActionsOffcanvas.jsx

Lines changed: 67 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,12 @@ import {
2121
CRow,
2222
CSpinner,
2323
} from '@coreui/react'
24-
import { CippCodeBlock, CippOffcanvas, ModalService } from 'src/components/utilities'
24+
import {
25+
CippCodeBlock,
26+
CippOffcanvas,
27+
CippTableOffcanvas,
28+
ModalService,
29+
} from 'src/components/utilities'
2530
import { CippOffcanvasPropTypes } from 'src/components/utilities/CippOffcanvas'
2631
import { CippOffcanvasTable } from 'src/components/tables'
2732
import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
@@ -31,6 +36,65 @@ import ReactTimeAgo from 'react-time-ago'
3136
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3237
import { faGlobe } from '@fortawesome/free-solid-svg-icons'
3338

39+
const CippOffcanvasCard = ({ action, key }) => {
40+
const [offcanvasVisible, setOffcanvasVisible] = useState(false)
41+
return (
42+
<>
43+
<CCard key={key} className="border-top-dark border-top-3 mb-3">
44+
<CCardHeader className="d-flex justify-content-between align-items-center">
45+
<CCardTitle>Report Name: {action.label}</CCardTitle>
46+
</CCardHeader>
47+
<CCardBody>
48+
<CCardText>
49+
{action.value && (
50+
<>
51+
{action?.link ? (
52+
<Link to={action.link}>Status: {action.value}</Link>
53+
) : (
54+
<span>Status: {action.value}</span>
55+
)}
56+
</>
57+
)}
58+
</CCardText>
59+
{Array.isArray(action?.detailsObject) && (
60+
<CButton size="sm" onClick={() => setOffcanvasVisible(true)}>
61+
Details
62+
</CButton>
63+
)}
64+
{Array.isArray(action?.detailsObject) && (
65+
<CippTableOffcanvas
66+
data={action.detailsObject}
67+
title={`${action.label} - Details`}
68+
state={offcanvasVisible}
69+
hideFunction={() => setOffcanvasVisible(false)}
70+
/>
71+
)}
72+
</CCardBody>
73+
<CCardFooter className="text-end">
74+
<CRow>
75+
{action?.percent > 0 && (
76+
<CCol xs="8">
77+
<div className="mt-1">
78+
<CProgress>
79+
<CProgressBar value={action.percent}>{action?.progressText}</CProgressBar>
80+
</CProgress>
81+
</div>
82+
</CCol>
83+
)}
84+
<CCol xs={action?.percent ? '4' : '12'}>
85+
<small>{action.timestamp && <ReactTimeAgo date={action.timestamp} />}</small>
86+
</CCol>
87+
</CRow>
88+
</CCardFooter>
89+
</CCard>
90+
</>
91+
)
92+
}
93+
CippOffcanvasCard.propTypes = {
94+
action: PropTypes.object,
95+
key: PropTypes.object,
96+
}
97+
3498
export default function CippActionsOffcanvas(props) {
3599
const inputRef = useRef('')
36100
const [genericGetRequest, getResults] = useLazyGenericGetRequestQuery()
@@ -219,34 +283,7 @@ export default function CippActionsOffcanvas(props) {
219283
let cardContent
220284
try {
221285
cardContent = props.cards.map((action, index) => (
222-
<>
223-
<CCard key={index} className="border-top-dark border-top-3 mb-3">
224-
<CCardHeader className="d-flex justify-content-between align-items-center">
225-
<CCardTitle>Report Name: {action.label}</CCardTitle>
226-
</CCardHeader>
227-
<CCardBody>
228-
<CCardText>
229-
{action.value && <Link to={action.link}>Status: {action.value}</Link>}
230-
</CCardText>
231-
</CCardBody>
232-
<CCardFooter className="text-end">
233-
<CRow>
234-
{action?.percent > 0 && (
235-
<CCol xs="8">
236-
<div className="mt-1">
237-
<CProgress>
238-
<CProgressBar value={action.percent}>{action?.progressText}</CProgressBar>
239-
</CProgress>
240-
</div>
241-
</CCol>
242-
)}
243-
<CCol xs={action?.percent ? '4' : '12'}>
244-
<small>{action.timestamp && <ReactTimeAgo date={action.timestamp} />}</small>
245-
</CCol>
246-
</CRow>
247-
</CCardFooter>
248-
</CCard>
249-
</>
286+
<CippOffcanvasCard action={action} key={index} />
250287
))
251288
} catch (error) {
252289
// swallow error
@@ -343,6 +380,7 @@ export default function CippActionsOffcanvas(props) {
343380
<CippCodeBlock
344381
code={getResults.data?.Results}
345382
callout={true}
383+
calloutDismissible={true}
346384
calloutColour={getResults.data?.colour ? getResults.data?.colour : 'info'}
347385
calloutCopyValue={getResults.data?.Results}
348386
/>

‎src/components/utilities/CippCodeBlock.jsx

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React, { useState } from 'react'
22
import PropTypes from 'prop-types'
33
import { CopyToClipboard } from 'react-copy-to-clipboard'
4-
import { CButton, CCallout } from '@coreui/react'
4+
import { CButton } from '@coreui/react'
55
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
66
import { faCopy, faClipboard } from '@fortawesome/free-regular-svg-icons'
77
import SyntaxHighlighter from 'react-syntax-highlighter'
88
import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'
9+
import { CippCallout } from '../layout'
910

1011
function CippCodeBlock({
1112
code,
@@ -16,7 +17,7 @@ function CippCodeBlock({
1617
callout = false,
1718
calloutColour = 'info',
1819
calloutCopyValue = false,
19-
dismissable = false,
20+
calloutDismissible = false,
2021
}) {
2122
const [codeCopied, setCodeCopied] = useState(false)
2223

@@ -27,20 +28,26 @@ function CippCodeBlock({
2728

2829
return (
2930
<div className="cipp-code">
30-
<CopyToClipboard text={calloutCopyValue || code} onCopy={() => onCodeCopied()}>
31-
<CButton
32-
color={codeCopied ? 'success' : 'info'}
33-
className="cipp-code-copy-button"
34-
size="sm"
35-
variant="ghost"
36-
>
37-
{codeCopied ? <FontAwesomeIcon icon={faClipboard} /> : <FontAwesomeIcon icon={faCopy} />}
38-
</CButton>
39-
</CopyToClipboard>
31+
{!calloutDismissible && (
32+
<CopyToClipboard text={calloutCopyValue || code} onCopy={() => onCodeCopied()}>
33+
<CButton
34+
color={codeCopied ? 'success' : 'info'}
35+
className="cipp-code-copy-button"
36+
size="sm"
37+
variant="ghost"
38+
>
39+
{codeCopied ? (
40+
<FontAwesomeIcon icon={faClipboard} />
41+
) : (
42+
<FontAwesomeIcon icon={faCopy} />
43+
)}
44+
</CButton>
45+
</CopyToClipboard>
46+
)}
4047
{callout && (
41-
<CCallout color={calloutColour} dismissable={dismissable}>
48+
<CippCallout color={calloutColour} dismissible={calloutDismissible}>
4249
{code}
43-
</CCallout>
50+
</CippCallout>
4451
)}
4552
{!callout && (
4653
<SyntaxHighlighter
@@ -70,5 +77,5 @@ CippCodeBlock.propTypes = {
7077
callout: PropTypes.bool,
7178
calloutColour: PropTypes.string,
7279
calloutCopyValue: PropTypes.string,
73-
dismissable: PropTypes.bool,
80+
calloutDismissible: PropTypes.bool,
7481
}

‎src/components/utilities/CippTableOffcanvas.jsx

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
22
import { CippOffcanvas } from 'src/components/utilities'
33
import PropTypes from 'prop-types'
4-
import { CippDatatable } from '../tables'
4+
import { CippDatatable, CippTable } from '../tables'
5+
import { cellGenericFormatter } from '../tables/CellGenericFormat'
56

67
function CippTableOffcanvas({
78
state: visible,
@@ -11,7 +12,37 @@ function CippTableOffcanvas({
1112
params,
1213
columns,
1314
tableProps,
15+
data = null,
1416
}) {
17+
if (data !== null && data !== undefined) {
18+
if (!Array.isArray(data) && typeof data === 'object') {
19+
data = Object.keys(data).map((key) => {
20+
return {
21+
Key: key,
22+
Value: data[key],
23+
}
24+
})
25+
} else {
26+
if (Array.isArray(data) && typeof data[0] !== 'object') {
27+
data = data.map((row) => {
28+
return {
29+
Value: row,
30+
}
31+
})
32+
}
33+
}
34+
columns = []
35+
Object.keys(data[0]).map((key) => {
36+
columns.push({
37+
name: key,
38+
selector: (row) => row[key],
39+
sortable: true,
40+
exportSelector: key,
41+
cell: cellGenericFormatter(),
42+
})
43+
})
44+
}
45+
1546
return (
1647
<>
1748
<CippOffcanvas
@@ -21,7 +52,13 @@ function CippTableOffcanvas({
2152
visible={visible}
2253
hideFunction={hideFunction}
2354
>
24-
<CippDatatable path={path} params={params} columns={columns} tableProps={tableProps} />
55+
<>
56+
{data !== null && data !== undefined ? (
57+
<CippTable data={data} columns={columns} />
58+
) : (
59+
<CippDatatable path={path} params={params} columns={columns} tableProps={tableProps} />
60+
)}
61+
</>
2562
</CippOffcanvas>
2663
</>
2764
)
@@ -35,6 +72,7 @@ CippTableOffcanvas.propTypes = {
3572
params: PropTypes.object,
3673
columns: PropTypes.object,
3774
tableProps: PropTypes.object,
75+
data: PropTypes.object,
3876
}
3977

4078
export default CippTableOffcanvas

0 commit comments

Comments
 (0)