WSO2 AI Subscription Portal

[piyumaldk]

Description

In earlier versions of the API Manager and Identity Server releases, the product managed the AI feature's authorization through the onprem keys of Choreo.

For future versions, to correct the design flaws, a new portal has been proposed where administrative users can log in and generate keys. The plan is to deploy the portal for public access. This solution introduces a more user-friendly approach for key generation.

Affected Component

APIM

Version

4.4.0

Related Issues

No response

Suggested Labels

No response

[piyumaldk]

Update on the current state (2024/07/23)

Had a discussion on 2024/07/23 with APIM, IS, and AI team on how to proceed with the task.

Meeting notes:

• Decided that one person from IS side and me from APIM side will work on this for now.

• Decided that we need to further clarify below things in the future

  • Where to put the codebase since both APIM and IS should own the product development?
  • What are the technologies we should use?

• Decided that it's needed to clearly separate task works and one person from IS side and me should discuss and decide that.

• Decided that two issues will be maintained to track this from both teams.

• Decided that both teams should finalise feature requirements and come up with a general requirements list.

[piyumaldk]

Update on the current state (2024/07/25)

Started working on the task from 24th July.

Below are the finalised APIM side requirements (After team discussion)

• Users
  • General users
  • We have to discuss weather there will be paid users in the future

1. General users can log into the subscription portal.

2. After logging into the portal, users will be able to generate a token by providing a unique name. The name should be unique among other tokens created by the same user (e.g., "dev"). Users have a limit of 10 tokens. If a user wants to generate an 11th token, they must remove an existing token.

3. Logged-in users can view previously generated tokens information, which include:

   • Unique name
   • Product
   • Services
   • Created date and expiry time
   • Regenerate button
   • Revoke button
   • Delete button

4. Generated tokens will expire after 2 months (from the date of user creation) for general users, at which point users will not be able to regenerate tokens or create new ones. Paid users do not have such restrictions if we introduce paid users to the portal in the future. In that case, we have to discuss the token expiration method for those users.

5. Once a user generates a token, the token will be visible only at that time, and the UI will inform the user to save the token somewhere safe.

6. Users can log out and will be redirected to the login page.

7. Generated tokens (underneath applications) should have below metadata.

   • User (For possible future use cases for paid users)
   • Unique name or client ID
   • Product
   • Services
   • Created date
   • Expiry date

8. Portal should know if the user logged in is a free user or paid user possibly through a flag, where initial development is only for free users but we have a possibility of improving the product to handle paid users as well to give them access to regenerate tokens.

Below are the requirements cam from IS side

1. User Login

2. Feature Display:

• User should be able to see all AI features of Product-IS.
• Descriptions and usage guides for each AI feature.

3. Subscription Management:

• Users should be able to subscribe to each AI feature individually.
• Option to manage or cancel subscriptions.
• Subscription status and history tracking.

4. Key Management:

• User should get different keys for each AI feature.
• User should be able to generate, regenerate, and revoke keys.
• Keys should be securely stored and displayed.

5. UI Display:

• UI should show the user the following for each AI feature:
  • Key.
  • Other configuration details required for integration with Product-IS.
• Visual indicators for active/inactive subscriptions.
• Notifications and alerts for key expiry and subscription updates.

6. User Profile Management:

• User should be able to update personal information and preferences.
• Option to view usage reports and analytics.

[piyumaldk]

Update on the current state (2024/07/26)

Discussed the requirements with the person from IS team and agreed on below requirements.

1. Below are the users who will get the access for the portal.

• General Users
  • Anybody with access to the internet can sign in to the AI Subscription portal.
  • Paid users (In the future)

2. General users can log into the AI Subscription portal.

3. After logging into the portal, users will be able to generate a token by providing a unique name. The name should be unique among other tokens created by the same user (e.g., "dev"). Users have a limit of 10 tokens. If a user wants to generate an 11th token, they must remove an existing token.

4. Logged-in users can view previously generated tokens information, which include:

• Unique name
• Description
• Product
• Services
• Created date and expiry time
• Regenerate button
• Revoke button
• Delete button

5. Generated tokens will expire after 2 months (from the date of user creation) for general users, at which point users will not be able to regenerate tokens or create new ones. Paid users do not have such restrictions if we introduce paid users to the portal in the future. In that case, we have to discuss the token expiration method for those users.

6. Once a user generates a token, the token will be visible only at that time, and the UI will inform the user to save the token somewhere safe.

7. Users can log out and will be redirected to the login page.

8. Generated tokens (underneath applications) should have below metadata.

• User (For possible future use cases for paid users)
• Unique name or client ID
• Product
• Services
• Created date
• Expiry date

9. Portal should know if the user logged in is a free user or paid user possibly through a flag, where initial development is only for free users but we have a possibility of improving the product to handle paid users as well to give them access to regenerate tokens.

However, we decided that we will need further discussions on below matters.

1. How to show the generated key? (Only key or whole config)

2. Do we give the access to generate one key for multiple products?

3. How should we handle expired dates?

[piyumaldk]

I did some initial UI sketches like below.

With above UI sketches, I had a discussion with another UI expert and AI expert from APIM team. After some discussions, we agreed on the final UI/UX sketch. It was later introduced to the person who is working from IS team side on this task and he also agreed on the UI/UX design.

Below is the finalised design. (Please note that we yet to have a proper design review on this)

[piyumaldk]

Update on the current state (2024/07/29)

• We had a design review on 2024/07/28 at 1.30PM - SLST (Recording is attached to the event)

• Meeting was 1.30 hours long and discussed from architecture perspective to UX perspective.

• Below are the final conclusions on the UX level.

  • We will remove application terminology and refer them as keys (or Tokens)
  • We will remove service selection and design the tokens to give access to the selected product's all services because otherwise it seems like unnecessary complication.
  • We will switch from the list view to a grid view (with two columns) for bigger screen sizes.
  • We will consider removing and revoking as danger actions and ask users to type something to verify the action.
  • Since paid user handling is not finalised yet, we will later address that and proceed with free users for now. For users, having at least SSO will be ideal. Decided that we need to discuss this more.
  • We need a email service to inform users about expiring tokens.

[piyumaldk]

Update on the current state (2024/08/01)

• A new sketch was designed addressing required changes. This sketch was confirmed by a key person from the last review.

• In next design review, we have to decide on the technologies to use (Since UI sketch is almost finalised). Hence before going for the next design review, I have tried and tested some of the technologies to verify feasibility with the use cases. Below are the current findings.

  • Even though next js is recommended through multiple resources including official React site, we cannot use that because it has a server side and Asgardeo SDK does not support such framework.
  • create-react-app can be used with Asgardeo SDK but there is a possibility of not mainting that project.
  • It was recommended that viteJs will be a proper framework considering the use cases from a Asgardeo expert in a meeting so need to check that feasibility. (If it's fine, we will most probalbly use that react framework)
  • Found an issue on Asgardeo react SDK, and reported it. Eventhough this issue is not a blocker for the development, this is somewhat a limitation.
    • When using sign in for the first time, always facing a Uncaught runtime error asgardeo/asgardeo-auth-react-sdk#240

[piyumaldk]

Update on the current state (2024/08/05)

• Joined [IAM Engineering] Bi-Weekly UI/UX Design Review in order to get the UI/UX sketches reviewed and to decide the technologies to use.

• Below are the key points from the 2nd (final) design review with IS team

  • To use ViteJS as the react framework.

  • To use Oxygen UI ( Since Oxygen UI was implemented on top of Material UI, in such cases where Oxygen UI cannot accomplished the expected results, I will use Material )

  • To use ESLint with restricted rules to overcome the code quality.

  • Discussed a warning on Oxygen UI ( I was informed that even this comes from Oxygen UI, this comes within Material UI and when Material UI fix this, they will do a major update for Oxygen UI, hence decided to ignore the warning for now)

  • Discussed the UI/UX and since timeline is strict for the project, decided to start implementing without designing Figma and do required changes on top of the code.

  • Please find below finalised design

1. Login Page ( Asgardeo Branding )

2. Landing Page as below
   

After the review meeting, had another meeting with an APIM UI/UX expert and discussed all the above things and decided to go with decided technologies and designs.

Since the design is finalized, I have shared it in the architecture email thread [1]. (Since we did not receive any feedback via email, we are proceeding with the implementation)

[1] [Architecture][IS] Deployment Architecture for AI Features in Product-IS

[piyumaldk]

Update on the current state (2024/08/09)

Implemented the project with decided technologies for the last four days. For now, project is done in a personal private repo.

• Since backend is not ready, used mockup hardcoded responses for the implementation.

• Finished implementing the decided design of landing page with Asgardeo login (Using React Asgardeo SDK).

• All the requirements in terms of functionality (including danger action validations and tooltips) have been implemented. The remaining tasks are UI/UX improvements.

[piyumaldk]

Update on the current state (2024/09/02)

• Had to move from Asgardeo SDK to Choreo managed authentication using Asgardeo due to a service requirement.

• Deployed the frontend in Choreo using Asgardeo (Managed Authentication)

  • Otherwise, we cannot implement further because whole authentication is only working with the Choreo deployment from now on with these changes.
  • Configure required changes and local deployment and started working on the frontend again.

• Change the authentication from default to sub organisation SSO due to a requirement of the service side implementation.

• Presented the UI, service, and architecture to the AI team and got the feedback [1]

• Implemented micro level details of UI and validations.

• Had 2 offline reviews with UI expert of APIM

• There were some changes required as the authentication flow changed (Due to a limitation on Asgardeo) hence need to change the whole UX/UI flow starting from designs

• Designed new UI / UX and got reviewed them

  • We finally decided to follow the same layout design of Asgardeo login as it will be used for login. (Sign up part will be ours)

  Below are the finalised sketches

Whole UI flow

Implemented those changes with hardcoded responses (Some data structures has been changed due to some blockers form backend side)

[1] https://drive.google.com/file/d/1tt0tQMyVC9ZHBK4NtGiv0_-F4tFQR8AN/view

[piyumaldk]

Update on the current state (2024/09/04)

• Complemented UI/UX implementation (Excluding backend connection)

  • At the time, backend service was not fully completed and deployed, hence implemented with hardcoded response.

• Since, implementation is completed, schedule a UX review (As the final review)

  • Participants : Whole UX/UI team from IS (9 Members) + few from APIM team
  • Please find the 1.30 hour recoding and meeting notes here [1]
  • Number of changes and improvements were suggested after discussion (Listed in the notes)

• Since, implementation is completed, schedule a code review (As project is a product which was written from scratch and contains 37 files)

  • Please find the 1 hour recording and meeting notes here [2]
  • Few changes and improvements were suggested after review (Listed in the notes)

• Got the backend service, hence started connecting the backend again.

  • There were some issues such as different responses to the initial specification which was used for UX/UI implementation, and some of the information were missing.
  • Discuss with the developer and mitigate the issues (Changing the frontend implementation or backend implementation is decided after the discussion for each case)

• Improved error handling and introduced new pages for errors while connecting backend for server level issues.

• As for today, still working on connecting backend and mitigating coming errors as they come.

[1] https://docs.google.com/document/d/1KOu0Y3V4LtctPKwaQieSo8muqqWxpyY8oZCm_kstaQ4/edit?usp=sharing
[2] https://docs.google.com/document/d/1YbKspf2kVMSzJqZvx53SxxFtt0CyNqMqnMiOj4KsNI8/edit?usp=sharing

[piyumaldk]

Update on the current state (2024/09/06)

• Completely finished connecting the backend to the portal (Functioning part)

  • As of today, auth sign up service was not completed hence I could not connect that part yet. There were some blockings for the developer who is working on that, and we discussed and found solutions for them. He will keep working on that.

• Because of a limitation on the Asgardeo app, we currently can only generate 2 keys (We have sent a mail to Asgardeo to get the tier increased)

• Tried to merge PR after doing some changes [1], but it seems APIM team does not have write access so informed other developer (Person who asked for the repo creation). He will ask to correctly give the access to relevant teams.

• Since now we have a functioning portal, tried to use APIM AI services using that key.

  • Found out that we cannot use that key as it is. Earlier it was an on-prem key. Now this is a key which can be used to get a token.
  • Discussed the issue with team leads and decided that we have to do some product level changes and interceptor level changes.
  • Currently I'm in the process of studying the current process and the code of APIM and interceptor and working on a solution.

[1] https://github.com/wso2-enterprise/ai-subscription-portal/pull/1

[piyumaldk]

Update on the current state (2024/09/11)

• Implemented the required changes for the APIM gateway to work with new key instead of Choreo on-prem token
• PR - Migration of new AI authentication method carbon-apimgt#12546

[piyumaldk]

Update on the current state (2024/09/13)

• Implemented new AI service interceptor in the Choreo deployment to work with new key and gateway.
• Implemented token caching for gateway as requested.
• Implemented re validation of Choreo backend token in interceptor as requested.
• Decided to sent a PR to another branch and deploy.
  • Since this is not finalised yet (name and info), I haven't sent a PR for interceptor.
• Tested the new gateway and interceptor by deploying.
  • Tested AI chat: Works fine
  • Tested Marketplace: Found a bug
• Fix the bug in the gateway (Issue with handling the key)
• Tested again
  • Marketplace currently works fine (It did not work fine initially because marketplace chat service was broken in the dev env in the deployment, however once it's fixed, chat started to work fine)
  • However, spec populator throws an error. (This needs to further investigate: Can be a issue of the spec populator deployment in dev env similar to marketplace scenario)
• Sent a mail to the marketing team requesting further guidelines. [1]
• Merged the first frontend PR [2], after sorting out the access issue.
• Plugged the devtools Asgardeo app to overcome the issue mentioned in [3]

[1] Branding for WSO2 AI Subscription Portal
[2] https://github.com/wso2-enterprise/ai-subscription-portal/pull/1
[3] #3027 (comment)

[piyumaldk]

Update on the current state (2024/09/20)

• Fixed spec populator issue (This was due to a change on spec populator where old interceptor is no longer compatible with it)

• Did Frontend improvements

  • Introduced a filtering option to filter out keys (ALL, ACTIVE, EXPIRED, REVOKED) as suggested in the review (Button feeling).
  • Add input field labels, icons
  • Make the description optional and add a cap

• Since Auth related backend service was completed, implemented the frontend to handle the self sign up process. (Functionally wise, product implementation is now completed, rest is testing, bug fixing, and improvements)

  • Introduced some additional pages and changed some layouts
  • After connecting and handling all required endpoints, tested the product in the deployment.

• In the test, we have identify few issues.

  • Choreo managed logout does not work properly. (Even logout clears the cookies and tokens, user will be able to log in to the portal without giving credentials after the logout)
    • This needs to be discussed with Choreo team.
  • Created users do not have proper roles intermittently.
    • Because of the intermittent behaviuor, we suspect that this is an issue of Asgardeo. This needs to be discussed with Asgardeo team.

[piyumaldk]

Update on the current state (2024/09/25)

• Did FE improvements

  • Add Asgardeo rules as password and organisation (This was done via config so as Asgardeo gives the capability to change these, we will be able to change them from deployments instead of code changes)
  • Change dangerous actions' verifying method
    • Initially this was handled through input text verification
    • Now this handles through checkbox verification as suggested in the review
    • From the UI perspective, followed a similar approach to Asgardeo console
    • Initial dangerous actions were revoke, and delete. Regenerate is now also consider as a dangerous action so did required changes to that as well.

• Regarding the Choreo issue

  • With the help of a Choreo team member, we identified the issue as default IDP does not have the logout URL.
  • Got this fixed (With the help of your team member) by sending a update REST call to the IDP to add the missing logout URL to the IDP which solved the issue for us.
  • Reported this as a critical bug to Choreo team as requested by the team leadership

• Regarding Asgardeo issues

  • We have a call with Asgardeo team and informed them about this buggy behaviour.
  • They introduced us with a workaround (Using that will reduce those buggy behaviours but it does not solve these behaviours)
  • We have reported those bugs to Asgardeo

• Had a discussion with Legal team and they requested some changes

  • Addressed the required changes (From legal team) in FE
  • Waiting for approval from Legal team on changes

[piyumaldk]

Update on the current state (2024/09/27)

• Did FE improvements

  • Keyshowing popup
    • Add title along with the keyname for the key showing popup
    • Add copy icon
    • Keep it in one line
  • Generated popup
    • Add labels
    • Add hints
  • Changed the landing page to have the add button in the center (If no keys are there to show)
  • Made icon buttons color gray or default (loose colored icon buttons) (Delete: red is ok)
  • Changed REVOKED and EXPIRED color from red to black or gray
  • Got description under name and get dates under key
  • Fixed alignments and add required indicators for input fields
  • Add Alpha tag
  • Optimised the code structure
    • Separated Dialog components and reusing them
    • Introduced colors.ts
    • Added constants.ts to have all URLs, status codes, and cookie names
    • Format files

• Did multiple identified bugs

• As requested, carbon apimgt code was changed to handled both scenarios (on-prem and key flows) [1]

  • Addition to the requested improvements, optimized the old codes of calling the AI services from product
  • Improved the old codes to handle and close resources properly for security

• Participated to a meeting with Security team to identify issues and review

• Add requested changes from legal team to the FE after some clarifications

• Alpha WebApp was deployed

[1] wso2/carbon-apimgt#12546

[piyumaldk]

Update on the current state (2024/10/05)

• Did the final improvements and did a demo for IS, APIM, AI teams and leadership.

• Some concerns were raised during the meeting and after the meeting

  • How we handle the AI subscription expiration
  • Touch up the UI/UX
  • Concerns on inserting the org names

• Some improvements and Asgardeo bugs were also reported after testing.

• We discuss these concerns separately.

• Decided to remove expiration

• Discussed UI design with IS and Choreo team's UX experts.

  • Since we are unable to allocate a UX designer to this task, decided to follow a current design.
  • Discussed with Choreo team's UX expert as well to finalize the improvements.

• Decided to keep changing the login flow as a separate task.

• Did the suggested UX/UI improvements.

• Did fix multiple issues and improvements on Oxygen UI

  • usePastelColorGenerator is not exposed properly from the public api oxygen-ui#263
  • Header Avatar where image is not provided does not have a random pastel color as bgColor oxygen-ui#264
  • Footer used with links give a warning of not having "key" prop oxygen-ui#266
  • Header's dropdown Avatar where image is not provided does not have a random pastel color as bgColor oxygen-ui#268

• Discuss Interceptor changes and had reviewed the interceptor code.

  • I was suggested some tests and tasks to do before getting the interceptor code merged.

• Get different envs, (prod and dev) and check if having 2 separate keys hide other envs APIs.

• Check if validation slow the process. (Jmeter 20 calls - 4 different tokens)

  • Wrote a Jmeter script and monitored the time.
  • In order to compare, had to remove validation from interceptor and monitor the time again.
  • However, while deploying the new interceptor, came across an issue of Choreo build.
  • This issue was identified as not a issue from the code itself after some discussion with a Choreo team member.

• Had some discussions with marketing team on the designs and logos. Further UI improvements are blocked since we got the color palette, logos, and designs from marketing team.

[piyumaldk]

Update on the current state (2024/11/05)

All PRs are merged and Portal is now in production and all the initial work is done.
Link: https://ai-subscriptions.wso2.com

All PRs are merged and Interceptor is now in production and all the initial work is done.
Link: https://dev-tools.wso2.com/apim-ai-service/v2

Docs are in progress since all the work related to this is done

[piyumaldk]

Doc PR has been sent [1]. There were some requested changes. After addressing them, PR is now approved.

There were some legal concerns. I discussed with a person from legal team and got them sorted out. Merging the PR is now blocked because we still haven't got the deployed AI terms. Also we haven't got a reply from security team on scans. Once these are sorted out, this task is completed.

[1] wso2/docs-apim#8678