Merge pull request #2213 from JohnDuprey/dev

Pending Webhooks
KelvinTegelaar · Mar 13, 2024 · d86e348 · d86e348
2 parents 39400ad + 8cb3569
commit d86e348
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 2 deletions.
diff --git a/src/components/utilities/CippTableOffcanvas.jsx b/src/components/utilities/CippTableOffcanvas.jsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { CippOffcanvas } from 'src/components/utilities'
+import PropTypes from 'prop-types'
+import { CippDatatable } from '../tables'
+
+function CippTableOffcanvas({
+  state: visible,
+  hideFunction,
+  title = 'Table',
+  path,
+  params,
+  columns,
+  tableProps,
+}) {
+  return (
+    <>
+      <CippOffcanvas
+        title={title}
+        addedClass="offcanvas-large"
+        placement="end"
+        visible={visible}
+        hideFunction={hideFunction}
+      >
+        <CippDatatable path={path} params={params} columns={columns} tableProps={tableProps} />
+      </CippOffcanvas>
+    </>
+  )
+}
+
+CippTableOffcanvas.propTypes = {
+  state: PropTypes.bool,
+  hideFunction: PropTypes.func,
+  title: PropTypes.string,
+  path: PropTypes.string,
+  params: PropTypes.object,
+  columns: PropTypes.object,
+  tableProps: PropTypes.object,
+}
+
+export default CippTableOffcanvas
diff --git a/src/components/utilities/index.js b/src/components/utilities/index.js
@@ -17,11 +17,13 @@ import ThemeSwitcher from 'src/components/utilities/ThemeSwitcher'
 import PageSizeSwitcher from 'src/components/utilities/PageSizeSwitcher'
 import Toasts from 'src/components/utilities/Toasts'
 import UsageLocation from 'src/components/utilities/UsageLocation'
+import CippTableOffcanvas from './CippTableOffcanvas'
 
 export {
   CippActionsOffcanvas,
   CippCodeBlock,
   CippCodeOffCanvas,
+  CippTableOffcanvas,
   CippLazy,
   CippOffcanvas,
   CippProfile,

diff --git a/src/views/tenant/administration/AlertRules.jsx b/src/views/tenant/administration/AlertRules.jsx
@@ -20,13 +20,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCircleNotch, faEdit, faEye } from '@fortawesome/free-solid-svg-icons'
 import { CippContentCard, CippPage, CippPageList } from 'src/components/layout'
 import { cellBadgeFormatter, cellDateFormatter } from 'src/components/tables'
-import { CellTip } from 'src/components/tables/CellGenericFormat'
+import { CellTip, cellGenericFormatter } from 'src/components/tables/CellGenericFormat'
 import 'react-datepicker/dist/react-datepicker.css'
 import TenantListSelector from 'src/components/utilities/TenantListSelector'
-import { ModalService, TenantSelector } from 'src/components/utilities'
+import { CippCodeBlock, ModalService, TenantSelector } from 'src/components/utilities'
 import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas'
+import CippTableOffcanvas from 'src/components/utilities/CippTableOffcanvas'
 import arrayMutators from 'final-form-arrays'
 import countryList from 'src/data/countryList.json'
+import { TitleButton } from 'src/components/buttons'
 
 const AlertRules = () => {
   const [ExecuteGetRequest, getResults] = useLazyGenericGetRequestQuery()
@@ -88,6 +90,7 @@ const AlertRules = () => {
   const [startDate, setStartDate] = useState(currentDate)
   const tenantDomain = useSelector((state) => state.app.currentTenant.defaultDomainName)
   const [refreshState, setRefreshState] = useState(false)
+  const [showPending, setShowPending] = useState(false)
   const taskName = `Scheduled Task ${currentDate.toLocaleString()}`
   const { data: availableCommands = [], isLoading: isLoadingcmd } = useGenericGetRequestQuery({
     path: 'api/ListFunctionParameters?Module=CIPPCore',
@@ -293,6 +296,11 @@ const AlertRules = () => {
     return ifs
   }
 
+  const ExpandedComponent = ({ data }) => (
+    // eslint-disable-next-line react/prop-types
+    <CippCodeBlock language="json" code={JSON.stringify(data?.Data, null, 2)} />
+  )
+
   const renderDos = () => {
     const dos = []
 
@@ -517,6 +525,13 @@ const AlertRules = () => {
               }}
               title="Alert Rules"
               tenantSelector={false}
+              titleButton={
+                <TitleButton
+                  icon={'scroll'}
+                  onClick={() => setShowPending(true)}
+                  title="Pending Webhooks"
+                />
+              }
               datatable={{
                 tableProps: {
                   selectableRows: true,
@@ -535,6 +550,33 @@ const AlertRules = () => {
                 path: `/api/ListWebhookAlert?RefreshGuid=${refreshState}`,
               }}
             />
+            <CippTableOffcanvas
+              path="/api/ListPendingWebhooks"
+              title="Pending Webhooks"
+              state={showPending}
+              hideFunction={() => setShowPending(false)}
+              columns={[
+                {
+                  name: 'Tenant',
+                  selector: (row) => row?.TenantFilter,
+                  sortable: true,
+                  cell: cellGenericFormatter(),
+                  exportSelector: 'TenantFilter',
+                },
+                {
+                  name: 'Type',
+                  selector: (row) => row?.Type,
+                  sortable: true,
+                  cell: cellGenericFormatter(),
+                  exportSelector: 'Type',
+                },
+              ]}
+              tableProps={{
+                expandableRows: true,
+                expandableRowsComponent: ExpandedComponent,
+                expandOnRowClicked: true,
+              }}
+            />
           </CCol>
         </CRow>
       </>