Merge pull request #2215 from JohnDuprey/dev

UI tweaks

Author: JohnDuprey

src/components/layout/AppHeader.jsx

@@ -13,14 +13,19 @@ import {
   CSidebarBrand,
   CButton,
   CFormSwitch,
+  CLink,
 } from '@coreui/react'
 import { AppHeaderSearch } from 'src/components/header'
-import { TenantSelector } from '../utilities'
+import { CippActionsOffcanvas, TenantSelector } from '../utilities'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
 import { setCurrentTheme, setUserSettings, toggleSidebarShow } from 'src/store/features/app'
 import { useMediaPredicate } from 'react-media-hook'
-import { useGenericGetRequestQuery, useLoadAlertsDashQuery } from 'src/store/api/app'
+import {
+  useGenericGetRequestQuery,
+  useLazyGenericGetRequestQuery,
+  useLoadAlertsDashQuery,
+} from 'src/store/api/app'
 import { useLocation } from 'react-router-dom'
 
 const AppHeader = () => {
@@ -31,6 +36,11 @@ const AppHeader = () => {
   const sidebarShow = useSelector((state) => state.app.sidebarShow)
   const currentTheme = useSelector((state) => state.app.currentTheme)
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+  const [cippQueueExtendedInfo, setCippQueueExtendedInfo] = useState([])
+  const [cippQueueVisible, setCippQueueVisible] = useState(false)
+  const [cippQueueRefresh, setCippQueueRefresh] = useState(
+    (Math.random() + 1).toString(36).substring(7),
+  )
   const { data: dashboard } = useLoadAlertsDashQuery()
   const {
     data: userSettings,
@@ -54,6 +64,49 @@ const AppHeader = () => {
     userSettings,
   ])
 
+  const [getCippQueueList, cippQueueList] = useLazyGenericGetRequestQuery()
+
+  function loadCippQueue() {
+    setCippQueueVisible(true)
+    getCippQueueList({ path: 'api/ListCippQueue', params: { refresh: cippQueueRefresh } })
+  }
+
+  function refreshCippQueue() {
+    setCippQueueRefresh((Math.random() + 1).toString(36).substring(7))
+    loadCippQueue()
+  }
+
+  useEffect(() => {
+    if (cippQueueList.isFetching || cippQueueList.isLoading) {
+      setCippQueueExtendedInfo([
+        {
+          label: 'Fetching recent jobs',
+          value: 'Please wait',
+          timestamp: Date(),
+          link: '#',
+        },
+      ])
+    }
+    if (
+      cippQueueList.isSuccess &&
+      Array.isArray(cippQueueList.data) &&
+      cippQueueList.data.length > 0
+    ) {
+      setCippQueueExtendedInfo(
+        cippQueueList.data?.map((job) => ({
+          label: `${job.Name}`,
+          value: job.Status,
+          link: job.Link,
+          timestamp: job.Timestamp,
+        })),
+      )
+    } else {
+      setCippQueueExtendedInfo([
+        { label: 'No jobs to display', value: '', timpestamp: Date(), link: '#' },
+      ])
+    }
+  }, [cippQueueList])
+
   const SwitchTheme = () => {
     let targetTheme = preferredTheme
     if (isDark) {
@@ -97,6 +150,11 @@ const AppHeader = () => {
           <CNavItem>
             <AppHeaderSearch />
           </CNavItem>
+          <CNavItem>
+            <CButton variant="ghost" onClick={() => loadCippQueue()}>
+              <FontAwesomeIcon icon={'history'} className="me-2" />
+            </CButton>
+          </CNavItem>
           <CNavItem>
             <div className="custom-switch-wrapper primary">
               <CFormSwitch
@@ -134,6 +192,26 @@ const AppHeader = () => {
             </div>
           ))}
       </div>
+      <CippActionsOffcanvas
+        title="Recent Jobs"
+        extendedInfo={[]}
+        cards={cippQueueExtendedInfo}
+        refreshFunction={refreshCippQueue}
+        actions={[
+          {
+            label: 'Clear History',
+            color: 'info',
+            modal: true,
+            modalUrl: `/api/RemoveCippQueue`,
+            modalMessage: 'Are you sure you want clear the history?',
+            icon: <FontAwesomeIcon icon="trash" className="me-2" />,
+          },
+        ]}
+        placement="end"
+        visible={cippQueueVisible}
+        id="cipp-queue"
+        hideFunction={() => setCippQueueVisible(false)}
+      />
     </>
   )
 }

src/views/tenant/administration/AlertRules.jsx

@@ -375,7 +375,7 @@ const AlertRules = () => {
   }
 
   return (
-    <CippPage title={`Add Schedule`} tenantSelector={false}>
+    <CippPage title={`Add Rule`} tenantSelector={false}>
       <>
         <CRow>
           <CCol md={4}>
@@ -480,7 +480,7 @@ const AlertRules = () => {
                       <CRow className="mb-3">
                         <CCol md={6}>
                           <CButton type="submit" disabled={submitting}>
-                            Add Schedule
+                            Add Rule
                             {postResults.isFetching && (
                               <FontAwesomeIcon
                                 icon={faCircleNotch}