diff --git a/frontend/interfaces/policy.ts b/frontend/interfaces/policy.ts index 4e1694da40..c389b25c63 100644 --- a/frontend/interfaces/policy.ts +++ b/frontend/interfaces/policy.ts @@ -47,6 +47,20 @@ export interface IPolicyStats extends IPolicy { osquery_policy_ms: number; } +export interface IPolicyWebhookPreviewPayload { + id: number; + name: string; + query: string; + description: string; + author_id: number; + author_name: string; + author_email: string; + resolution: string; + passing_host_count: number; + failing_host_count: number; + critical?: boolean; +} + // Used on the host details page and other places where the status of individual hosts are displayed export interface IHostPolicy extends IPolicy { response: string; diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx index be5fbfb910..f8c67d658b 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx @@ -1,9 +1,11 @@ -import React from "react"; +import React, { useContext } from "react"; import { syntaxHighlight } from "utilities/helpers"; import Modal from "components/Modal"; import Button from "components/buttons/Button"; import CustomLink from "components/CustomLink"; +import { AppContext } from "context/app"; +import { IPolicyWebhookPreviewPayload } from "interfaces/policy"; const baseClass = "preview-data-modal"; @@ -11,10 +13,24 @@ interface IPreviewPayloadModalProps { onCancel: () => void; } +interface IHostPreview { + id: number; + display_name: string; + url: string; +} + +interface IPreviewPayload { + timestamp: string; + policy: IPolicyWebhookPreviewPayload; + hosts: IHostPreview[]; +} + const PreviewPayloadModal = ({ onCancel, }: IPreviewPayloadModalProps): JSX.Element => { - const json = { + const { isFreeTier } = useContext(AppContext); + + const json: IPreviewPayload = { timestamp: "0000-00-00T00:00:00Z", policy: { id: 1, @@ -42,6 +58,9 @@ const PreviewPayloadModal = ({ }, ], }; + if (isFreeTier) { + delete json.policy.critical; + } return ( { - const { currentUser } = useContext(AppContext); + const { currentUser, isPremiumTier } = useContext(AppContext); const { renderFlash } = useContext(NotificationContext); // Note: The PolicyContext values should always be used for any mutable policy data such as query name @@ -77,8 +77,20 @@ const QueryEditor = ({ formData.team_id = policyTeamId; } setIsUpdatingPolicy(true); + const payload: IPolicyFormData = { + name: formData.name, + description: formData.description, + query: formData.query, + resolution: formData.resolution, + platform: formData.platform, + }; + if (isPremiumTier) { + payload.critical = formData.critical; + payload.team_id = formData.team_id; + } + try { - const policy: IPolicy = await createPolicy(formData).then( + const policy: IPolicy = await createPolicy(payload).then( (data) => data.policy ); setIsUpdatingPolicy(false); diff --git a/frontend/services/entities/team_policies.ts b/frontend/services/entities/team_policies.ts index 592bf5e44c..af67956840 100644 --- a/frontend/services/entities/team_policies.ts +++ b/frontend/services/entities/team_policies.ts @@ -5,7 +5,15 @@ import { ILoadTeamPoliciesResponse, IPolicyFormData } from "interfaces/policy"; export default { create: (data: IPolicyFormData) => { - const { name, description, query, team_id, resolution, platform } = data; + const { + name, + description, + query, + team_id, + resolution, + platform, + critical, + } = data; const { TEAMS } = endpoints; const path = `${TEAMS}/${team_id}/policies`; @@ -15,10 +23,19 @@ export default { query, resolution, platform, + critical, }); }, update: (id: number, data: IPolicyFormData) => { - const { name, description, query, team_id, resolution, platform } = data; + const { + name, + description, + query, + team_id, + resolution, + platform, + critical, + } = data; const { TEAMS } = endpoints; const path = `${TEAMS}/${team_id}/policies/${id}`; @@ -28,6 +45,7 @@ export default { query, resolution, platform, + critical, }); }, destroy: (team_id: number, ids: number[]) => { diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss index ebdacc4427..f7270d2eae 100644 --- a/frontend/styles/global/_global.scss +++ b/frontend/styles/global/_global.scss @@ -102,7 +102,7 @@ pre { color: $rainbow-orange; } .boolean { - color: blue; + color: $rainbow-blue; } .null { color: magenta; diff --git a/frontend/styles/var/colors.scss b/frontend/styles/var/colors.scss index d9edab063d..b10b7ad865 100644 --- a/frontend/styles/var/colors.scss +++ b/frontend/styles/var/colors.scss @@ -33,6 +33,7 @@ $ui-expiry-message: #fef7e0; // Rainbow $rainbow-orange: #faa669; $rainbow-green: #63c740; +$rainbow-blue: #5cabdf; // Gradients $gradients-dark-gradient: linear-gradient(270deg, #201e43 0%, #353d62 100%);