Create Widgets for AI APIs in Analytics Dashboard

[Piumal1999]

Problem

We have a new set of widgets (charts, tables, and cards) that has to be created for use in the AI analytics dashboard.

Solution

Implement the widgets Wire up with the backend

Affected Component

APIM

Version

4.4.0

Implementation

• [ ] Implement the filters for vendors and models
• [ ] Implement the missing chart types
  • [ ] Heatmap
  • [ ] Donut chart

Related Issues

This is a sub issue under https://github.com/wso2/api-manager/issues/3318

Suggested Labels

No response

[Piumal1999]

2024/10/30 Update:

• Implemented the Vendor filter and Model filter (https://github.com/Piumal1999/choreo-apim-analytics-portal/commit/312ed198044b1370520a917ab45133a1b83053fe)

[Piumal1999]

2024/10/31 Update:

• Implemented VendorUsageOverTime chart (https://github.com/Piumal1999/choreo-apim-analytics-portal/commit/fb416ee9c9ddacfd381ae702c102b3b6f60372a1)
• Implemented the Vendor Usage Summary Table (https://github.com/Piumal1999/choreo-apim-analytics-portal/commit/4d5635d3de2d83159849e8bb2f1629c6cb0ba2a5)

[Piumal1999]

2024/11/03 Update:

• Implemented the latency page chart (https://github.com/Piumal1999/choreo-apim-analytics-portal/commit/ef9837c71cf1aabb1f927f9db185365d96fda7c6)
• Implemented the overview page (https://github.com/Piumal1999/choreo-apim-analytics-portal/commit/2678eadfb313bcf20c0d33c8a29240e6cbab4173)

[Piumal1999]

2024/11/04 Update:

• Updated the API doc with the newly required functions
• Opened PR for overview page with the new tab layout (https://github.com/Jithmi004/choreo-apim-analytics-portal-jithmi/pull/2)
• Todo: Need to decide the best approach to handle the state changes in 3 types of pages (Ingress, Egress General, Egress AI)

[Piumal1999]

2024/11/06 Update:

• Got a suggestion from the choreo team to restructure the directories to prevent conflicts with the existing components
• Opened a draft PR for the directory restructure (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607).
• Having an issue with the routes. Working on to fix it

[Piumal1999]

2024/11/07 Update:

• Completed the basic structure with the navigation, tabs and the new directory structure.
• Next step: working on the main pages

[Piumal1999]

2024/11/10 Update:

• Updated the UI designs with the new changes. (Tab views for inbound, outbound and AI analytics)
• Updated the code structure accordingly

[Piumal1999]

2024/11/12 Update:

• Implemented the overview pages (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607/commits/b81c86769a67786a2ce01816ca948c149fe0ea67)

[Piumal1999]

2024/11/14 Update:

• Implemented the filters and the traffic pages with the general widgets (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607/commits/9f417a3644e4a5fbd984216de2dc148fda9dd2de)

[Piumal1999]

2024/11/15 Update:

• Implemented the latency pages for AI and Outbound analytics (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607/commits/41bba20221e5be4eb6012d5fab71a82d0868a875)

[Piumal1999]

2024/11/18 Update:

• Implemented error pages (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607/commits/6676fbe9b79fe411fd06c835bce4cec872c1316b)

[Piumal1999]

2024/11/20 Update:

• Updated the overview page and filters' API mocks based on the correct API payloads (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607/commits/99a7076daa046ec5bbf1f5fed2a9742de234bd33)

[Piumal1999]

2024/11/21 Update:

• Added model filter to vendor latencies widget (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607/commits/cb888eab2323b6bf24d1a6f9a7210ef32f14d931)

[Piumal1999]

2024/11/22 Update:

• Updated the UI designs based on the new tab layout. Updated the design document
• Implemented the new inner tab layout (https://github.com/wso2-enterprise/choreo-apim-analytics-portal/pull/607/commits/50574c7691359a37e326473e1d049a15b96bea8d)