Skip to content

Commit

Permalink
add overview description to status page
Browse files Browse the repository at this point in the history
  • Loading branch information
@simlarsen
simlarsen committed May 25, 2023
1 parent 9321016 commit 5618f02
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 1 deletion.
5 changes: 5 additions & 0 deletions CommonServer/API/StatusPageAPI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,7 @@ export default class StatusPageAPI extends BaseAPI<
_id: true,
projectId: true,
isPublicStatusPage: true,
overviewPageDescription: true,
},
props: {
isRoot: true,
Expand Down Expand Up @@ -898,6 +899,10 @@ export default class StatusPageAPI extends BaseAPI<
incidentStateTimelines,
IncidentStateTimeline
),
statusPage: JSONFunctions.toJSONObject(
statusPage,
StatusPage
),
scheduledMaintenanceStateTimelines:
JSONFunctions.toJSONArray(
scheduledMaintenanceStateTimelines,
Expand Down
6 changes: 5 additions & 1 deletion CommonUI/src/Components/Detail/Detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@ export interface ComponentProps {
}

const Detail: Function = (props: ComponentProps): ReactElement => {
const getMarkdownViewer: Function = (text: string): ReactElement => {
const getMarkdownViewer: Function = (text: string): ReactElement | null => {
if (!text) {
return null;
}

return <MarkdownViewer text={text} />;
};

Expand Down
38 changes: 38 additions & 0 deletions Dashboard/src/Pages/StatusPages/View/Branding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,44 @@ const StatusPageDelete: FunctionComponent<PageComponentProps> = (
modelId: modelId,
}}
/>

<CardModelDetail<StatusPage>
name="Status Page > Branding > Overview Page"
cardProps={{
title: 'Overview Page',
description:
'Essential branding elements for overview page.',
icon: IconProp.Text,
}}
isEditable={true}
editButtonText={'Edit Branding'}
formFields={[
{
field: {
overviewPageDescription: true,
},
title: 'Overview Page Description.',
fieldType: FormFieldSchemaType.Markdown,
required: false,
},
]}
modelDetailProps={{
showDetailsInNumberOfColumns: 1,
modelType: StatusPage,
id: 'overview-page-description',
fields: [
{
field: {
overviewPageDescription: true,
},
fieldType: FieldType.Markdown,
title: 'Overview Page Description',
placeholder: 'No description set.',
},
],
modelId: modelId,
}}
/>
</ModelPage>
);
};
Expand Down
35 changes: 35 additions & 0 deletions Model/Models/StatusPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1202,4 +1202,39 @@ export default class StatusPage extends BaseModel {
default: 14,
})
public showScheduledEventHistoryInDays?: number = undefined;

@ColumnAccessControl({
create: [
Permission.ProjectOwner,
Permission.ProjectAdmin,
Permission.ProjectMember,
Permission.CanCreateProjectStatusPage,
],
read: [
Permission.ProjectOwner,
Permission.ProjectAdmin,
Permission.ProjectMember,
Permission.CanReadProjectStatusPage,
],
update: [
Permission.ProjectOwner,
Permission.ProjectAdmin,
Permission.ProjectMember,
Permission.CanEditProjectStatusPage,
],
})
@Index()
@TableColumn({
type: TableColumnType.Markdown,
required: false,
isDefaultValueColumn: false,
title: 'Overview Page Description',
description:
'Overview Page description for your status page. This is a markdown field.',
})
@Column({
type: ColumnType.Markdown,
nullable: true,
})
public overviewPageDescription?: string = undefined;
}
18 changes: 18 additions & 0 deletions StatusPage/src/Pages/Overview/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ import { getAnnouncementEventItem } from '../Announcement/Detail';
import EmnptyState from 'CommonUI/src/Components/EmptyState/EmptyState';
import IconProp from 'Common/Types/Icon/IconProp';
import API from '../../Utils/API';
import StatusPage from 'Model/Models/StatusPage';
import MarkdownViewer from 'CommonUI/src/Components/Markdown.tsx/MarkdownViewer';

const Overview: FunctionComponent<PageComponentProps> = (
props: PageComponentProps
Expand All @@ -58,6 +60,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
scheduledMaintenanceEventsPublicNotes,
setScheduledMaintenanceEventsPublicNotes,
] = useState<Array<ScheduledMaintenancePublicNote>>([]);
const [statusPage, setStatusPage] = useState<StatusPage | null>(null);
const [
activeScheduledMaintenanceEvents,
setActiveScheduledMaintenanceEvents,
Expand Down Expand Up @@ -186,6 +189,11 @@ const Overview: FunctionComponent<PageComponentProps> = (
(data['incidentStateTimelines'] as JSONArray) || [],
IncidentStateTimeline
);

const statusPage: StatusPage = JSONFunctions.fromJSONObject(
(data['statusPage'] as JSONObject) || [],
StatusPage
);
const scheduledMaintenanceStateTimelines: Array<ScheduledMaintenanceStateTimeline> =
JSONFunctions.fromJSONArray(
(data['scheduledMaintenanceStateTimelines'] as JSONArray) ||
Expand All @@ -206,6 +214,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
setMonitorStatusTimelines(monitorStatusTimelines);
setResourceGroups(resourceGroups);
setMonitorStatuses(monitorStatuses);
setStatusPage(statusPage);
setStatusPageResources(statusPageResources);
setIncidentStateTimelines(incidentStateTimelines);
setScheduledMaintenanceStateTimelines(
Expand Down Expand Up @@ -525,6 +534,15 @@ const Overview: FunctionComponent<PageComponentProps> = (

{!isLoading && !error ? (
<div>
{/* Overview Page Description */}
{statusPage && statusPage.overviewPageDescription && (
<div className="bg-white p-5 my-5 rounded-xl shadow">
<MarkdownViewer
text={statusPage.overviewPageDescription}
/>
</div>
)}

{/* Load Active Anouncement */}
{activeAnnouncements.map(
(announcement: StatusPageAnnouncement, i: number) => {
Expand Down

0 comments on commit 5618f02

Please sign in to comment.