Frontend Support for Policy Management

[abhisek]

As a completion for our policy management feature, we need to add frontend support to:

1. List policies
2. List policy groups
3. Create Policy + Rules
4. Create Policy group
5. Attach / Remove policies from Policy Groups

• Delete operations for each of them.

This is a larger feature because it needs building multiple pages, components (re-used across pages?) and interactivity within the frontend application. The expected user behaviour is as following:

Group Management

• Navigate to Policy Management page from Dashboard
• By default, we a list of Policy Groups (name, updated_at) with count of policies attached to them
• Select Delete from the Policy Group action dropdown to delete a Policy Group. We should have confirmation before deletion. See API Keys List page
• Select View Details from the Policy Group action dropdown to go to Policy Group details page
• See the list of policies attached to the policy group
• Add / remove policies to the policy group

Note: It seems like we have dependency on Policy Management before we can implement Group Management because we need a List of policies available in the system to be able to attach to the Group

Policy Management

• Navigate to Policies page from Dashboard
• See a list of policies available in the system
• Allow CRUD operation on the policy list

Create / Edit policy

• This needs a special component because we need to allow the user to add / remove rules available in the Policy. This is because our APIs are designed to consider Policy as a real entity while rules are embedded inside them. Rules does not exist without Policy. So rules are edited within policy component.

To keep things simple, we can just allow adding a new rule or deleting a rule during edit policy page. Saving a policy involves calling our backend API to create / update the Policy with all its currently associated rules.

Note: There is a possibility of race condition / inconsistency here because a single policy may be edited by 2 users and will lead to last update win situation. We will solve this probably in future using resource versioning.

[abhisek]

@arunanshub Please pick this up as the next item. @insaaniManav Please work with Arunanshu and explain the data model for Policy Group, Policy and Rules that will help him design the UI for the same.

@arunanshub Please create the pages with mock data quickly and lets do a review before you do backend integration.

[arunanshub]

This is the initial wireframe design of the policy management page. Some portions have been marked as todo as they are subject to further discussion.

cc: @safedep/frontend-engineering

[abhisek]

@arunanshub Following are my initial feedback:

• idcolumn is probably not required to be shown because users can't really make any decision based on it
• Edit Policy group page rightly lists the attached policies. Actions should be Remove which detaches the policy from the group
• Edit policy group page should have a Add policy which allows user to select an Existing Policy to attach to the group

I think we should do the Policy Management first because Policies are a dependency for the Policy Group since we will attach / detach policies with a Policy Group

Policy Management should have similar Wireframe i.e.

• List policies
• Create new policy
• Edit existing policy
• Delete policy

But I think we will probably have a separate page for Policy Management because it will be done independent of Policy Group management.

[arunanshub]

@abhisek Alright got it. My current plan of action is:

1. Add list policy group page (/policy)
2. Add edit policy group page (/policy/policy-123)
   1. list policies associated with the group
3. Add create policy group page

Open questions:

1. should create/update policy be a separate page or a simple dialog box?

[abhisek]

@arunanshub

should create/update policy be a separate page or a simple dialog box?

Yes. They should be separate page. Policy management is independent operation from policy grouping. In fact policy group depends on "existing" policies in the system. To keep things simple, we must allow users to easily list, edit, create policies.

Policies are a bit complex because they have embedded list of Rules. Rule is an entity of its own but is contained within a Policy only.

[arunanshub]

@abhisek This is what the initial draft of policy group page listing looks like. I'll move on to view/edit policy group page.

Also, what's the relationship between a policy and a rule?

[arunanshub]

@abhisek The "View/Edit Policy Group" group looks like this. It's still a WIP so any feedback is appreciated. For now, I'm yet to pass "name" and "description" from parent component to form component.

[abhisek]

@arunanshub Looks in the right direction. Would prefer the full management workflow with mock data to provide meaningful feedback. This means, as a user:

• I want to see a list of Policy Groups
• I want to select Edit action for a policy group
• I want to cancel / go back to List Policy group page from Edit page
• I want to select Delete action for a policy group
• I want to create a new Policy Action from the List page by clicking a button

Hope this helps.

[arunanshub]

@abhisek

1. I want to see a list of Policy Groups
2. I want to select Edit action for a policy group
3. I want to cancel / go back to List Policy group page from Edit page
4. I want to select Delete action for a policy group
5. I want to create a new Policy Action from the List page by clicking a button

No. 3 can be done in 2 ways:

1. breadcrumb (eg, Policy > Policy Group "Foo" > Edit Policy)
2. A back button

Since we don't have a breadcrumb set up, I've implemented a back button, but there is one small caveat. If let's say you visit the page /policy/policy-foo and then click "Go Back", you'd be sent back to the New Tab page since there is no history to go back to. On solution would be to use a context manager, but that's complex. What do you think?

For now I'm working on item No. 5.

Note

I haven't finalized the route names yet. We'll discuss it once the pages are done.

[arunanshub]

@abhisek Create new policy group page.

[arunanshub]

@abhisek This is the (incomplete) 'create policy' page. I've added all the fields except for rules. currently working on it. Meanwhile do you mind reviewing the UI?

[abhisek]

@arunanshub Not sure about the Enable flag. Is there something in the API?

[arunanshub]

@abhisek The enable flag represents PolicyType. Hence I labelled it as "REVIEW". Do you think it would look bad if we use a toggle to represent allow/deny state?

[arunanshub]

@abhisek This is what the rule component looks like. Multiple rules can be added, and it follows the protobuf schema. Do you mind checking it out for yourself? Any feedback would be very helpful 🙏🏻

[arunanshub]

@abhisek Made rule collapsible for ease of access.

[arunanshub]

@abhisek Edit policy page with mock data! Feedback would be appreciated 🙏🏻

[abhisek]

@arunanshub Following are some feedback

• Policy management should be an independent concern i.e. I should be able to see a list of policies and then edit / create

To achieve this, we can perhaps make Manage in the sidenav to Policy Group. Introduce a new entry called Policy in the sidenav which lists available policies by default with necessary buttons to create new policy

• Edit Policy Management

Under this, add a new Policy button should allow user to select an existing policy to attach to the group. Not create new policy. New policy creation should be done through Policy Management page. When a listed policy in this page is delete, they should only be Detached from the group and not actually deleted.

Here are the routes:

• /v2/policy-management should have everything related to policy group management
• /v2/policy should have everything related to policy management

Policy is related to Policy Group only through attach / detach operation (many to many relation). Apart from that, they are independently manageable.

[arunanshub]

@abhisek applied your suggestions. This is what the "Attach Policies" dialog looks like.

On desktop

On mobile