Skip to content

Commit c61757e

Browse files
pull[bot]pull[bot]
authored
Merge pull request #706 from KelvinTegelaar/dev
[pull] dev from KelvinTegelaar:dev
2 parents e9d5f08 + 22c0729 commit c61757e

File tree

1 file changed

+154
-38
lines changed

1 file changed

+154
-38
lines changed

‎src/pages/tenant/manage/drift.js‎

Lines changed: 154 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -369,30 +369,142 @@ const ManageDriftPage = () => {
369369
receivedValue: deviation.receivedValue, // Store the original receivedValue for action handlers
370370
expectedValue: deviation.expectedValue, // Store the original expectedValue for action handlers
371371
originalDeviation: deviation, // Store the complete original deviation object for reference
372-
propertyItems: [
373-
{ label: "Standard Name", value: prettyName },
374-
{ label: "Description", value: description },
375-
{ label: "Expected Value", value: deviation.expectedValue || "N/A" },
376-
{ label: "Current Value", value: formatPolicyValue(deviation.receivedValue) },
377-
{
378-
label: "Status",
379-
value: getDeviationStatusText(statusOverride || deviation.Status || deviation.state),
380-
},
381-
{
382-
label: "Reason",
383-
value: deviation.Reason || "N/A",
384-
},
385-
{
386-
label: "User",
387-
value: deviation.lastChangedByUser || "N/A",
388-
},
389-
{
390-
label: "Last Updated",
391-
value: processedDriftData.latestDataCollection
392-
? new Date(processedDriftData.latestDataCollection).toLocaleString()
393-
: "N/A",
394-
},
395-
].filter((item) => item.value !== "N/A" && item.value !== "No description available"), // Filter out N/A values and empty descriptions
372+
children: (
373+
<Stack spacing={2} sx={{ p: 2 }}>
374+
{description && description !== "No description available" && (
375+
<Typography variant="body2" color="text.secondary">
376+
{description}
377+
</Typography>
378+
)}
379+
380+
{(deviation.expectedValue && deviation.expectedValue !== "Compliant with template") ||
381+
deviation.receivedValue ? (
382+
<Box sx={{ display: "flex", gap: 2, flexDirection: { xs: "column", md: "row" } }}>
383+
{deviation.expectedValue &&
384+
deviation.expectedValue !== "Compliant with template" && (
385+
<Box sx={{ flex: 1, minWidth: 0 }}>
386+
<Typography
387+
variant="caption"
388+
sx={{
389+
fontWeight: 600,
390+
color: "text.secondary",
391+
textTransform: "uppercase",
392+
letterSpacing: 0.5,
393+
}}
394+
>
395+
Expected
396+
</Typography>
397+
<Box
398+
sx={{
399+
mt: 0.5,
400+
p: 1.5,
401+
bgcolor: "action.hover",
402+
borderRadius: 1,
403+
border: "1px solid",
404+
borderColor: "divider",
405+
}}
406+
>
407+
<Typography
408+
variant="body2"
409+
sx={{
410+
fontFamily: "monospace",
411+
fontSize: "0.8125rem",
412+
whiteSpace: "pre-wrap",
413+
wordBreak: "break-word",
414+
}}
415+
>
416+
{deviation.expectedValue}
417+
</Typography>
418+
</Box>
419+
</Box>
420+
)}
421+
422+
{deviation.receivedValue && (
423+
<Box sx={{ flex: 1, minWidth: 0 }}>
424+
<Typography
425+
variant="caption"
426+
sx={{
427+
fontWeight: 600,
428+
color: "text.secondary",
429+
textTransform: "uppercase",
430+
letterSpacing: 0.5,
431+
}}
432+
>
433+
Current
434+
</Typography>
435+
<Box
436+
sx={{
437+
mt: 0.5,
438+
p: 1.5,
439+
bgcolor: "action.hover",
440+
borderRadius: 1,
441+
border: "1px solid",
442+
borderColor: "divider",
443+
}}
444+
>
445+
<Typography
446+
variant="body2"
447+
sx={{
448+
fontFamily: "monospace",
449+
fontSize: "0.8125rem",
450+
whiteSpace: "pre-wrap",
451+
wordBreak: "break-word",
452+
}}
453+
>
454+
{formatPolicyValue(deviation.receivedValue)}
455+
</Typography>
456+
</Box>
457+
</Box>
458+
)}
459+
</Box>
460+
) : null}
461+
462+
{(deviation.Reason ||
463+
deviation.lastChangedByUser ||
464+
processedDriftData.latestDataCollection) && (
465+
<>
466+
<Divider />
467+
<Box sx={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
468+
{deviation.Reason && (
469+
<Box sx={{ minWidth: 0 }}>
470+
<Typography
471+
variant="caption"
472+
sx={{ fontWeight: 600, color: "text.secondary" }}
473+
>
474+
Reason
475+
</Typography>
476+
<Typography variant="body2">{deviation.Reason}</Typography>
477+
</Box>
478+
)}
479+
{deviation.lastChangedByUser && (
480+
<Box sx={{ minWidth: 0 }}>
481+
<Typography
482+
variant="caption"
483+
sx={{ fontWeight: 600, color: "text.secondary" }}
484+
>
485+
Changed By
486+
</Typography>
487+
<Typography variant="body2">{deviation.lastChangedByUser}</Typography>
488+
</Box>
489+
)}
490+
{processedDriftData.latestDataCollection && (
491+
<Box sx={{ minWidth: 0 }}>
492+
<Typography
493+
variant="caption"
494+
sx={{ fontWeight: 600, color: "text.secondary" }}
495+
>
496+
Last Updated
497+
</Typography>
498+
<Typography variant="body2">
499+
{new Date(processedDriftData.latestDataCollection).toLocaleString()}
500+
</Typography>
501+
</Box>
502+
)}
503+
</Box>
504+
</>
505+
)}
506+
</Stack>
507+
),
396508
};
397509
});
398510
};
@@ -1186,6 +1298,7 @@ const ManageDriftPage = () => {
11861298
{ label: "Accepted", value: "accepted" },
11871299
{ label: "Customer Specific", value: "customerspecific" },
11881300
{ label: "Denied", value: "denied" },
1301+
{ label: "Compliant", value: "compliant" },
11891302
]}
11901303
multiple={true}
11911304
/>
@@ -1328,20 +1441,23 @@ const ManageDriftPage = () => {
13281441
</Box>
13291442
)}
13301443

1331-
{/* Compliant Standards Section - Always shown, not affected by status filter */}
1332-
{filteredAlignedItems.length > 0 && (
1333-
<Box>
1334-
<Typography variant="h6" sx={{ mb: 2 }}>
1335-
Compliant Standards
1336-
</Typography>
1337-
<CippBannerListCard
1338-
items={filteredAlignedItems}
1339-
isCollapsible={true}
1340-
layout={"single"}
1341-
isFetching={driftApi.isFetching}
1342-
/>
1343-
</Box>
1344-
)}
1444+
{/* Compliant Standards Section - Only shown when filtered by All or Compliant */}
1445+
{(!filterStatus ||
1446+
filterStatus.length === 0 ||
1447+
filterStatus.some((f) => f.value === "all" || f.value === "compliant")) &&
1448+
filteredAlignedItems.length > 0 && (
1449+
<Box>
1450+
<Typography variant="h6" sx={{ mb: 2 }}>
1451+
Compliant Standards
1452+
</Typography>
1453+
<CippBannerListCard
1454+
items={filteredAlignedItems}
1455+
isCollapsible={true}
1456+
layout={"single"}
1457+
isFetching={driftApi.isFetching}
1458+
/>
1459+
</Box>
1460+
)}
13451461
</Stack>
13461462
</Grid>
13471463
</Grid>

0 commit comments

Comments
 (0)