Merge pull request #1526 from KelvinTegelaar/dev

Dev to release

public/version_latest.txt

@@ -1 +1 @@
-3.4.0
+3.5.0

src/_nav.js

@@ -18,6 +18,7 @@ import {
   faExclamationTriangle,
   faUserShield,
   faEnvelope,
+  faToolbox,
 } from '@fortawesome/free-solid-svg-icons'
 
 const _nav = [
@@ -134,6 +135,35 @@ const _nav = [
       },
     ],
   },
+  {
+    component: CNavGroup,
+    name: 'Tools',
+    section: 'Tools',
+    to: '/tenant/administration',
+    icon: <FontAwesomeIcon icon={faToolbox} className="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: 'Graph Explorer',
+        to: '/tenant/administration/graph-explorer',
+      },
+      {
+        component: CNavItem,
+        name: 'Application Approval',
+        to: '/tenant/administration/appapproval',
+      },
+      {
+        component: CNavItem,
+        name: 'Tenant Lookup',
+        to: '/tenant/administration/tenantlookup',
+      },
+      {
+        component: CNavItem,
+        name: 'Individual Domain Check',
+        to: '/tenant/standards/individual-domains',
+      },
+    ],
+  },
   {
     component: CNavGroup,
     name: 'Standards',
@@ -161,11 +191,6 @@ const _nav = [
         name: 'Domains Analyser',
         to: '/tenant/standards/domains-analyser',
       },
-      {
-        component: CNavItem,
-        name: 'Individual Domain Check',
-        to: '/tenant/standards/individual-domains',
-      },
     ],
   },
   {
@@ -214,11 +239,6 @@ const _nav = [
     to: '/tenant/reports',
     icon: <FontAwesomeIcon icon={faChartBar} className="nav-icon" />,
     items: [
-      {
-        component: CNavItem,
-        name: 'Graph Explorer',
-        to: '/tenant/administration/graph-explorer',
-      },
       {
         component: CNavItem,
         name: 'Licence Report',
@@ -671,8 +691,8 @@ const _nav = [
       },
       {
         component: CNavItem,
-        name: 'Application Approval',
-        to: '/tenant/administration/appapproval',
+        name: 'GDAP Relationships',
+        to: '/tenant/administration/gdap-relationships',
       },
       {
         component: CNavItem,

src/adminRoutes.js

@@ -6,6 +6,9 @@ const GDAPStatus = React.lazy(() => import('src/views/tenant/administration/List
 const GDAP = React.lazy(() => import('src/views/tenant/administration/GDAPWizard'))
 const GDAPRoleWizard = React.lazy(() => import('src/views/tenant/administration/GDAPRoleWizard'))
 const GDAPRoles = React.lazy(() => import('src/views/tenant/administration/ListGDAPRoles'))
+const GDAPRelationships = React.lazy(() =>
+  import('./views/tenant/administration/ListGDAPRelationships'),
+)
 const appapproval = React.lazy(() => import('src/views/cipp/AppApproval'))
 
 const adminRoutes = [
@@ -24,6 +27,11 @@ const adminRoutes = [
     name: 'GDAP Roles',
     component: GDAPRoles,
   },
+  {
+    path: '/tenant/administration/gdap-relationships',
+    name: 'GDAP Relationships',
+    component: GDAPRelationships,
+  },
   { path: '/tenant/administration/appapproval', name: 'App Approval', component: appapproval },
   { path: '/tenant/administration/gdap-status', name: 'GDAP Status', component: GDAPStatus },
   { path: '/tenant/standards/apply-standard', name: 'Apply Standard', component: ApplyStandard },

src/components/header/AppHeaderSearch.js

@@ -12,8 +12,8 @@ const AppHeaderSearch = () => {
   }, [dispatch])
   return (
     <>
-      <CButton size="sm" variant="ghost" onClick={handleFastSwitcher}>
-        <FontAwesomeIcon icon={faSearch} />
+      <CButton variant="ghost" onClick={handleFastSwitcher}>
+        <FontAwesomeIcon icon={faSearch} size="lg" />
       </CButton>
     </>
   )

src/components/layout/AppHeader.js

@@ -1,9 +1,13 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import {
+  CAlert,
+  CAlertLink,
   CContainer,
+  CCollapse,
   CHeader,
   CHeaderNav,
+  CNavItem,
   CHeaderToggler,
   CImage,
   CSidebarBrand,
@@ -17,16 +21,23 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCaretSquareLeft, faCaretSquareRight } from '@fortawesome/free-solid-svg-icons'
 import { toggleSidebarShow } from 'src/store/features/app'
 import { useMediaPredicate } from 'react-media-hook'
+import { useGenericGetRequestQuery } from 'src/store/api/app'
 
 const AppHeader = () => {
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.app.sidebarShow)
   const currentTheme = useSelector((state) => state.app.currentTheme)
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+  const {
+    data: dashboard,
+    isLoading: isLoadingDash,
+    isSuccess: issuccessDash,
+  } = useGenericGetRequestQuery({ path: '/api/GetCippAlerts' })
+
   return (
-    <CHeader position="sticky">
-      <CContainer fluid>
-        <CSidebarBrand className="me-auto p-2" to="/">
+    <>
+      <CHeader position="sticky">
+        <CSidebarBrand className="me-auto pt-xs-2 p-md-2" to="/">
           <CImage
             className="sidebar-brand-full me-2"
             src={
@@ -47,16 +58,31 @@ const AppHeader = () => {
                 className="me-2"
               />
             </CHeaderToggler>
-            <TenantSelector className="me-2" NavSelector={true} />
           </CHeaderNav>
         </CSidebarBrand>
-
-        <CHeaderNav className="ms-auto p-2">
-          <AppHeaderSearch />
-          <AppHeaderDropdown />
+        <CHeaderNav className="p-md-2 flex-grow-1">
+          <TenantSelector NavSelector={true} />
+          <CNavItem>
+            <AppHeaderSearch />
+          </CNavItem>
+          <CNavItem>
+            <AppHeaderDropdown />
+          </CNavItem>
         </CHeaderNav>
-      </CContainer>
-    </CHeader>
+      </CHeader>
+
+      {dashboard &&
+        dashboard.map((item, index) => (
+          <div
+            className="mb-3"
+            style={{ zIndex: 10000, 'padding-left': '20rem', 'padding-right': '3rem' }}
+          >
+            <CAlert key={index} color={item.type} variant dismissible>
+              {item.Alert} <CAlertLink href={item.link}>Link</CAlertLink>
+            </CAlert>
+          </div>
+        ))}
+    </>
   )
 }
 

src/components/tables/CellDate.js

@@ -2,10 +2,14 @@ import React from 'react'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import { CTooltip } from '@coreui/react'
+import TimeAgo from 'javascript-time-ago'
+import en from 'javascript-time-ago/locale/en.json'
+TimeAgo.addDefaultLocale(en)
+import ReactTimeAgo from 'react-time-ago'
 
 /**
  *
- * @param format ['short', 'long']
+ * @param format ['short', 'long', 'relative']
  * @param value
  * @returns {JSX.Element}
  * @constructor
@@ -27,35 +31,52 @@ export const CellDate = ({ format = 'short', showTime = true, showDate = true, c
   ]
 
   const dateTimeFormatOptions = {}
+  if (format == 'relative') {
+    try {
+      return (
+        <CTooltip content={cell}>
+          <ReactTimeAgo date={cell} />
+        </CTooltip>
+      )
+    } catch (error) {
+      console.error('Error formatting date, fallback to string value', { date: cell, error })
+      return (
+        <CTooltip content={cell}>
+          <div>{String(cell)}</div>
+        </CTooltip>
+      )
+    }
+  } else {
+    if (showTime) {
+      dateTimeFormatOptions.timeStyle = format
+    }
+    if (showDate) {
+      dateTimeFormatOptions.dateStyle = format
+    }
 
-  if (showTime) {
-    dateTimeFormatOptions.timeStyle = format
-  }
-  if (showDate) {
-    dateTimeFormatOptions.dateStyle = format
-  }
+    dateTimeArgs.push(dateTimeFormatOptions)
 
-  dateTimeArgs.push(dateTimeFormatOptions)
+    let formatted
 
-  let formatted
-  try {
-    // lots of dates returned are unreliably parsable (e.g. non ISO8601 format)
-    // fallback using moment to parse into date object
-    formatted = new Intl.DateTimeFormat(...dateTimeArgs).format(moment(cell).toDate())
-  } catch (error) {
-    console.error('Error formatting date, fallback to string value', { date: cell, error })
-    formatted = cell
-  }
+    try {
+      // lots of dates returned are unreliably parsable (e.g. non ISO8601 format)
+      // fallback using moment to parse into date object
+      formatted = new Intl.DateTimeFormat(...dateTimeArgs).format(moment(cell).toDate())
+    } catch (error) {
+      console.error('Error formatting date, fallback to string value', { date: cell, error })
+      formatted = cell
+    }
 
-  return (
-    <CTooltip content={cell}>
-      <div>{String(formatted)}</div>
-    </CTooltip>
-  )
+    return (
+      <CTooltip content={cell}>
+        <div>{String(formatted)}</div>
+      </CTooltip>
+    )
+  }
 }
 
 CellDate.propTypes = {
-  format: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
+  format: PropTypes.oneOf(['short', 'medium', 'long', 'full', 'relative']),
   cell: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
   showTime: PropTypes.bool,
   showDate: PropTypes.bool,

src/components/tables/CellGenericFormat.js

@@ -79,7 +79,6 @@ export const cellGenericFormatter =
       return CellTip(cell)
     }
     if (Array.isArray(cell) || typeof cell === 'object') {
-      console.log(cell)
       return CellTip(JSON.stringify(cell))
     }
   }

src/components/tables/CippDatatable.js

@@ -6,18 +6,20 @@ import { CippTablePropTypes } from 'src/components/tables/CippTable'
 
 export default function CippDatatable({ path, params, ...rest }) {
   const [refreshGuid, setRefreshGuid] = React.useState('')
+  const [graphFilter, setGraphFilter] = React.useState('')
   const {
     data = [],
     isFetching,
     error,
-  } = useListDatatableQuery({ path, params: { refreshGuid, ...params } })
+  } = useListDatatableQuery({ path, params: { refreshGuid, graphFilter, ...params } })
   return (
     <CippTable
       {...rest}
       data={data}
       isFetching={isFetching}
       error={error}
       refreshFunction={setRefreshGuid}
+      graphFilterFunction={setGraphFilter}
     />
   )
 }