Fleet UI: Critical policy unreleased fixes (#9052)

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;

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 (
     <Modal

frontend/pages/policies/PolicyPage/components/NewPolicyModal/NewPolicyModal.tsx

@@ -96,6 +96,7 @@ const NewPolicyModal = ({
         query: queryValue,
         resolution,
         platform: newPlatformString,
+        critical,
       });
     }
   };

frontend/pages/policies/PolicyPage/screens/QueryEditor.tsx

@@ -43,7 +43,7 @@ const QueryEditor = ({
   onOpenSchemaSidebar,
   renderLiveQueryWarning,
 }: IQueryEditorProps): JSX.Element | null => {
-  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);

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[]) => {

frontend/styles/global/_global.scss

@@ -102,7 +102,7 @@ pre {
     color: $rainbow-orange;
   }
   .boolean {
-    color: blue;
+    color: $rainbow-blue;
   }
   .null {
     color: magenta;

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%);