Skip to content

Replace maintenance page with Durable Functions #2418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 7, 2024
Merged

Replace maintenance page with Durable Functions #2418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55205d2
Replace maintenance page with Durable Functions
JohnDuprey May 7, 2024
0cafcaa
Merge branch 'KelvinTegelaar:dev' into dev
JohnDuprey May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion src/components/contentcards/CippChartCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { CCard, CCardBody, CCardFooter, CCardHeader, CCardTitle } from '@coreui/react'
import { CButton, CCard, CCardBody, CCardFooter, CCardHeader, CCardTitle } from '@coreui/react'
import Skeleton from 'react-loading-skeleton'
import { CChart } from '@coreui/react-chartjs'
import { getStyle } from '@coreui/utils'
import PropTypes from 'prop-types'

export default function CippChartCard({
title,
Expand All @@ -13,12 +14,22 @@ export default function CippChartCard({
ChartType = 'pie',
LegendLocation = 'bottom',
isFetching,
refreshFunction,
}) {
return (
<CCard className="h-100 mb-3">
<CCardHeader>
<CCardTitle>
{titleType === 'big' ? <h3 className="underline mb-3">{title}</h3> : title}
{refreshFunction && (
<CButton
className="position-absolute top-0 end-0 mt-2 me-2"
variant="ghost"
onClick={refreshFunction}
>
<FontAwesomeIcon icon="sync" />
</CButton>
)}
</CCardTitle>
</CCardHeader>
<CCardBody>
Expand All @@ -30,6 +41,7 @@ export default function CippChartCard({
labels: ChartLabels,
datasets: [
{
label: title,
backgroundColor: [
getStyle('--cyberdrain-warning'),
getStyle('--cyberdrain-info'),
Expand Down Expand Up @@ -59,3 +71,13 @@ export default function CippChartCard({
</CCard>
)
}
CippChartCard.propTypes = {
title: PropTypes.string.isRequired,
titleType: PropTypes.oneOf(['normal', 'big']),
ChartData: PropTypes.array.isRequired,
ChartLabels: PropTypes.array.isRequired,
ChartType: PropTypes.oneOf(['pie', 'bar', 'line']),
LegendLocation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
isFetching: PropTypes.bool,
refreshFunction: PropTypes.func,
}
274 changes: 133 additions & 141 deletions src/views/cipp/app-settings/SettingsMaintenance.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,153 @@
import React, { useState } from 'react'
import { useLazyGenericGetRequestQuery } from 'src/store/api/app.js'
import {
CButton,
CCard,
CCardBody,
CCardHeader,
CCardTitle,
CCol,
CForm,
CRow,
} from '@coreui/react'
import { Form } from 'react-final-form'
import Skeleton from 'react-loading-skeleton'
import { RFFCFormSelect } from 'src/components/forms/index.js'
import { useGenericGetRequestQuery, useLazyGenericGetRequestQuery } from 'src/store/api/app.js'
import { CButton, CCallout, CCol, CRow, CSpinner } from '@coreui/react'
import CippChartCard from 'src/components/contentcards/CippChartCard'
import { CippDatatable, CippTable, cellDateFormatter } from 'src/components/tables'
import { cellGenericFormatter } from 'src/components/tables/CellGenericFormat'
import { CippCallout, CippContentCard } from 'src/components/layout'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faLink, faScroll } from '@fortawesome/free-solid-svg-icons'
import { CippCodeBlock } from 'src/components/utilities/index.js'
import { Buffer } from 'buffer'
import CippButtonCard from 'src/components/contentcards/CippButtonCard'
import { ModalService } from 'src/components/utilities'

/**
* Performs maintenance operations on settings.
*
* @returns {JSX.Element} The JSX element representing the settings maintenance component.
*/
export function SettingsMaintenance() {
const [selectedScript, setSelectedScript] = useState()
const [listBackend, listBackendResult] = useLazyGenericGetRequestQuery()
const [listScript, listScriptResult] = useLazyGenericGetRequestQuery()
const [listScriptLink, listScriptLinkResult] = useLazyGenericGetRequestQuery()
const orchestrators = useGenericGetRequestQuery({
path: '/api/ExecDurableFunctions',
params: { Action: 'ListOrchestrators' },
})
const durableStats = useGenericGetRequestQuery({
path: '/api/ExecDurableFunctions',
params: { Action: 'ListStats' },
})

const handleSubmit = async (values) => {
listScript({ path: 'api/ExecMaintenanceScripts', params: values })
setSelectedScript(values.ScriptFile)
}
const [resetDurables, resetDurableStatus] = useLazyGenericGetRequestQuery()

const handleGetLink = () => {
listScriptLink({
path: 'api/ExecMaintenanceScripts',
params: { ScriptFile: selectedScript, MakeLink: 'True' },
const handleResetDurables = () => {
ModalService.confirm({
title: 'Confirm',
body: <div>Are you sure you want to reset all Durable Orchestrators?</div>,
onConfirm: () =>
resetDurables({
path: '/api/ExecDurableFunctions',
params: { Action: 'ResetDurables' },
}).then(() => {
orchestrators.refetch()
durableStats.refetch()
}),
confirmLabel: 'Reset',
cancelLabel: 'Cancel',
})
}

const ResetButton = (
<CButton onClick={handleResetDurables} color="danger">
<FontAwesomeIcon icon="trash" /> Reset Durables
</CButton>
)

return (
<>
{listBackendResult.isUninitialized && listBackend({ path: 'api/ExecMaintenanceScripts' })}
<CRow>
<CCol>
<CCard className="options-card">
<CCardHeader>
<CCardTitle className="d-flex justify-content-between">Maintenance</CCardTitle>
</CCardHeader>
<CCardBody>
<Form
initialValues={{}}
onSubmit={handleSubmit}
render={({ handleSubmit, submitting, values }) => {
return (
<CForm onSubmit={handleSubmit}>
{listBackendResult.isFetching && (
<>
<CRow>
<CCol>
<Skeleton count={5} />
</CCol>
</CRow>
</>
)}
{!listBackendResult.isFetching && listBackendResult.isSuccess && (
<>
<CRow>
<CCol>
<RFFCFormSelect
name="ScriptFile"
label="Script File"
placeholder="-- Select a script --"
values={listBackendResult.data.ScriptFiles}
/>
</CCol>
</CRow>
<CRow className="mb-3">
<CCol>
<CButton type="submit" disabled={submitting}>
<FontAwesomeIcon icon={faScroll} className="me-2" />
Load Script
</CButton>
</CCol>
</CRow>
</>
)}
</CForm>
)
}}
/>
</CCardBody>
</CCard>
<div className="mh-100">
<CRow className="mb-3">
<CCol sm={12} md={5} className="mh-25">
<CippChartCard
title="Durable Functions"
titleType="big"
ChartType="bar"
ChartLabels={durableStats.data?.Queues?.map((queue) => {
return queue?.Name
})}
ChartData={durableStats.data?.Queues?.map((queue) => {
return queue?.ApproximateMessageCount
})}
isFetching={durableStats.isLoading}
refreshFunction={() => durableStats.refetch()}
/>
</CCol>
<CCol sm={12} md={3} className="mh-25">
<CippChartCard
title="Status"
titleType="big"
ChartType="pie"
ChartLabels={durableStats.data?.Orchestrators?.map((status) => {
return status.Name
})}
ChartData={durableStats?.data?.Orchestrators?.map((status) => {
return status.Count
})}
isFetching={durableStats.isLoading}
refreshFunction={() => durableStats.refetch()}
/>
</CCol>
<CCol sm={12} md={4}>
<CippButtonCard title="Troubleshooting" titleType="big" CardButton={ResetButton}>
<small>
<p>Use these actions when troubleshooting performance issues with the backend.</p>
<p>
<b>NOTE: Resetting durables will terminate any running processes.</b>
</p>
</small>

{resetDurableStatus.isFetching && <CSpinner className="ms-2" />}
{!resetDurableStatus.isFetching && resetDurableStatus.isSuccess && (
<CippCallout color="info" dismissible>
{resetDurableStatus?.data?.Message}
</CippCallout>
)}
</CippButtonCard>
</CCol>
</CRow>
<CRow>
<CCol>
{listScriptResult.isFetching && (
<CCard className="h-100">
<CCardBody>
<Skeleton count={10} />
</CCardBody>
</CCard>
)}
{!listScriptResult.isFetching && listScriptResult.isSuccess && (
<CCard className="h-100">
<CCardHeader>
<CCardTitle>Script Details</CCardTitle>
</CCardHeader>
<CCardBody>
<p>
<CButton type="submit" onClick={handleGetLink}>
<FontAwesomeIcon icon={faLink} className="me-2" />
Create Link
</CButton>
</p>
{listScriptLinkResult.isSuccess && (
<p>
{listScriptLinkResult.data.Link !== undefined && (
<>
<p>
Copy this text into a PowerShell terminal, we recommend Azure Cloud Shell.
Azure modules and the az command line utilties are required for these
scripts to work. The link is valid for 5 minutes.
</p>
<CippCodeBlock
language="text"
showLineNumbers={false}
wrapLongLines={true}
code={
'irm ' +
window.location.origin +
listScriptLinkResult.data.Link +
' | iex'
}
/>
</>
)}
</p>
)}
{listScriptResult.data.ScriptContent !== undefined && (
<p>
<h5>Maintenance Script Contents</h5>
<CippCodeBlock
language="powershell"
showLineNumbers={true}
wrapLongLines={false}
code={Buffer.from(listScriptResult.data.ScriptContent, 'base64').toString()}
/>
</p>
)}
</CCardBody>
</CCard>
)}
<CRow className="mb-3">
<CCol className="mh-75">
<CippContentCard title="Orchestrators" titleType="big">
<CippTable
data={orchestrators?.data?.Orchestrators}
columns={[
{
name: 'Created',
selector: (row) => row['CreatedTime'],
sortable: true,
cell: cellDateFormatter({ format: 'short' }),
},
{
name: 'Completed',
selector: (row) => row?.CompletedTime,
sortable: true,
cell: cellDateFormatter({ format: 'short' }),
},
{
name: 'Name',
selector: (row) => row['Name'],
sortable: true,
cell: cellGenericFormatter(),
},
{
name: 'Status',
selector: (row) => row['RuntimeStatus'],
sortable: true,
cell: cellGenericFormatter(),
},
{
name: 'Input',
selector: (row) => row['Input'],
cell: cellGenericFormatter(),
},
]}
filterlist={[
{ filterName: 'Running', filter: 'Complex: RuntimeStatus eq Running' },
{ filterName: 'Pending', filter: 'Complex: RuntimeStatus eq Pending' },
{ filterName: 'Completed', filter: 'Complex: RuntimeStatus eq Completed' },
{ filterName: 'Failed', filter: 'Complex: RuntimeStatus eq Failed' },
]}
isFetching={orchestrators.isFetching}
refreshFunction={() => orchestrators.refetch()}
/>
</CippContentCard>
</CCol>
</CRow>
</>
</div>
)
}