Merge pull request #79 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev
KelvinTegelaar · Jan 3, 2024 · 823b44d · 823b44d
2 parents 0d65bce + 4a676bb
commit 823b44d
Show file tree

Hide file tree

Showing 23 changed files with 1,821 additions and 676 deletions.
diff --git a/public/version_latest.txt b/public/version_latest.txt
@@ -1 +1 @@
-4.8.1
+4.9.1
diff --git a/src/_nav.jsx b/src/_nav.jsx
@@ -124,13 +124,13 @@ const _nav = [
       },
       {
         component: CNavItem,
-        name: 'Alerts Wizard',
-        to: '/tenant/administration/alertswizard',
+        name: 'Alerts (Classic)',
+        to: '/tenant/administration/alertsqueue',
       },
       {
         component: CNavItem,
-        name: 'Alerts Configuration',
-        to: '/tenant/administration/alertsqueue',
+        name: 'Alert Rules',
+        to: '/tenant/administration/AlertRules',
       },
       {
         component: CNavItem,

diff --git a/src/components/forms/RFFComponents.jsx b/src/components/forms/RFFComponents.jsx
@@ -299,6 +299,7 @@ export const RFFCFormSelect = ({
   className = 'mb-3',
   validate,
   disabled = false,
+  props,
 }) => {
   // handler for ignoring the first element ('the placeholder')
   const selectValidate = (value, allValues, meta) => {
@@ -320,10 +321,11 @@ export const RFFCFormSelect = ({
             valid={!meta.error && meta.touched}
             invalid={meta.error && meta.touched}
             disabled={disabled}
+            {...props}
           >
             <option value={placeholder}>{placeholder}</option>
-            {values.map(({ label, value }, idx) => (
-              <option key={`${idx}-${value}`} value={value}>
+            {values.map(({ label, value, ...props }, idx) => (
+              <option key={`${idx}-${value}`} value={value} {...props}>
                 {label}
               </option>
             ))}
@@ -383,11 +385,14 @@ export const RFFSelectSearch = ({
   disabled = false,
   retainInput = true,
   isLoading = false,
+  refreshFunction,
+  props,
 }) => {
   const [inputText, setInputText] = useState('')
   const selectSearchvalues = values.map((val) => ({
     value: val.value,
     label: val.name,
+    ...val.props,
   }))
 
   const debounceOnInputChange = useMemo(() => {
@@ -410,7 +415,16 @@ export const RFFSelectSearch = ({
       {({ meta, input }) => {
         return (
           <div>
-            <CFormLabel htmlFor={name}>{label}</CFormLabel>
+            <CFormLabel htmlFor={name}>
+              {label}
+              {refreshFunction && (
+                <CTooltip content="Refresh" placement="right">
+                  <CButton onClick={refreshFunction} variant="ghost" className="ms-1" size="sm">
+                    <FontAwesomeIcon icon="sync" />
+                  </CButton>
+                </CTooltip>
+              )}
+            </CFormLabel>
             {onChange && (
               <Select
                 className="react-select-container"
@@ -427,6 +441,7 @@ export const RFFSelectSearch = ({
                 onInputChange={debounceOnInputChange}
                 inputValue={inputText}
                 isLoading={isLoading}
+                {...props}
               />
             )}
             {!onChange && (
@@ -444,6 +459,7 @@ export const RFFSelectSearch = ({
                 isMulti={multi}
                 inputValue={inputText}
                 isLoading={isLoading}
+                {...props}
               />
             )}
             {meta.error && meta.touched && <span className="text-danger">{meta.error}</span>}
@@ -460,6 +476,7 @@ RFFSelectSearch.propTypes = {
   placeholder: PropTypes.string,
   onInputChange: PropTypes.func,
   isLoading: PropTypes.bool,
+  refreshFunction: PropTypes.func,
   values: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, name: PropTypes.string }))
     .isRequired,
 }
diff --git a/src/components/tables/CellGenericFormat.jsx b/src/components/tables/CellGenericFormat.jsx
@@ -7,6 +7,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { CBadge, CTooltip } from '@coreui/react'
 import CellBoolean from 'src/components/tables/CellBoolean.jsx'
+import cellTable from './CellTable'
 
 const IconWarning = () => <FontAwesomeIcon icon={faExclamationCircle} className="text-warning" />
 const IconError = () => <FontAwesomeIcon icon={faTimesCircle} className="text-danger" />
@@ -44,14 +45,19 @@ export const cellGenericFormatter =
         return <CBadge color="danger">{CellTip('Failed to retrieve from API')}</CBadge>
       }
       if (cell.toLowerCase().startsWith('http')) {
-        return <a href={`${cell}`}>URL</a>
+        return (
+          <a href={`${cell}`} target="_blank" rel="noreferrer">
+            URL
+          </a>
+        )
       }
       return CellTip(cell)
     }
     if (typeof cell === 'number') {
       return <CBadge color="info">{CellTip(cell)}</CBadge>
     }
     if (Array.isArray(cell) || typeof cell === 'object') {
-      return CellTip(JSON.stringify(cell))
+      //return CellTip(JSON.stringify(cell))
+      return cellTable(row, cell)
     }
   }
diff --git a/src/components/tables/CellTable.jsx b/src/components/tables/CellTable.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { CButton } from '@coreui/react'
 import { ModalService } from '../utilities'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheckCircle, faTimesCircle } from '@fortawesome/free-solid-svg-icons' // 1. Import the required FontAwesome icon
+import { faCheckCircle, faTimesCircle } from '@fortawesome/free-solid-svg-icons'
 import { cellGenericFormatter } from './CellGenericFormat'
 
 export default function cellTable(
@@ -11,10 +11,31 @@ export default function cellTable(
   propertyName,
   checkWhenZero = false,
   crossWhenZero = false,
+  dangerButton = false, // Added 4th parameter for btn-danger class
 ) {
-  const handleTable = ({ row }) => {
+  var columnProp = ''
+  if (propertyName) {
+    columnProp = row[propertyName]
+  } else {
+    columnProp = column
+  }
+
+  if (!Array.isArray(columnProp) && typeof columnProp === 'object') {
+    columnProp = Object.entries(columnProp).map((row) => {
+      return { Name: row[0], Value: row[1] }
+    })
+  } else if (Array.isArray(columnProp) && typeof Object.entries(columnProp)[0][1] !== 'object') {
+    columnProp = columnProp.map((row) => {
+      return {
+        Value: row,
+      }
+    })
+  }
+
+  const handleTable = ({ columnProp }) => {
     const QueryColumns = []
-    const columns = Object.keys(row[propertyName][0]).map((key) => {
+
+    const columns = Object.keys(columnProp[0]).map((key) => {
       QueryColumns.push({
         name: key,
         selector: (row) => row[key],
@@ -23,8 +44,9 @@ export default function cellTable(
         cell: cellGenericFormatter(),
       })
     })
+
     ModalService.open({
-      data: row[propertyName],
+      data: columnProp,
       componentType: 'table',
       componentProps: {
         columns: QueryColumns,
@@ -34,16 +56,16 @@ export default function cellTable(
       size: 'lg',
     })
   }
-  //if the row propertyName is a bool, then return a check or cross
-  if (typeof row[propertyName] === 'boolean') {
-    if (row[propertyName]) {
+
+  if (typeof columnProp === 'boolean') {
+    if (columnProp) {
       return <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
     }
     return <FontAwesomeIcon icon={faTimesCircle} className="text-danger" />
   }
 
-  if (!row[propertyName] || !Array.isArray(row[propertyName]) || row[propertyName].length === 0) {
-    if (row[propertyName] === undefined) {
+  if (!columnProp || !Array.isArray(columnProp) || columnProp.length === 0) {
+    if (columnProp === undefined) {
       return <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
     }
     if (checkWhenZero) {
@@ -55,15 +77,22 @@ export default function cellTable(
     return <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
   }
 
+  // Use dangerButton to determine button class
+  const buttonClassName = dangerButton ? 'btn-danger' : ''
   return (
-    <CButton className="btn-danger" key={row} size="sm" onClick={() => handleTable({ row })}>
-      {row[propertyName].length} Items
+    <CButton
+      className={buttonClassName}
+      key={row}
+      size="sm"
+      onClick={() => handleTable({ columnProp })}
+    >
+      {columnProp.length} Items
     </CButton>
   )
 }
 
 export const cellTableFormatter =
-  (propertyName, checkWhenZero = false, crossWhenZero = false) =>
+  (propertyName, checkWhenZero = false, crossWhenZero = false, dangerButton = false) =>
   (row, index, column, id) => {
-    return cellTable(row, column, propertyName, checkWhenZero, crossWhenZero)
+    return cellTable(row, column, propertyName, checkWhenZero, crossWhenZero, dangerButton)
   }
diff --git a/src/components/tables/CippOffcanvasTable.jsx b/src/components/tables/CippOffcanvasTable.jsx
@@ -10,7 +10,7 @@ export default function CippOffcanvasTable({ rows }) {
     </CTableRow>
   ))
   return (
-    <CTable small borderless responsive align="top" className="cipp-offcanvastable">
+    <CTable small borderless responsive align="top">
       <CTableBody>{tableRows}</CTableBody>
     </CTable>
   )

diff --git a/src/components/utilities/CippActionsOffcanvas.jsx b/src/components/utilities/CippActionsOffcanvas.jsx
@@ -301,7 +301,7 @@ export default function CippActionsOffcanvas(props) {
             <FontAwesomeIcon icon={faGlobe} className="mx-2" /> Extended Information
           </CCardTitle>
         </CCardHeader>
-        <CCardBody> {extendedInfoContent}</CCardBody>
+        <CCardBody>{extendedInfoContent}</CCardBody>
       </CCard>
       {cardContent && cardContent}
       {<COffcanvasTitle>Actions</COffcanvasTitle>}

diff --git a/src/components/utilities/CippCodeOffcanvas.jsx b/src/components/utilities/CippCodeOffcanvas.jsx
@@ -36,7 +36,7 @@ function CippCodeOffCanvas({
         addedClass="offcanvas-large"
         placement="end"
         visible={visible}
-        id={row.id}
+        id={row}
         hideFunction={hideFunction}
       >
         <Editor