Add ability to detect compatibility and update which hosts are checked for an existing policy

[noahtalerman]

Goal

As a Fleet admin or maintainer, I want to specify the platform (macOS, Windows, Linux) for a specific policy so that I can answer a specific yes or no question about only my macOS devices.

Figma

Add ability to specify which hosts are checked for a given policy by platform: https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/?node-id=2931%3A79321

Backend (Done): #3220

Tasks

1

• [x] On "New policy" page, replace platform checkboxes with compatibility detection component.

---

2

• [x] On "New policy" and "Edit policy" pages, update sidebar OS element.
• Element title from OS Availability to Compatible with:.
• Update all OS items to brand capitalization: macOS, Linux, Window, FreeBSD.

---

3

• [x] On "New query" and "Edit query" pages, update sidebar OS element.
• Element title from OS Availability to Compatible with:.
• Update all OS items to brand capitalization: macOS, Linux, Window, FreeBSD.

---

4

• [x] On "New policy" page, update "Save policy" modal.
• Add platform checkboxes that can be used to override compatibility.
• Checkboxes are automatically selected for the user.
• If the policy’s query is compatible with “Windows,” the “Windows” checkbox is selected.
• If the policy’s query is not compatible with any platforms, no checkboxes are selected.
• When the user selects “Save” the Edit policy page is displayed with the selected checkboxes.
• Disable "Save" button and add tooltip if no platforms are selected.
• Tooltip text: Select the platform(s) this policy will be checked on to save the policy.

No platforms selected:

---

5

• [x] On "Edit policy" page, include both the platform compatibility component and the checkboxes.
• Compatibility component always updates in realtime based on the query.
• The checkboxes always determine which platforms are selected.
• Update the PATCH /policy request to include the new platforms property that will be added in #3220.

---

6

• [x] On "Edit policy" page, disable buttons and provide tooltip if no platforms are selected.

If no platform is selected...

• Input fields are disabled
• “Save” and “Run” buttons are disabled
• “Select a platform to save or run this policy” is displayed when the user hovers over “Save” or “Run” button.

[noahtalerman]

@mike-j-thomas I've assigned you to this issue and added it into the Growth board.

Can you please complete wireframes for the following UI element?

• Update the UI element used to override the compatibility Fleet determines
  • Fleet should effectively communicate that the platforms displayed here are the platforms this policy is checked on.

[mike-j-thomas]

@noahtalerman made the above UI changes:

• Reduced size of the edit icon across the page as smidgen to 12x12px.
• Moved the green checks in front of the label, to allow space for the edit icon to occupy, free from other elements.
• As a result, the first green check and the question mark icon were clashing with each other. But that’s ok because I have been recently feeling like the question marks needed to change - there are just too many of them on the page.
• Changed design of tooltip, and tooltip question mark (they were taking over the screen)

Figma: https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/?node-id=2931%3A79321

Tooltip interaction prototype: https://www.figma.com/proto/bdl76K7p0NaRv2rKXoBVfO/Prototypes-(clickable-mockups%2C-diagrams)?page-id=810%3A127871&node-id=810%3A127879&viewport=462%2C48%2C0.84&scaling=min-zoom&starting-point-node-id=810%3A127879&show-proto-sidebar=1

Reference images:

[noahtalerman]

@mike-j-thomas looks great! Thank you.

FYI, I took a pass on the "override" state that is displayed when the user selects the pencil icon in the "Compatible with" section.

I'm going to bring my pass to engineering however, I'm curious if you have any feedback or thoughts that we can break into a "spiffier" change.

[mike-j-thomas]

Argh... sorry. I completely forgot the override state. What you did is spot on 👍

[noahtalerman]

@mike-j-thomas it was a mess up from me to not indicate, in this issue's description, that we need the override state. Always room to improve!

[noahtalerman]

@lukeheath I'm assigning this issue to you for UI review.

Please note that these UI changes to the New policy page and Edit policy page are dependent on the following issue that specifies adding these pages: #2595

Please pass the issue back to me if you have any questions or concerns with the approach :)

[noahtalerman]

EDIT: Ignore the below! The backend specification is already included in the issue. I added the ":estimate" to signal that this issue is ready for estimation.

---

Adding the ability to specify which hosts are checked for a given policy will also require changes to the API and backend.

@chiiph the following are proposed updates to the /policies API routes to support storing and retrieving platform information. When you get the chance, can you please update this issue's description with a backend specification that includes your decision on the API interface?

The platform property will determine which hosts the policy runs on. For example, if a policy's platform is set to darwin,linux, the policy will only run on macOS and Linux hosts.

Update existing API routes:

• POST /api/v1/fleet/global/policies
• POST /api/v1/fleet/team/{id}/policies
• PATCH /api/v1/fleet/policies/{id}

New parameters:

• platform: The platforms on which this policy will be checked (other platforms ignored). Empty value runs on all platforms.

Example request:

PATCH /api/v1/fleet/policies/{id}

{
    “platform”: “darwin,windows,linux”,
}

Example response:

{
  "policy": {
      "id": 2,
      "name": "Is Gatekeeper enabled on macOS devices?",
      “description”: “Checks to make sure that the Gatekeeper feature is enabled on macOS devices. This feature enforces code signing and verifies downloaded applications before allowing them to run, thereby reducing the likelihood of inadvertently executing malware.”
      “platform”: “darwin,windows,linux”,
      "resolution": "Some resolution steps",
      "passing_host_count": 0,
      "failing_host_count": 0
    }
}

[chiiph]

@noahtalerman I've updated the API to match the new API of the dependent ticket and use an array of platforms rather than a string.

[lukeheath]

Sarah: Provide more trust in the up-to-date status of the osquery's table JSON. Currently Zach updates manually.

Noah: Proposed behavior is that once this user goes into override mode, they are always in override mode. They are taking the compatibility into their own hands. If they never go into override mode, it's checked by Fleet but only updated on save.

Sarah: We need a flag to define if the user overwrote the platforms compatibility.

Noah: Let's have the policy be in edit mode always once it is saved. So the automatic platform detection only happens on new queries.

Sarah: So when they come back to a saved policy query, Fleet will only show platforms that have been saved and not evaluate the SQL.

Sarah: How do we want to handle existing queries?

Tomas: There will be a migration.

Noah: This will only apply to policy queries, not standard queries.

Sarah: When a user adds a queries to the global schedule through the simple interface there is no way to set platforms?

Noah: You have to click into advanced options.

Lucas: What migration will run?

Tomas: When we add the column we need to define what the avlue means for platforms for all existing policies.

[lukeheath]

Sarah: Does this ticket involve adding the column and running the check on queries?

Tomas: Yes.

[noahtalerman]

From 🪚 Estimation on 2021-11-11:

Noah: Let's have the policy be in edit mode always once it is saved. So the automatic platform detection only happens on new queries.

I made an adjustment to the decision outlined in the comment above.

@lukeheath when you get the chance, can you please update this issue's description with the following expected behavior?

Expected behavior:

• On the New policy page, the "automatic" state, with green checks and red Xs, is displayed by default.
  • The user can enter the "edit" state by selecting the pencil icon
• On the Edit policy page, the "edit" ("override") state, with purple checkboxes, is displayed by default.
  • The user can enter the "automatic" state by selecting the "X" icon

More details on the above expected behavior are included in updated dev notes in Figma. I'm linking to this issue's page in Figma here: https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/?node-id=2931%3A79321

[lukeheath]

Rachel: We need an error state if they try to save no platforms selected. Luke: I need to update API specs link and array of paltforms param.

[lukeheath]

Hey team! Please add your planning poker estimate with ZenHub @gillespi314 @martavis @RachelElysia

[lukeheath]

Adding some additional points to this ticket to allow time for including unit tests on the compatibility component based on an established pattern (another ticket).

[lukeheath]

@gillespi314 So that you are not blocked by #3028, I propose we not include unit tests as part of this ticket. I'm thinking next sprint we have a ticket for backfilling some important unit tests with React Testing Library, and include this component. Does that work for you?

[gillespi314]

@lukeheath works for me!

[noahtalerman]

@gillespi314 heads up, I'm unassigning you from this issue because this issue is being moved back to the start of the product design process.

This is because the UI changes specified in this issue need to be updated after the ability to specify a policy's platform (for new policy's) was included in the Fleet 4.7.0 release.

[noahtalerman]

Frontend estimation prior to moving the issue back to the start of the product design process: 5

[lukeheath]

@noahtalerman A few questions:

1) Does the "Compatible with" list in the sidebar update immediately?

• When creating or editing a policy, does this list filter down to compatible platforms in realtime?

2) I'm not clear on what this dev note means. Will you please clarify?

3) Should the "Compatible with" list in the sidebar also be applied to queries?

4) Will queries continue to have only automatic compatibility detection?

Thanks!

[noahtalerman]

Does the "Compatible with" list in the sidebar update immediately?

When creating or editing a policy, does this list filter down to compatible platforms in realtime?

@lukeheath No, the "Compatible with" list only changes when the user selects a new table in the "Tables" dropdown in the sidebar. This is the same behavior as the current behavior.

Should the "Compatible with" list in the sidebar also be applied to queries?

Yes, the copy changes to "Compatible with:" and "macOS" should also be applied to the sidebar in the Edit query and New query pages.

I'm not clear on what this dev note means. Will you please clarify?

Yes, definitely. That dev note was pointing to the wrong UI element. Here's an updated screenshot:

The green checks and red x's are always determined on the fly.

Will queries continue to have only automatic compatibility detection?

Yes, I'm interpreting this question as "the 'Checks on' checkboxes will not exist on the query pages."

[lukeheath]

Martavis: The validation errors seem inconsistent in the save modal. If no name is provided, it lets the user click save before showing error. If no platform is selected, save is disabled with a tooltip. @noahtalerman < Product feedback

[noahtalerman]

The validation errors seem inconsistent in the save modal. If no name is provided, it lets the user click save before showing error. If no platform is selected, save is disabled with a tooltip.

@martavis this is a great point. I filed a separate "Make UI show required form fields in a consistent way" issue and tracking it in the product weekly board here: #3912