+
+ )}
+
+ {label && (
+
+ {label}
+
+ )}
+ fields.push({ Key: '', Value: '' })}
+ className="circular-button"
+ title={'+'}
+ >
+
+
+ {fields.map((name, index) => (
+
+ fields.remove(index)}
+ className={`circular-button`}
+ title={'-'}
+ >
+
+
+ ))}
+
+
+ {({ input, meta }) => {
+ return
+
+ {({ input, meta }) => {
+ return
+
+
-
- {item.Alert} Link
-
-
- ))}
-
- )
-}
-
-export default AppHeader
diff --git a/src/components/layout/AppHeader.jsx b/src/components/layout/AppHeader.jsx
new file mode 100644
index 000000000000..9dcc3bd54c2c
--- /dev/null
+++ b/src/components/layout/AppHeader.jsx
@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+ CAlert,
+ CAlertLink,
+ CContainer,
+ CCollapse,
+ CHeader,
+ CHeaderNav,
+ CNavItem,
+ CHeaderToggler,
+ CImage,
+ CSidebarBrand,
+ CButton,
+ CFormSwitch,
+} from '@coreui/react'
+import { AppHeaderSearch } from 'src/components/header'
+import { TenantSelector } from '../utilities'
+import cyberdrainlogolight from 'src/assets/images/CIPP.png'
+import cyberdrainlogodark from 'src/assets/images/CIPP_Dark.png'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCaretSquareLeft, faCaretSquareRight } 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 { useLocation } from 'react-router-dom'
+
+const AppHeader = () => {
+ const dispatch = useDispatch()
+ const location = useLocation()
+ const [performedUserSettings, setUserSettingsComplete] = useState(false)
+ const currentSettings = useSelector((state) => state.app)
+ const sidebarShow = useSelector((state) => state.app.sidebarShow)
+ const currentTheme = useSelector((state) => state.app.currentTheme)
+ const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+ const { data: dashboard } = useLoadAlertsDashQuery()
+ const {
+ data: userSettings,
+ isLoading: isLoadingSettings,
+ isSuccess: isSuccessSettings,
+ isFetching: isFetchingSettings,
+ } = useGenericGetRequestQuery({
+ path: '/api/ListUserSettings',
+ })
+ useEffect(() => {
+ if (isSuccessSettings && !isLoadingSettings && !isFetchingSettings && !performedUserSettings) {
+ dispatch(setUserSettings({ userSettings }))
+ setUserSettingsComplete(true)
+ }
+ }, [
+ isSuccessSettings,
+ isLoadingSettings,
+ isFetchingSettings,
+ performedUserSettings,
+ dispatch,
+ userSettings,
+ ])
+
+ const SwitchTheme = () => {
+ let targetTheme = preferredTheme
+ if (isDark) {
+ targetTheme = 'cyberdrain'
+ } else {
+ targetTheme = 'impact'
+ }
+ document.body.classList = []
+ document.body.classList.add(`theme-${targetTheme}`)
+ document.body.dataset.theme = targetTheme
+
+ dispatch(setCurrentTheme({ theme: targetTheme }))
+ }
+ const isDark =
+ currentTheme === 'impact' || (currentTheme === 'default' && preferredTheme === 'impact')
+ return (
+ <>
+
+
+
+
+ {item.Alert} Link
+
+
+ ))}
+
+ )
+}
+
+export default AppHeader
diff --git a/src/components/layout/AppSidebar.js b/src/components/layout/AppSidebar.jsx
similarity index 100%
rename from src/components/layout/AppSidebar.js
rename to src/components/layout/AppSidebar.jsx
diff --git a/src/components/layout/AppSidebarNav.js b/src/components/layout/AppSidebarNav.jsx
similarity index 100%
rename from src/components/layout/AppSidebarNav.js
rename to src/components/layout/AppSidebarNav.jsx
diff --git a/src/components/layout/CippContentCard.js b/src/components/layout/CippContentCard.jsx
similarity index 91%
rename from src/components/layout/CippContentCard.js
rename to src/components/layout/CippContentCard.jsx
index efb91ee7d9d2..db535d3809be 100644
--- a/src/components/layout/CippContentCard.js
+++ b/src/components/layout/CippContentCard.jsx
@@ -29,4 +29,5 @@ CippContentCard.propTypes = {
button: PropTypes.element,
bodyClass: PropTypes.string,
className: PropTypes.string,
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
}
diff --git a/src/components/layout/CippMasonry.js b/src/components/layout/CippMasonry.jsx
similarity index 95%
rename from src/components/layout/CippMasonry.js
rename to src/components/layout/CippMasonry.jsx
index 7d1d35f7a6e7..53dcb7e50fd5 100644
--- a/src/components/layout/CippMasonry.js
+++ b/src/components/layout/CippMasonry.jsx
@@ -46,7 +46,7 @@ export function CippMasonryItem({ size, children, className = null }) {
CippMasonryItem.propTypes = {
size: PropTypes.oneOf(['single', 'double', 'triple', 'full', 'half']),
- children: PropTypes.object,
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
className: PropTypes.string,
}
diff --git a/src/components/layout/CippPage.js b/src/components/layout/CippPage.jsx
similarity index 100%
rename from src/components/layout/CippPage.js
rename to src/components/layout/CippPage.jsx
diff --git a/src/components/layout/CippWizard.js b/src/components/layout/CippWizard.jsx
similarity index 97%
rename from src/components/layout/CippWizard.js
rename to src/components/layout/CippWizard.jsx
index 8cfa96bf232f..02c4220b48a4 100644
--- a/src/components/layout/CippWizard.js
+++ b/src/components/layout/CippWizard.jsx
@@ -8,7 +8,7 @@ export default class CippWizard extends React.Component {
static propTypes = {
wizardTitle: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
- children: PropTypes.arrayOf(PropTypes.element),
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
initialValues: PropTypes.any,
onPageChange: PropTypes.func,
nextPage: PropTypes.func,
diff --git a/src/components/tables/CellBadge.js b/src/components/tables/CellBadge.jsx
similarity index 66%
rename from src/components/tables/CellBadge.js
rename to src/components/tables/CellBadge.jsx
index 5234f65e2fca..ae6b948ce83f 100644
--- a/src/components/tables/CellBadge.js
+++ b/src/components/tables/CellBadge.jsx
@@ -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 (
{String(cell)}
+ {String(dateObject)}
{String(formatted)}
-
- ),
- title: 'Confirm',
- onConfirm: async () => {
- const resultsarr = []
- for (const row of selectedRows) {
- setLoopRunning(true)
- const urlParams = new URLSearchParams(modalUrl.split('?')[1])
- for (let [paramName, paramValue] of urlParams.entries()) {
- if (paramValue.startsWith('!')) {
- urlParams.set(paramName, row[paramValue.replace('!', '')])
- }
- }
- const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
- const results = await genericGetRequest({ path: NewModalUrl, refreshParam: row.id })
- resultsarr.push(results)
- setMassResults(resultsarr)
- }
- setLoopRunning(false)
- },
- })
- } else {
- ModalService.confirm({
- body: (
- {modalMessage}
-
- {modalInput && (
-
- ),
- title: 'Confirm',
- onConfirm: async () => {
- const resultsarr = []
- for (const row of selectedRows) {
- setLoopRunning(true)
- const urlParams = new URLSearchParams(modalUrl.split('?')[1])
- for (let [paramName, paramValue] of urlParams.entries()) {
- if (paramValue.toString().startsWith('!')) {
- urlParams.set(paramName, row[paramValue.replace('!', '')])
- }
- }
- const newModalBody = {}
- for (let [objName, objValue] of Object.entries(modalBody)) {
- if (objValue.toString().startsWith('!')) {
- newModalBody[objName] = row[objValue.replace('!', '')]
- }
- }
- const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
- const results = await genericPostRequest({
- path: NewModalUrl,
- values: { ...modalBody, ...newModalBody, ...{ input: inputRef.current.value } },
- })
- resultsarr.push(results)
- setMassResults(resultsarr)
- }
- setLoopRunning(false)
- },
- })
- }
- }
- const subHeaderComponentMemo = React.useMemo(() => {
- const handleClear = () => {
- if (filterText) {
- setResetPaginationToggle(!resetPaginationToggle)
- setFilterText('')
- }
- }
-
- const executeselectedAction = (item) => {
- setModalContent({
- item,
- })
- if (item.modalDropdown) {
- getDrowndownInfo({ path: item.modalDropdown.url })
- }
- handleModal(
- item.modalMessage,
- item.modalUrl,
- item.modalType,
- item.modalBody,
- item.modalInput,
- item.modalDropdown,
- )
- }
- const defaultActions = []
- const dataKeys = () => {
- if (filteredItems.length >= 1) {
- return Object.keys(filteredItems[0])
- } else {
- return ['No additional columns available']
- }
- }
- if (refreshFunction) {
- defaultActions.push([
-
-
- )}
- {modalDropdown && (
-
- {dropDownInfo.isSuccess && (
- ({
- value: data[modalDropdown.valueField],
- label: data[modalDropdown.labelField],
- }))}
- />
- )}
-
- )}
- {modalMessage}
-
- setFilterText(e.target.value)}
- onFilterPreset={(e) => {
- setFilterText(e)
- setGraphFilter('')
- }}
- onFilterGraph={(e) => {
- setFilterText('')
- setGraphFilter(e)
- }}
- onClear={handleClear}
- filterText={filterText}
- filterlist={filterlist}
- />
- {defaultActions}
-
-
- )
- }, [
- actions,
- disablePDFExport,
- disableCSVExport,
- filterText,
- filterlist,
- resetPaginationToggle,
- data,
- columns,
- reportName,
- ])
- const tablePageSize = useSelector((state) => state.app.tablePageSize)
- return (
-
- {!isFetching && error && Error loading data}
- {!error && (
-
- )
-}
-
-export const CippTablePropTypes = {
- reportName: PropTypes.string.isRequired,
- columns: PropTypes.arrayOf(PropTypes.object).isRequired,
- keyField: PropTypes.string,
- tableProps: PropTypes.object,
- data: PropTypes.array,
- isFetching: PropTypes.bool,
- disablePDFExport: PropTypes.bool,
- disableCSVExport: PropTypes.bool,
- error: PropTypes.object,
- filterlist: PropTypes.arrayOf(PropTypes.object),
-}
-
-CippTable.propTypes = CippTablePropTypes
diff --git a/src/components/tables/CippTable.jsx b/src/components/tables/CippTable.jsx
new file mode 100644
index 000000000000..db02e0acdd6e
--- /dev/null
+++ b/src/components/tables/CippTable.jsx
@@ -0,0 +1,821 @@
+import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { ExportCsvButton, ExportPDFButton } from 'src/components/buttons'
+import {
+ CSpinner,
+ CFormInput,
+ CInputGroup,
+ CDropdown,
+ CDropdownToggle,
+ CDropdownMenu,
+ CDropdownItem,
+ CButton,
+ CModal,
+ CModalBody,
+ CModalTitle,
+ CCallout,
+ CFormSelect,
+ CAccordion,
+ CAccordionHeader,
+ CAccordionBody,
+ CAccordionItem,
+} from '@coreui/react'
+import DataTable, { createTheme } from 'react-data-table-component'
+import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faColumns, faSearch, faSync, faTasks } from '@fortawesome/free-solid-svg-icons'
+import { cellGenericFormatter } from './CellGenericFormat'
+import { ModalService } from '../utilities'
+import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
+import { ConfirmModal } from '../utilities/SharedModal'
+import { debounce } from 'lodash-es'
+import { useSearchParams } from 'react-router-dom'
+
+const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
+ <>
+
- {(columns.length === updatedColumns.length || !dynamicColumns) && (
- <>
- {(massResults.length >= 1 || loopRunning) && (
-
- {massResults.map((message, idx) => {
- const results = message.data?.Results
- const displayResults = Array.isArray(results) ? results.join(', ') : results
-
- return {displayResults}
- })}
- {loopRunning && (
-
-
- )}
-
- )}
- Selected {selectedRows.length} items
- )}
-
- )}
-
- )}
-
+
+ ),
+ title: 'Confirm',
+ onConfirm: async () => {
+ const resultsarr = []
+ for (const row of selectedRows) {
+ setLoopRunning(true)
+ const urlParams = new URLSearchParams(modalUrl.split('?')[1])
+ for (let [paramName, paramValue] of urlParams.entries()) {
+ if (paramValue.startsWith('!')) {
+ urlParams.set(paramName, row[paramValue.replace('!', '')])
+ }
+ }
+ const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
+ const results = await genericGetRequest({ path: NewModalUrl, refreshParam: row.id })
+ resultsarr.push(results)
+ setMassResults(resultsarr)
+ }
+ setLoopRunning(false)
+ },
+ })
+ } else {
+ ModalService.confirm({
+ body: (
+ {modalMessage}
+
+ {modalInput && (
+
+ ),
+ title: 'Confirm',
+ onConfirm: async () => {
+ const resultsarr = []
+ for (const row of selectedRows) {
+ setLoopRunning(true)
+ const urlParams = new URLSearchParams(modalUrl.split('?')[1])
+ for (let [paramName, paramValue] of urlParams.entries()) {
+ if (paramValue.toString().startsWith('!')) {
+ urlParams.set(paramName, row[paramValue.replace('!', '')])
+ }
+ }
+ const newModalBody = {}
+ for (let [objName, objValue] of Object.entries(modalBody)) {
+ if (objValue.toString().startsWith('!')) {
+ newModalBody[objName] = row[objValue.replace('!', '')]
+ }
+ }
+ const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
+ const results = await genericPostRequest({
+ path: NewModalUrl,
+ values: { ...modalBody, ...newModalBody, ...{ input: inputRef.current.value } },
+ })
+ resultsarr.push(results)
+ setMassResults(resultsarr)
+ }
+ setLoopRunning(false)
+ },
+ })
+ }
+ },
+ [
+ dropDownInfo?.data,
+ dropDownInfo?.isSuccess,
+ genericGetRequest,
+ genericPostRequest,
+ selectedRows,
+ ],
+ )
+
+ useEffect(() => {
+ if (dropDownInfo.isFetching) {
+ handleModal(
+
+
+ )}
+ {modalDropdown && (
+
+ {dropDownInfo.isSuccess && (
+ ({
+ value: data[modalDropdown.valueField],
+ label: data[modalDropdown.labelField],
+ }))}
+ />
+ )}
+
+ )}
+ {modalMessage}
+
+ {showFilter && (
+ setFilterText(e.target.value)}
+ onFilterPreset={(e) => {
+ if (e === '') setGraphFilter('')
+ setFilterText(e)
+ }}
+ onClear={handleClear}
+ filterText={filterText}
+ filterlist={filterlist}
+ />
+ )}
+ {defaultActions}
+
+
+ )
+ }, [
+ actions,
+ selectedRows,
+ disablePDFExport,
+ disableCSVExport,
+ filterText,
+ filterlist,
+ resetPaginationToggle,
+ data,
+ columns,
+ reportName,
+ selectedRows,
+ ])
+ const tablePageSize = useSelector((state) => state.app.tablePageSize)
+
+ return (
+
+ {!isFetching && error && Error loading data }
+
+ )
+}
+
+export const CippTablePropTypes = {
+ reportName: PropTypes.string.isRequired,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ refreshFunction: PropTypes.func,
+ graphFilterFunction: PropTypes.func,
+ dynamicColumns: PropTypes.bool,
+ defaultFilterText: PropTypes.string,
+ isModal: PropTypes.bool,
+ exportFiltered: PropTypes.bool,
+ showFilter: PropTypes.bool,
+ tableProps: PropTypes.shape({
+ keyField: PropTypes.string,
+ theme: PropTypes.string,
+ pagination: PropTypes.bool,
+ responsive: PropTypes.bool,
+ dense: PropTypes.bool,
+ striped: PropTypes.bool,
+ subheader: PropTypes.bool,
+ // @TODO
+ // expandableRows,
+ // actionsList,
+ // expandableRowsComponent,
+ // expandableRowsHideExpander,
+ // expandOnRowClicked,
+ // selectableRows,
+ sortFunction: PropTypes.bool,
+ onSelectedRowsChange: PropTypes.func,
+ highlightOnHover: PropTypes.bool,
+ disableDefaultActions: PropTypes.bool,
+ actions: PropTypes.arrayOf(PropTypes.node),
+ }),
+ data: PropTypes.array,
+ isFetching: PropTypes.bool,
+ disablePDFExport: PropTypes.bool,
+ disableCSVExport: PropTypes.bool,
+ error: PropTypes.object,
+ filterlist: PropTypes.arrayOf(PropTypes.object),
+}
+
+CippTable.propTypes = CippTablePropTypes
diff --git a/src/components/tables/WizardTableField.js b/src/components/tables/WizardTableField.jsx
similarity index 95%
rename from src/components/tables/WizardTableField.js
rename to src/components/tables/WizardTableField.jsx
index 6dc929edb908..3e61e1e4d1a8 100644
--- a/src/components/tables/WizardTableField.js
+++ b/src/components/tables/WizardTableField.jsx
@@ -22,10 +22,10 @@ export default class WizardTableField extends React.Component {
columns: [],
}
- handleSelect = ({ selectedRows }) => {
+ handleSelect = ({ selectedRows = [] }) => {
// console.log(selectedRows)
const { fieldProps, keyField } = this.props
- if (selectedRows !== []) {
+ if (selectedRows.length > 0) {
fieldProps.input.onChange(selectedRows)
this.setState(() => ({
selected: selectedRows.map((el) => el[keyField]),
diff --git a/src/components/utilities/CippActionsOffcanvas.js b/src/components/utilities/CippActionsOffcanvas.jsx
similarity index 76%
rename from src/components/utilities/CippActionsOffcanvas.js
rename to src/components/utilities/CippActionsOffcanvas.jsx
index 371276f49375..391ae9365d9a 100644
--- a/src/components/utilities/CippActionsOffcanvas.js
+++ b/src/components/utilities/CippActionsOffcanvas.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useEffect, useState, useCallback } from 'react'
import PropTypes from 'prop-types'
import {
CButton,
@@ -21,15 +21,81 @@ import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 's
import { Link, useNavigate } from 'react-router-dom'
import { stringCamelCase } from 'src/components/utilities/CippCamelCase'
import ReactTimeAgo from 'react-time-ago'
-import { useEffect } from 'react'
-import { useState } from 'react'
export default function CippActionsOffcanvas(props) {
const inputRef = useRef('')
const [genericGetRequest, getResults] = useLazyGenericGetRequestQuery()
const [genericPostRequest, postResults] = useLazyGenericPostRequestQuery()
const [getDrowndownInfo, dropDownInfo] = useLazyGenericGetRequestQuery()
- const [modalContent, setModalContent] = useState(null)
+ const [modalContent, setModalContent] = useState({})
+
+ const handleLink = useNavigate()
+ const handleExternalLink = (link) => {
+ window.open(link, '_blank')
+ }
+ const handleModal = useCallback(
+ (modalMessage, modalUrl, modalType = 'GET', modalBody, modalInput, modalDropdown) => {
+ if (modalType === 'GET') {
+ ModalService.confirm({
+ body: (
+
+ {(columns.length === updatedColumns.length || !dynamicColumns) && (
+ <>
+ {(massResults.length >= 1 || loopRunning) && (
+
+ {massResults[0]?.data?.Metadata?.Heading && (
+
+ {massResults.map((message, idx) => {
+ const results = message.data?.Results
+ const displayResults = Array.isArray(results)
+ ? results.join('')
+ : results
+ var iconName = 'info-circle'
+ if (message.data?.Metadata?.Success === true) {
+ iconName = 'check-circle'
+ } else if (message.data?.Metadata?.Success === false) {
+ iconName = 'times-circle'
+ }
+ return (
+
+
+
+
+ {results.map((line, i) => {
+ return {line}
+ })}
+
+
+ )
+ })}
+
+ )}
+ {!massResults[0]?.data?.Metadata?.Heading &&
+ massResults.map((message, idx) => {
+ const results = message.data?.Results
+ const displayResults = Array.isArray(results) ? results.join(', ') : results
+ return {displayResults}
+ })}
+ {loopRunning && (
+
+
+ )}
+
+ )}
+ Selected {selectedRows.length} items }
+
+ )}
+
+
+
+ ),
+ title: 'Confirm',
+ onConfirm: () => genericGetRequest({ path: modalUrl }),
+ })
+ } else if (modalType === 'codeblock') {
+ ModalService.open({
+ data: modalBody,
+ componentType: 'codeblock',
+ title: 'Info',
+ size: 'lg',
+ })
+ } else {
+ ModalService.confirm({
+ key: modalContent,
+ body: (
+ {modalMessage}
+
+ {modalInput && (
+
+ ),
+ title: 'Confirm',
+ onConfirm: () => [
+ genericPostRequest({
+ path: modalUrl,
+ values: { ...modalBody, ...{ input: inputRef.current.value } },
+ }),
+ ],
+ })
+ }
+ },
+ [
+ dropDownInfo?.data,
+ dropDownInfo?.isSuccess,
+ genericGetRequest,
+ genericPostRequest,
+ modalContent,
+ ],
+ )
useEffect(() => {
if (dropDownInfo.isFetching) {
@@ -61,66 +127,17 @@ export default function CippActionsOffcanvas(props) {
modalContent.modalDropdown,
)
}
- }, [dropDownInfo])
+ }, [
+ dropDownInfo,
+ handleModal,
+ modalContent.modalBody,
+ modalContent.modalDropdown,
+ modalContent.modalInput,
+ modalContent.modalMessage,
+ modalContent.modalType,
+ modalContent.modalUrl,
+ ])
- const handleLink = useNavigate()
- const handleExternalLink = (link) => {
- window.open(link, '_blank')
- }
- const handleModal = (
- modalMessage,
- modalUrl,
- modalType = 'GET',
- modalBody,
- modalInput,
- modalDropdown,
- ) => {
- if (modalType === 'GET') {
- ModalService.confirm({
- body: (
-
+
+ )}
+ {modalDropdown && (
+
+ {dropDownInfo.isSuccess && (
+ ({
+ value: data[modalDropdown.valueField],
+ label: data[modalDropdown.labelField],
+ }))}
+ />
+ )}
+
+ )}
+ {modalMessage}
+
-
- ),
- title: 'Confirm',
- onConfirm: () => genericGetRequest({ path: modalUrl }),
- })
- } else {
- ModalService.confirm({
- key: modalContent,
- body: (
- {modalMessage}
-
- {modalInput && (
-
- ),
- title: 'Confirm',
- onConfirm: () => [
- genericPostRequest({
- path: modalUrl,
- values: { ...modalBody, ...{ input: inputRef.current.value } },
- }),
- ],
- })
- }
- }
const handleOnClick = (
link,
modal,
@@ -142,7 +159,14 @@ export default function CippActionsOffcanvas(props) {
if (modalDropdown) {
getDrowndownInfo({ path: modalDropdown.url })
}
- setModalContent({ modalMessage, modalUrl, modalType, modalBody, modalInput, modalDropdown })
+ setModalContent({
+ modalMessage,
+ modalUrl,
+ modalType,
+ modalBody,
+ modalInput,
+ modalDropdown,
+ })
handleModal(modalMessage, modalUrl, modalType, modalBody, modalInput, modalDropdown)
}
@@ -176,7 +200,9 @@ export default function CippActionsOffcanvas(props) {
))
- } catch (error) {}
+ } catch (error) {
+ // swallow error
+ }
const extendedInfoContent =
-
- )}
- {modalDropdown && (
-
- {dropDownInfo.isSuccess && (
- ({
- value: data[modalDropdown.valueField],
- label: data[modalDropdown.labelField],
- }))}
- />
- )}
-
- )}
- {modalMessage}
- -
-
+
+ Switchusage(e)}
+ />
+ Click to Change
+ {Array.isArray(data) && data.map((el, idx) =>
case 'text':
return String(data)
+ case 'codeblock':
+ return (
+ {el}
)}
+ ({
+ value: customerId,
+ name: `${displayName} (${defaultDomainName})`,
+ }))}
+ />
+
)}
{!NavSelector && (
diff --git a/src/components/utilities/TenantSelectorMultiple.js b/src/components/utilities/TenantSelectorMultiple.jsx
similarity index 100%
rename from src/components/utilities/TenantSelectorMultiple.js
rename to src/components/utilities/TenantSelectorMultiple.jsx
diff --git a/src/components/utilities/ThemeSwitcher.js b/src/components/utilities/ThemeSwitcher.jsx
similarity index 57%
rename from src/components/utilities/ThemeSwitcher.js
rename to src/components/utilities/ThemeSwitcher.jsx
index baf69b76c362..13071b9f77b6 100644
--- a/src/components/utilities/ThemeSwitcher.js
+++ b/src/components/utilities/ThemeSwitcher.jsx
@@ -1,20 +1,21 @@
import React from 'react'
-import { CButtonGroup, CButton, CCard, CCardHeader } from '@coreui/react'
+import { CButton, CCol, CRow } from '@coreui/react'
import { useDispatch, useSelector } from 'react-redux'
import { setCurrentTheme } from 'src/store/features/app'
import { useMediaPredicate } from 'react-media-hook'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
function themeInfo(theme) {
switch (theme) {
case 'impact':
return {
name: 'Impact',
- description: "Impact is CIPP's dark theme.",
+ description: 'Dark Theme',
}
case 'cyberdrain':
return {
name: 'CyberDrain',
- description: "CyberDrain is CIPP's light theme.",
+ description: 'Light Theme',
}
default:
return {
@@ -29,6 +30,7 @@ const ThemeSwitcher = () => {
const currentTheme = useSelector((state) => state.app.currentTheme)
const themes = useSelector((state) => state.app.themes)
const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+
const SwitchTheme = (inputTheme) => {
var targetTheme
if (inputTheme === 'default') {
@@ -43,22 +45,27 @@ const ThemeSwitcher = () => {
}
return (
- +
Default Usage Location
+-
Step 1
+Choose tenants
++
+
Step 2
+Enter the information for this application
++
+
Step 3
+Confirm and apply
++ {!postResults.isSuccess && ( +
Selected Tenants
+Application ID
+Copy Permissions
+Selected Permissions
++
{children}
+}
+
+Lazy.propTypes = {
+ visible: PropTypes.bool,
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+}
const CIPPSettings = () => {
const [active, setActive] = useState(1)
@@ -115,28 +136,43 @@ const CIPPSettings = () => {
Are you sure you want to clear the cache?
,
- onConfirm: () => {
- clearCache({ tenantsOnly: false })
- localStorage.clear()
- },
- })
-
- const handleClearCacheTenant = useConfirmModal({
- body: Are you sure you want to clear the cache?
,
- onConfirm: () => {
- clearCache({ tenantsOnly: true })
- },
- })
-
const tableProps = {
pagination: false,
- subheader: false,
- }
- const downloadTxtFile = (data) => {
- const txtdata = [JSON.stringify(RunBackupResult.data.backup)]
- const file = new Blob(txtdata, { type: 'text/plain' })
- const element = document.createElement('a')
- element.href = URL.createObjectURL(file)
- element.download = 'CIPP-Backup' + Date.now() + '.json'
- document.body.appendChild(element)
- element.click()
- }
- const inputRef = useRef(null)
- const handleChange = (e) => {
- const fileReader = new FileReader()
- fileReader.readAsText(e.target.files[0], 'UTF-8')
- fileReader.onload = (e) => {
- restoreBackup({ path: '/api/ExecRestoreBackup', values: e.target.result })
- }
+ actions: [
+ Latest: {isSuccessVersion ? versions.RemoteCIPPVersion :
- Current: {isSuccessVersion ? versions.LocalCIPPVersion :
- Latest: {isSuccessVersion ? versions.RemoteCIPPAPIVersion :
- Current: {isSuccessVersion ? versions.LocalCIPPAPIVersion :
- Permissions Check
+Click the button below to start a permissions check.
GDAP Check
+Click the button below to start a check for general GDAP settings.
{clearCacheResult.data?.Results}
+ {GDAPResult.isSuccess && (
+ <>
+ Tenant Access Check
@@ -476,6 +547,7 @@ const GeneralSettings = () => {
)}
+
{
{accessCheckResult.isSuccess && (
{
-
-
-
-
-
-
-
- Run Backup
-
-
- Click the button below to start a backup of all Settings
- runBackup({ path: '/api/ExecRunBackup' })}
- disabled={RunBackupResult.isFetching}
- className="me-3 mt-3"
- >
- {RunBackupResult.isFetching && (
-
- handleChange(e)}
- />
- inputRef.current.click()}
- disabled={restoreBackupResult.isFetching}
- className="me-3 mt-3"
- >
- {restoreBackupResult.isFetching && (
-
- {restoreBackupResult.isSuccess && (
- <>
- {restoreBackupResult.data.Results}
-
- )}
- {RunBackupResult.isSuccess && (
- <>
-
- downloadTxtFile(RunBackupResult.data.backup)}
- className="m-1"
- >
- Download Backup
-
-
-
- )}
-
-
-
-
-
)
@@ -598,12 +608,14 @@ const ExcludedTenantsSettings = () => {
onConfirm: () => removeExcludeTenant(domain),
})
- const handleCPVPermissions = (domain) =>
+ const handleCPVPermissions = (domain, resetsp = false) =>
ModalService.confirm({
title: 'Refresh Permissions',
body: Are you sure you want to refresh permissions for {domain.defaultDomainName}?
,
onConfirm: () =>
- refreshPermissions({ path: `/api/ExecCPVPermissions?TenantFilter=${domain.customerId}` }),
+ refreshPermissions({
+ path: `/api/ExecCPVPermissions?TenantFilter=${domain.customerId}&ResetSP=${resetsp}`,
+ }),
})
const handleConfirmExcludeTenant = (tenant) => {
ModalService.confirm({
@@ -611,7 +623,6 @@ const ExcludedTenantsSettings = () => {
body: Are you sure you want to exclude this tenant?
,
onConfirm: () => addExcludeTenant(tenant),
})
-
.unwrap()
.then(() => {
dispatch(setCurrentTenant({}))
@@ -640,6 +651,7 @@ const ExcludedTenantsSettings = () => {
Add Excluded Tenant
)
+
function StatusIcon(graphErrorCount) {
if (graphErrorCount > 0) {
return Password Style
+Are you sure you want to clear the cache?
,
+ onConfirm: () => {
+ clearCache({ tenantsOnly: false })
+ localStorage.clear()
+ },
+ })
+ const handleClearCacheTenant = useConfirmModal({
+ body: Are you sure you want to clear the cache?
,
+ onConfirm: () => {
+ clearCache({ tenantsOnly: true })
+ },
+ })
const resolvers = ['Google', 'Cloudflare', 'Quad9']
return (
@@ -1369,32 +1460,132 @@ const DNSSettings = () => {
{getDnsConfigResult.isUninitialized && getDnsConfig()}
{getDnsConfigResult.isSuccess && (
DNS Resolver
+Frontend Version
+Latest: {isSuccessVersion ? versions.RemoteCIPPVersion :
+
+ Current: {isSuccessVersion ? versions.LocalCIPPVersion :
+ Clear Caches
{clearCacheResult.data?.Results}
+ )}
+ Settings Backup
+Backend API Version
+Latest: {isSuccessVersion ? versions.RemoteCIPPAPIVersion :
+
+ Current: {isSuccessVersion ? versions.LocalCIPPAPIVersion :
+
- {listBackendResult.isUninitialized &&
- listBackend({ path: 'api/ExecExtensionMapping?List=true' })}
+ {listBackendHaloResult.isUninitialized &&
+ listHaloBackend({ path: 'api/ExecExtensionMapping?List=Halo' })}
<>
-
+
HaloPSA Mapping Table
- {listBackendResult.isFetching ? (
+ {listBackendHaloResult.isFetching ? (
-
Step 3
Choose offboarding options
-
-
-
- x.mail)
- .map((user) => ({
- value: user.mail,
- name: `${user.displayName} <${user.mail}>`,
- }))}
- placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
- name="AccessNoAutomap"
- />
-
-
- x.mail)
- .map((user) => ({
- value: user.mail,
- name: `${user.displayName} <${user.mail}>`,
- }))}
- placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
- name="AccessAutomap"
- />
-
-
- x.mail)
- .map((user) => ({
- value: user.mail,
- name: `${user.displayName} <${user.mail}>`,
- }))}
- placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
- name="OnedriveAccess"
- />
-
-
- x.mail)
- .map((user) => ({
- value: user.mail,
- name: `${user.displayName} <${user.mail}>`,
- }))}
- placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
- name="forward"
- />
-
-
+
+
+
+ x.mail)
+ .map((user) => ({
+ value: user.mail,
+ name: `${user.displayName} <${user.mail}>`,
+ }))}
+ placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
+ name="AccessNoAutomap"
+ />
+ x.mail)
+ .map((user) => ({
+ value: user.mail,
+ name: `${user.displayName} <${user.mail}>`,
+ }))}
+ placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
+ name="AccessAutomap"
+ />
+ x.mail)
+ .map((user) => ({
+ value: user.mail,
+ name: `${user.displayName} <${user.mail}>`,
+ }))}
+ placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
+ name="OnedriveAccess"
+ />
+ x.mail)
+ .map((user) => ({
+ value: user.mail,
+ name: `${user.displayName} <${user.mail}>`,
+ }))}
+ placeholder={!usersIsFetching ? 'Select user' : 'Loading...'}
+ name="forward"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ setStartDate(date)}
+ />
+
+
+
+
+
+
+
@@ -340,6 +384,7 @@ const Users = (row) => {
{!postResults.isSuccess && (
{!postResults.isSuccess && (
Roles and group names
+ {props.values.gdapRoles.map((role, idx) => ( + <> + {role.RoleName === 'Company Administrator' && ( +{!postResults.isSuccess && (
Roles and group names
+ {props.values.gdapRoles.map((role, idx) => ( + <> + {role.Name == 'Company Administrator' && ( +{!postResults.isSuccess && (
Roles and group names
+ {props.values.gdapRoles.map((role, idx) => ( + <> + {role.RoleName === 'Company Administrator' && ( +Domains
{graphrequest.isFetching &&Step 1
+Choose a tenant
++
+
Step 2
+Choose tenant offboarding options
++
+
+
+
+
+
+ +
Step 3
+Confirm and apply
++
+ {postResults.isFetching && (
+
+ Loading
+
+ )}
+ {postResults.isSuccess && (
+ <>
+
+ {postResults.data.Results.map((message, idx) => {
+ return {message}
+ })}
+
+
+ {postResults.data.Errors.map((message, idx) => {
+ return {message}
+ })}
+
+
+ )}
+ {!postResults.isSuccess && (
+
+ {/* eslint-disable react/prop-types */}
+ {(props) => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Remove all guest users originating from the CSP tenant
+
+
+ Remove all multitenant applications originating from CSP tenant
+
+
+ Terminate all active GDAP relationships
+
+
+ Terminate contract relationship
+
+
+
+
+
+
+ )}
+
+ )}
+
+ Selected Tenant:
+ {tenantDomain} ++
+
+
{!postResults.isSuccess && (
+
{getNestedValue(graphrequest.data.Data, info.value)}
)} diff --git a/src/views/tenant/standards/DomainsAnalyser.js b/src/views/tenant/standards/DomainsAnalyser.jsx similarity index 97% rename from src/views/tenant/standards/DomainsAnalyser.js rename to src/views/tenant/standards/DomainsAnalyser.jsx index 6b8bd505d756..dbe792deaf7e 100644 --- a/src/views/tenant/standards/DomainsAnalyser.js +++ b/src/views/tenant/standards/DomainsAnalyser.jsx @@ -65,6 +65,10 @@ function DeleteAction({ domain }) { ) } +DeleteAction.propTypes = { + domain: PropTypes.string, +} + function checkDomain(tenantDomain) { return (
@@ -73,6 +77,7 @@ function checkDomain(tenantDomain) {
)
}
+
checkDomain.propTypes = {
tenantDomain: PropTypes.string,
}
@@ -274,6 +279,12 @@ const DomainsAnalyser = () => {
tenantSelector={true}
showAllTenantSelector={true}
datatable={{
+ filterlist: [
+ {
+ filterName: 'Exclude onmicrosoft domains',
+ filter: 'Complex: domain notlike onmicrosoft',
+ },
+ ],
path: `/api/DomainAnalyser_List`,
params: { tenantFilter: currentTenant.defaultDomainName },
columns,
diff --git a/src/views/tenant/standards/IndividualDomain.js b/src/views/tenant/standards/IndividualDomain.jsx
similarity index 99%
rename from src/views/tenant/standards/IndividualDomain.js
rename to src/views/tenant/standards/IndividualDomain.jsx
index f4e6f4c798a7..b2e8350677bb 100644
--- a/src/views/tenant/standards/IndividualDomain.js
+++ b/src/views/tenant/standards/IndividualDomain.jsx
@@ -383,8 +383,9 @@ function DomainOffcanvasTabs({ children, jsonContent }) {
)
}
+
DomainOffcanvasTabs.propTypes = {
- children: PropTypes.node,
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
jsonContent: PropTypes.string,
}
@@ -416,6 +417,7 @@ function ValidationListContent({ data }) {
)
}
+
ValidationListContent.propTypes = {
data: PropTypes.object,
}
@@ -670,6 +672,7 @@ SPFResultsCard.propTypes = {
spfOverride: PropTypes.string,
...sharedProps,
}
+
function WhoisResultCard({ domain }) {
const [visible, setVisible] = useState(false)
const {
@@ -741,6 +744,7 @@ function WhoisResultCard({ domain }) {
{message}
,
+ onConfirm: () => ExecuteGetRequest({ path: apiurl }),
+ confirmLabel: 'Continue',
+ cancelLabel: 'Cancel',
+ })
+ }
+ return (
+ <>
+ - {listStandardResults[0].appliedBy - ? `This standard has been applied at ${listStandardResults[0].appliedAt} by ${listStandardResults[0].appliedBy}` - : 'This tenant does not yet have a standard applied'} +
{' '} +
+
Standard Settings
++
Global Standards
@@ -215,7 +289,7 @@ const ListAppliedStandards = () => { ))}
-
Azure AD Standards
+Entra ID Standards
Templates
@@ -395,7 +465,7 @@ const ListAppliedStandards = () => { name: template.Displayname, }))} placeholder="Select a template" - label="Choose your intune templates to apply" + label="Choose your Intune templates to apply" /> )} @@ -439,7 +509,7 @@ const ListAppliedStandards = () => { name: template.displayName, }))} placeholder="Select a template" - label="Choose your intune templates to apply" + label="Choose your Conditional Access templates to apply" /> )} @@ -461,7 +531,7 @@ const ListAppliedStandards = () => { name: template.name, }))} placeholder="Select a template" - label="Choose your intune templates to apply" + label="Choose your Exchange Connector templates to apply" /> )} @@ -482,12 +552,51 @@ const ListAppliedStandards = () => { name: template.Displayname, }))} placeholder="Select a template" - label="Choose your group templates to apply" + label="Choose your Group templates to apply" /> )}
+
Legacy Standards
++