Merge pull request #1519 from johnduprey/dev

GDAP Relationships

Author: KelvinTegelaar

src/_nav.js

@@ -689,6 +689,11 @@ const _nav = [
         name: 'GDAP Migration Status',
         to: '/tenant/administration/gdap-status',
       },
+      {
+        component: CNavItem,
+        name: 'GDAP Relationships',
+        to: '/tenant/administration/gdap-relationships',
+      },
       {
         component: CNavItem,
         name: 'Documentation',

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/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/views/tenant/administration/ListGDAPRelationships.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { CSpinner, CCallout } from '@coreui/react'
+import { CippPageList } from 'src/components/layout'
+import { cellDateFormatter, cellNullTextFormatter } from 'src/components/tables'
+
+const GDAPRelationships = () => {
+  const columns = [
+    {
+      name: 'Tenant',
+      selector: (row) => row.customer?.displayName,
+      sortable: true,
+      exportSelector: 'customer',
+      cell: cellNullTextFormatter(),
+    },
+    {
+      name: 'Relationship Name',
+      selector: (row) => row['displayName'],
+      sortable: true,
+      exportSelector: 'displayName',
+    },
+    {
+      name: 'Status',
+      selector: (row) => row['status'],
+      sortable: true,
+      exportSelector: 'status',
+    },
+    {
+      name: 'Created',
+      selector: (row) => row['createdDateTime'],
+      sortable: true,
+      exportSelector: 'createdDateTime',
+      cell: cellDateFormatter({ format: 'short' }),
+    },
+    {
+      name: 'Activated',
+      selector: (row) => row['activatedDateTime'],
+      sortable: true,
+      exportSelector: 'activatedDateTime',
+      cell: cellDateFormatter({ format: 'short' }),
+    },
+    {
+      name: 'End',
+      selector: (row) => row['endDateTime'],
+      sortable: true,
+      exportSelector: 'endDateTime',
+      cell: cellDateFormatter({ format: 'short' }),
+    },
+  ]
+  return (
+    <div>
+      <CippPageList
+        capabilities={{ allTenants: true, helpContext: 'https://google.com' }}
+        title="GDAP Relationship List"
+        tenantSelector={false}
+        datatable={{
+          keyField: 'id',
+          columns,
+          reportName: `GDAP-Relationships`,
+          path: '/api/ListGraphRequest',
+          params: { Endpoint: 'tenantRelationships/delegatedAdminRelationships' },
+        }}
+      />
+    </div>
+  )
+}
+
+export default GDAPRelationships