From 2384255846522dcfe8b7b4c82bf393ecfb67e05b Mon Sep 17 00:00:00 2001 From: John Duprey Date: Fri, 26 Apr 2024 06:24:42 -0400 Subject: [PATCH 1/2] Tenant Dashboard --- src/views/home/Home.jsx | 560 ++++++++++++++++++++++------------------ 1 file changed, 307 insertions(+), 253 deletions(-) diff --git a/src/views/home/Home.jsx b/src/views/home/Home.jsx index 4f34f644d40c..959054b7914c 100644 --- a/src/views/home/Home.jsx +++ b/src/views/home/Home.jsx @@ -3,7 +3,6 @@ import { faBook, faCog, faEllipsisH, - faHotel, faLaptopCode, faMailBulk, faSearch, @@ -12,7 +11,19 @@ import { faUserPlus, faUsers, } from '@fortawesome/free-solid-svg-icons' -import { CButton, CCol, CCollapse, CRow } from '@coreui/react' +import { + CButton, + CCol, + CCollapse, + CDropdown, + CDropdownHeader, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CLink, + CNav, + CRow, +} from '@coreui/react' import { useGenericGetRequestQuery } from 'src/store/api/app' import { CippContentCard } from 'src/components/layout' import Skeleton from 'react-loading-skeleton' @@ -21,16 +32,27 @@ import { ActionContentCard } from 'src/components/contentcards' import { useSelector } from 'react-redux' import allStandardsList from 'src/data/standards' import Portals from 'src/data/portals' -import { Link } from 'react-router-dom' -import { TableModalButton } from 'src/components/buttons' import CippCopyToClipboard from 'src/components/utilities/CippCopyToClipboard' import { CChart } from '@coreui/react-chartjs' import { getStyle } from '@coreui/utils' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { Link } from 'react-router-dom' +import { useMediaPredicate } from 'react-media-hook' -const Home = () => { +const TenantDashboard = () => { const [visible, setVisible] = useState(false) const [domainVisible, setDomainVisible] = useState(false) + const currentTenant = useSelector((state) => state.app.currentTenant) + const theme = useSelector((state) => state.app.currentTheme) + + var buttonColor = '' + if (theme === 'impact') { + buttonColor = 'secondary' + } else { + buttonColor = 'primary' + } + const { data: organization, isLoading: isLoadingOrg, @@ -152,274 +174,306 @@ const Home = () => { ) }) } - return ( <> - - - - - - - - - + + + + + Portals + + + {actions1.map((item, idx) => ( + + {item.icon && } + {item.label} + + ))} + + + + + + CIPP Actions + + + {actions2.map((item, idx) => ( + + {item.icon && } + {item.label} + + ))} + + - {currentTenant?.customerId !== 'AllTenants' ? ( - <> - - - - - - {currentTenant?.displayName} - - - - - - {currentTenant?.customerId} - - - - - - {currentTenant?.defaultDomainName} - - - - - - - - {!isFetchingOrg && issuccessOrg && ( + + + + + + {currentTenant?.displayName} + + + + + + {currentTenant?.customerId} + + + + + + {currentTenant?.defaultDomainName} + + + + + + + + {!isFetchingOrg && issuccessOrg && ( + <> + {organization.verifiedDomains?.slice(0, 3).map((item, idx) => ( +
  • {item.name}
    • + ))} + {organization.verifiedDomains?.length > 5 && ( <> - {organization.verifiedDomains?.slice(0, 3).map((item, idx) => ( -
  • {item.name}
    • - ))} - {organization.verifiedDomains?.length > 5 && ( - <> - - {organization.verifiedDomains?.slice(3).map((item, idx) => ( -
  • {item.name}
    • - ))} -     - setDomainVisible(!domainVisible)} - > - {domainVisible ? 'See less' : 'See more...'} - - - )} + + {organization.verifiedDomains?.slice(3).map((item, idx) => ( +
  • {item.name}
    • + ))} +     + setDomainVisible(!domainVisible)} + > + {domainVisible ? 'See less' : 'See more...'} + )} -     -     - - - {(isLoadingPartners || isFetchingPartners) && } - {issuccessPartners && - !isFetchingPartners && - partners?.Results.map((partner, idx) => { - if (partner.TenantInfo) { - return ( -
  • - {partner.TenantInfo.displayName} ( - {partner.TenantInfo.defaultDomainName}) -
    • - ) - } - })} -     -     - - - {(isLoadingOrg || isFetchingOrg) && } - {!isFetchingOrg && - issuccessOrg && - organization?.assignedPlans - ?.filter((p) => p.capabilityStatus == 'Enabled') - .reduce((plan, curr) => { - if (!plan.includes(curr.service)) { - plan.push(curr.service) - } - return plan - }, []) - .map((plan, idx) => ( -
    - {plan === 'exchange' &&
  • Exchange
    • } - {plan === 'AADPremiumService' &&
  • AAD Premium
    • } - {plan === 'WindowsDefenderATP' &&
  • Windows Defender
    • } -
    - ))} -     -     -     - - - - {(!issuccessUserCounts || isFetchingUserCount) && } - {issuccessUserCounts && !isFetchingUserCount && ( - + )} + + + + + {(isLoadingPartners || isFetchingPartners) && } + {issuccessPartners && + !isFetchingPartners && + partners?.Results.map((partner, idx) => { + if (partner.TenantInfo) { + return ( +
  • + {partner.TenantInfo.displayName} ({partner.TenantInfo.defaultDomainName}) +
    • + ) + } + })} +     +     + + + {(isLoadingOrg || isFetchingOrg) && } + {!isFetchingOrg && + issuccessOrg && + organization?.assignedPlans + ?.filter((p) => p.capabilityStatus == 'Enabled') + .reduce((plan, curr) => { + if (!plan.includes(curr.service)) { + plan.push(curr.service) + } + return plan + }, []) + .map((plan, idx) => ( +
    + {plan === 'exchange' &&
  • Exchange
    • } + {plan === 'AADPremiumService' &&
  • AAD Premium
    • } + {plan === 'WindowsDefenderATP' &&
  • Windows Defender
    • } +
    + ))} +     +     +     + + + + {(!issuccessUserCounts || isFetchingUserCount) && } + {issuccessUserCounts && !isFetchingUserCount && ( + - )} - - - - - {(isLoadingStandards || isFetchingStandards) && } - {issuccessStandards && !isFetchingStandards && ( - <> - + )} + + + + + {(isLoadingStandards || isFetchingStandards) && } + {issuccessStandards && !isFetchingStandards && ( + <> + - Remediation Standards: - {filteredStandards(false, 'remediate').slice(0, 5)} - {filteredStandards(false, 'remediate').length > 5 && ( - <> - - {filteredStandards(false, 'remediate').slice(5)} - - setVisible(!visible)} - > - {visible ? 'See less' : 'See more...'} - - - )} - - )} - - - - - {(isLoadingSPQuota || isFetchingSPQuota) && } - {issuccessSPQuota && - sharepoint.GeoUsedStorageMB === null && - 'No SharePoint Information available'} - {sharepoint && !isFetchingSPQuota && sharepoint.GeoUsedStorageMB && ( - + }, + }} + /> + Remediation Standards: + {filteredStandards(false, 'remediate').slice(0, 5)} + {filteredStandards(false, 'remediate').length > 5 && ( + <> + + {filteredStandards(false, 'remediate').slice(5)} + + setVisible(!visible)}> + {visible ? 'See less' : 'See more...'} + + )} - - - + + )} +     -     - - - - - - + + + {(isLoadingSPQuota || isFetchingSPQuota) && } + {issuccessSPQuota && + sharepoint.GeoUsedStorageMB === null && + 'No SharePoint Information available'} + {sharepoint && !isFetchingSPQuota && sharepoint.GeoUsedStorageMB && ( + + )} + - +     +     + + ) +} + +const Home = () => { + const currentTenant = useSelector((state) => state.app.currentTenant) + + return ( + <> + + + + + + + + + + + + + {currentTenant?.customerId !== 'AllTenants' ? ( + ) : ( From 6c8fbbc228de8720e2ba52c44ef06d019946bf36 Mon Sep 17 00:00:00 2001 From: John Duprey Date: Fri, 26 Apr 2024 06:35:02 -0400 Subject: [PATCH 2/2] Add header text from settings to home page --- src/components/layout/CippContentCard.jsx | 5 ++++- src/views/home/Home.jsx | 20 ++++++++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/components/layout/CippContentCard.jsx b/src/components/layout/CippContentCard.jsx index db535d3809be..71d5c6274ac8 100644 --- a/src/components/layout/CippContentCard.jsx +++ b/src/components/layout/CippContentCard.jsx @@ -5,6 +5,7 @@ import { CCard, CCardBody, CCardHeader, CCardTitle } from '@coreui/react' export default function CippContentCard({ title, + titleType = 'small', children, icon, button, @@ -14,7 +15,9 @@ export default function CippContentCard({ return ( - {title} + + {titleType === 'big' ?

    {title}

    : title} +     {icon ? : null} {button ? button : null}     diff --git a/src/views/home/Home.jsx b/src/views/home/Home.jsx index 959054b7914c..365ed1c87353 100644 --- a/src/views/home/Home.jsx +++ b/src/views/home/Home.jsx @@ -218,19 +218,19 @@ const TenantDashboard = () => { - + {currentTenant?.displayName} - + {currentTenant?.customerId} - + {currentTenant?.defaultDomainName} @@ -238,7 +238,7 @@ const TenantDashboard = () => { - + {!isFetchingOrg && issuccessOrg && ( <> {organization.verifiedDomains?.slice(0, 3).map((item, idx) => ( @@ -265,7 +265,7 @@ const TenantDashboard = () => { - + {(isLoadingPartners || isFetchingPartners) && } {issuccessPartners && !isFetchingPartners && @@ -281,7 +281,7 @@ const TenantDashboard = () => { - + {(isLoadingOrg || isFetchingOrg) && } {!isFetchingOrg && issuccessOrg && @@ -305,7 +305,7 @@ const TenantDashboard = () => { - + {(!issuccessUserCounts || isFetchingUserCount) && } {issuccessUserCounts && !isFetchingUserCount && ( { - + {(isLoadingStandards || isFetchingStandards) && } {issuccessStandards && !isFetchingStandards && ( <> @@ -413,7 +413,7 @@ const TenantDashboard = () => { - + {(isLoadingSPQuota || isFetchingSPQuota) && } {issuccessSPQuota && sharepoint.GeoUsedStorageMB === null && @@ -462,7 +462,7 @@ const Home = () => { <> - +