#feat16 : Added command graph (browser based). #45
Conversation
|
implemented the fonts style and color as per permit color and fonts , plus followed the same way of zanzibar tuples as per our website. saved the "resource"/"role"/"user" repetitive text. |
1 Users is now in orange boxes 2 Resource instance in purple 3 Resource instances is in the following naming convention resource_type#resource_id 4. Green lines is presenting the roles and the connection between a user and resource instance (the pill shows the role assigned) 5 Green dashed lines added it show the implicit (derived) assignment of a user to a resource 6 Orange lines now presents relationships between resource instances (the pill describes the relationship)
added more detailed styling Orange lines now presenting relationships between resource instances (the pill is describing the relationship) every user is now displayed in the graph lines now use better styling
added pagination support for better fetching added styles that render graph in configurable format
…istency with our policy graph
added support for layering ensuring every node is appear only once updates styles advance algorithms for rendering and calculating positions solved cross edges problem
introduced a new minimap fixed styling issues
gemanor
left a comment
There was a problem hiding this comment.
The code is generally great, but it also needs some refactoring. Left comments.
source/components/HtmlGraphSaver.ts
Outdated
|
|
||
| export const saveHTMLGraph = (graphData: GraphData) => { | ||
| const outputHTMLPath = resolve(process.cwd(), 'permit-graph.html'); | ||
| const htmlTemplate = ` |
There was a problem hiding this comment.
Please extract it to an external HTML file and import it to the component
| @@ -0,0 +1,168 @@ | |||
| // Define types | |||
There was a problem hiding this comment.
The file name should be GraphData.ts or GraphDataGenerator.ts
There was a problem hiding this comment.
changed , thank you!
source/components/graphCommand.tsx
Outdated
| @@ -0,0 +1,406 @@ | |||
| import React, { useEffect, useState } from 'react'; | |||
There was a problem hiding this comment.
This file should get refactored with the following comments in mind:
- File name should be
GraphCommands.tsxor justGraph.tsx - No API calls should made from here, but from hooks. See the contributing guide for the right usage of hooks, AuthProvider, and
useClientto do API calls (you'll maybe need to merge from the main for that) - Functions need to be more modular break to smaller, more maintainable functions
There was a problem hiding this comment.
named as GraphCommands.tsx and now using useClient for making api calls, thank you!
refactored changes
gemanor
left a comment
There was a problem hiding this comment.
Great Job! Thanks for this.
/claim #16
/closes #16
CLI is now able to read the whole resource instance, relationships, and role assignment from the Permit APIs and display them as a graph with the relationships.
added command graph that runs on
npx tsx ./source/cli.tsx graph
display a permit fga graph that is showing the graph of the Permit permissions in ReBAC.
opened in default browser
