Dashboard to Visualize Network Policies

[viraj89]

Description

Develop a frontend dashboard to provide a clear visualization of network policies. The dashboard should include the following features:

Network Information

• Summary:
  • Display the number of active, inactive, and published policies.
  • Show admin information (e.g., name).
• Services:
  • Home button to navigate back to the main dashboard.

Policy List

• Filters:
  • Options to filter policies by status: All, Active, Inactive, Published.
• Create New:
  • A button to create a new policy.
• Table:
  • Title: Display the policy title.
  • Description: Show a brief description of the policy.
  • Status: Indicate the policy status (published, unpublished).
  • Start Date: Display the policy start date.
  • End Date: Display the policy end date.

Goals

• Provide a clear overview of network policy statuses.
• Enable easy management of network policies.
• Improve the visibility and accessibility of network policies.

Expected Outcome

A well-designed and functional frontend dashboard that effectively visualizes network policy information, enhancing usability and management.

Acceptance Criteria

• [x] The dashboard accurately displays all required information.
• [x] The dashboard is visually appealing and user-friendly.
• [x] The dashboard is responsive and functions well across different devices.
• [x] The dashboard correctly fetches policy data from the API.
• [x] The dashboard allows users to create new policies.

Mockups / Wireframes

Figma here.

Product Name

Network Policy Dashboard

Domain

Network Management

Tech Skills Needed

• Frontend Development
• API Integration
• Styling and Design

Complexity

Medium

Category

Frontend Development

Sub Category

Dashboard

[aniketceminds]

[emmayank]

Review Completed, All functionality working as expected

Few Feedback: @omkar-em @aniketceminds @PritiEM

1. while the side navbar is active, the UI of dashboard is not responsive

[omkar-em]

@emmayank Bug is already open for point 1. in feed back Link - https://github.com/beckn/beckn-ui-workspace/issues/2114