Merge branch 'KelvinTegelaar:main' into main

public/version_latest.txt

@@ -1 +1 @@
-4.2.1
+4.3.1

src/_nav.js

@@ -663,6 +663,11 @@ const _nav = [
         name: 'Settings',
         to: '/cipp/settings',
       },
+      {
+        component: CNavItem,
+        name: 'Scheduler',
+        to: '/cipp/scheduler',
+      },
       {
         component: CNavItem,
         name: 'SAM Setup Wizard',

src/adminRoutes.js

@@ -11,12 +11,15 @@ const GDAPRelationships = React.lazy(() =>
   import('./views/tenant/administration/ListGDAPRelationships'),
 )
 const appapproval = React.lazy(() => import('src/views/cipp/AppApproval'))
+const Scheduler = React.lazy(() => import('src/views/cipp/Scheduler'))
 
 const adminRoutes = [
   { path: '/cipp', name: 'CIPP' },
   { path: '/cipp/cipp', name: 'CIPP' },
   { path: '/cipp/settings', name: 'Settings', component: CIPPSettings },
   { path: '/cipp/setup', name: 'Setup', component: Setup },
+  { path: '/cipp/scheduler', name: 'Scheduler', component: Scheduler },
+
   { path: '/tenant/administration/gdap', name: 'GDAP Wizard', component: GDAP },
   { path: '/tenant/administration/gdap-invite', name: 'GDAP Invite Wizard', component: GDAPInvite },
   {

src/components/forms/RFFComponents.js

@@ -88,9 +88,10 @@ export const RFFCFormSwitch = ({
   className = 'mb-3',
   validate,
   disabled = false,
+  initialValue,
 }) => {
   return (
-    <Field name={name} type="checkbox" validate={validate}>
+    <Field initialValue={initialValue} name={name} type="checkbox" validate={validate}>
       {({ meta, input }) => (
         <ConditionWrapper
           condition={helpText}

src/components/layout/AppHeader.js

@@ -11,6 +11,7 @@ import {
   CHeaderToggler,
   CImage,
   CSidebarBrand,
+  CButton,
 } from '@coreui/react'
 import { AppHeaderDropdown, AppHeaderSearch } from 'src/components/header'
 import { TenantSelector } from '../utilities'
@@ -22,8 +23,12 @@ import { faCaretSquareLeft, faCaretSquareRight } from '@fortawesome/free-solid-s
 import { toggleSidebarShow } from 'src/store/features/app'
 import { useMediaPredicate } from 'react-media-hook'
 import { useLoadAlertsDashQuery } from 'src/store/api/app'
+import { Link } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
+
 const AppHeader = () => {
   const dispatch = useDispatch()
+  const location = useLocation()
   const sidebarShow = useSelector((state) => state.app.sidebarShow)
   const currentTheme = useSelector((state) => state.app.currentTheme)
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
@@ -57,6 +62,16 @@ const AppHeader = () => {
         </CSidebarBrand>
         <CHeaderNav className="p-md-2 flex-grow-1">
           <TenantSelector NavSelector={true} />
+          <CNavItem>
+            <a
+              target="_blank"
+              href={`https://docs.cipp.app/user-documentation${location.pathname}`}
+            >
+              <CButton variant="ghost">
+                <FontAwesomeIcon icon={'question'} size="lg" />
+              </CButton>
+            </a>
+          </CNavItem>
           <CNavItem>
             <AppHeaderSearch />
           </CNavItem>

src/components/tables/CellBadge.js

@@ -3,6 +3,24 @@ import React from 'react'
 import { CBadge } from '@coreui/react'
 
 export const CellBadge = ({ label = '', color = '', children, ...rest }) => {
+  //Create a case select, and return the color based on the label
+  switch (label.toLowerCase()) {
+    case 'planned':
+      color = 'info'
+      break
+    case 'failed':
+      color = 'danger'
+      break
+    case 'completed':
+      color = 'success'
+      break
+    case 'banned':
+      color = 'danger'
+      break
+    case 'running':
+      color = 'primary'
+  }
+
   return (
     <CBadge color={color} {...rest}>
       {label}

src/components/tables/CellDate.js

@@ -4,13 +4,6 @@ import PropTypes from 'prop-types'
 import { CTooltip } from '@coreui/react'
 import ReactTimeAgo from 'react-time-ago'
 
-/**
- *
- * @param format ['short', 'long', 'relative']
- * @param value
- * @returns {JSX.Element}
- * @constructor
- */
 export const CellDate = ({ format = 'short', showTime = true, showDate = true, cell }) => {
   if (!cell || (!showTime && !showDate)) {
     return <div />
@@ -21,25 +14,29 @@ export const CellDate = ({ format = 'short', showTime = true, showDate = true, c
     locale = navigator.language
   }
 
-  // cheatsheet
-  // https://devhints.io/wip/intl-datetime
-  const dateTimeArgs = [
-    [locale, 'default'], // add fallback option if locale doesn't load properly
-  ]
+  // Convert cell value to a number and check if it's a Unix timestamp
+  const possibleUnixTimestamp = Number(cell)
+  const isUnixTimestamp = !isNaN(possibleUnixTimestamp) && possibleUnixTimestamp > 1000000000
+  let dateObject
+
+  if (isUnixTimestamp) {
+    dateObject = moment.unix(possibleUnixTimestamp).toDate()
+  } else {
+    dateObject = moment(cell).toDate()
+  }
+
+  const dateTimeArgs = [[locale, 'default']]
 
   const dateTimeFormatOptions = {}
-  if (format == 'relative') {
+
+  if (format === 'relative') {
     try {
-      return (
-        <CTooltip content={cell}>
-          <ReactTimeAgo date={cell} />
-        </CTooltip>
-      )
+      return <ReactTimeAgo date={dateObject} />
     } catch (error) {
-      console.error('Error formatting date, fallback to string value', { date: cell, error })
+      console.error('Error formatting date, fallback to string value', { date: dateObject, error })
       return (
-        <CTooltip content={cell}>
-          <div>{String(cell)}</div>
+        <CTooltip content={dateObject.toString()}>
+          <div>{String(dateObject)}</div>
         </CTooltip>
       )
     }
@@ -56,16 +53,14 @@ export const CellDate = ({ format = 'short', showTime = true, showDate = true, c
     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())
+      formatted = new Intl.DateTimeFormat(...dateTimeArgs).format(dateObject)
     } catch (error) {
-      console.error('Error formatting date, fallback to string value', { date: cell, error })
-      formatted = cell
+      console.error('Error formatting date, fallback to string value', { date: dateObject, error })
+      formatted = dateObject.toString()
     }
 
     return (
-      <CTooltip content={cell}>
+      <CTooltip content={dateObject.toString()}>
         <div>{String(formatted)}</div>
       </CTooltip>
     )
@@ -74,7 +69,7 @@ export const CellDate = ({ format = 'short', showTime = true, showDate = true, c
 
 CellDate.propTypes = {
   format: PropTypes.oneOf(['short', 'medium', 'long', 'full', 'relative']),
-  cell: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  cell: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]),
   showTime: PropTypes.bool,
   showDate: PropTypes.bool,
 }

src/components/tables/CippDatatable.js

@@ -13,30 +13,23 @@ export default function CippDatatable({ path, params, ...rest }) {
     isFetching,
     error,
   } = useListDatatableQuery({ path, params: { refreshGuid, $filter: graphFilter, ...params } })
+
+  var defaultFilterText = ''
+  if (params?.Parameters?.$filter) {
+    defaultFilterText = 'Graph: ' + params?.Parameters?.$filter
+  }
   return (
     <>
-      {data[0]?.Queued ? (
-        <>
-          <CCallout color="info">{data[0]?.QueueMessage}</CCallout>
-          <CippTable
-            {...rest}
-            data={[]}
-            isFetching={isFetching}
-            error={error}
-            refreshFunction={setRefreshGuid}
-            graphFilterFunction={setGraphFilter}
-          />
-        </>
-      ) : (
-        <CippTable
-          {...rest}
-          data={data}
-          isFetching={isFetching}
-          error={error}
-          refreshFunction={setRefreshGuid}
-          graphFilterFunction={setGraphFilter}
-        />
-      )}
+      {data[0]?.Queued && <CCallout color="info">{data[0]?.QueueMessage}</CCallout>}
+      <CippTable
+        {...rest}
+        data={data[0]?.Queued ? [] : data}
+        isFetching={isFetching}
+        error={error}
+        defaultFilterText={defaultFilterText}
+        refreshFunction={setRefreshGuid}
+        graphFilterFunction={setGraphFilter}
+      />
     </>
   )
 }