SureInk Cloud MSA UI (sureink-cloud-msa-ui)

Overview

The sureink-cloud-msa-ui is the front-end user interface for the SureInk Platform. It provides a web-based application for users to interact with the platform's licensing, customer management, product catalog, subscription, and order processing functionalities. This UI communicates with the backend microservices (primarily sureink-cloud-msa and others via the sureink-gateway) to display data and perform actions.

Technology Stack

• Framework: Angular v15.2.4
• Core Libraries:
  • RxJS for reactive programming.
  • TypeScript
• UI Components & Styling:
  • Angular Material (@angular/material, @angular/cdk) for UI components.
  • Bootstrap for layout and additional styling.
  • @swimlane/ngx-charts for data visualization.
• State Management/HTTP: Angular services, potentially with RxJS for managing state and HTTP requests.
• Authentication: keycloak-angular and keycloak-js for integration with Keycloak Identity and Access Management.
• Notifications: ngx-toastr for user notifications.
• Utilities: file-saver for downloading files, ngx-pagination for paginated lists.
• Build Tool: Angular CLI

Key Features

Based on the project structure, the UI provides functionalities for:

• Dashboard: A central overview page.
• License Management: Viewing, searching, and potentially managing software licenses.
• Order Management: Tracking and managing orders.
• Subscription Management: Handling customer subscriptions.
• Product & Product Plan Management: Viewing and managing product catalog and pricing plans.
• Customer Management: Viewing and managing customer details.
• Payment & Credit Management: Interacting with payment information, credit balances, and transactions.
• Reporting: Generating and viewing various reports.
• Master Agreement Management: Handling Master Subscription Agreements.
• Event Log Viewing: Displaying system event logs.
• User Account Settings: Managing user-specific settings.
• Cart Functionality: For product selection and checkout.
• Rule Management: Interacting with business rules.
• Platform Administration: Potentially features under the platform module for administrative tasks.
• Data Migration Support: UI for data migration tasks.

Project Structure (src/app/)

The application is organized into feature modules, promoting modularity and separation of concerns. Key directories include:

• Feature Modules: Directories like accountsettings, cart, customer, dashboard, license, order, payments, product, report, subscription, etc., each containing components, services, and models specific to that feature.
• model/: Contains TypeScript interfaces and classes representing the data structures used throughout the application.
• service/: Houses Angular services responsible for business logic, API communication, and state management.
• common/ & global/: Likely contain shared components, directives, pipes, and utility functions used across multiple features.
• navigation/: Components related to application navigation (e.g., sidebars, top bars).
• security/: Components or services related to security, possibly interceptors or guards (though keycloak-angular handles much of this).
• app.module.ts: The root module that ties together other modules, components, and services.
• app-routing.module.ts: Defines the application's routing and navigation paths.
• app.component.ts/html/css: The main application shell component.
• assets/: For static assets like images, fonts, and global styles.
• initializer.ts: Contains application initialization logic, likely for setting up Keycloak before the app starts.

Prerequisites

• Node.js (check package.json for specific engine requirements if any, though usually a recent LTS version works)
• Angular CLI v15.2.4 (can be installed globally or used via npx)
• Access to a running SureInk Platform backend (Gateway, MSA service, Discovery, Keycloak, etc.)

Installation & Setup

1. Clone the repository (if not already done).
2. Navigate to the module directory:

   cd path/to/sureink-cloud-msa-ui

3. Install dependencies:

   npm install

Development Server

To run the application in development mode with live reloading:

npm start

or

ng serve

The application will typically be available at http://localhost:4200/. This command uses the default development configuration.

Building the Application

The package.json defines several build configurations:

• Default Build (Development):

  ng build

• Sandbox:

  npm run build-sandbox
  # or ng build --configuration=sandbox

• Preview:

  npm run build-preview
  # or ng build --configuration=preview

• Prevcust (Preview Customer):

  npm run build-prevcust
  # or ng build --configuration=prevcust

• Platform:

  npm run build-platform
  # or ng build --configuration=platform

• QA:

  npm run build-qa
  # or ng build --configuration=qa

• Production:

  npm run build-prod
  # or ng build --configuration=prod

Build artifacts will be stored in the dist/ directory.

Running Tests

• Unit Tests (Karma/Jasmine):

  npm test
  # or ng test

• Linting (TSLint/ESLint via Angular CLI):

  npm run lint
  # or ng lint

• End-to-End Tests (Protractor):

  npm run e2e
  # or ng e2e

  (Note: Protractor is deprecated. The project might be in the process of migrating or may need to update its e2e strategy.)

Configuration

Application configuration, especially backend API endpoints and Keycloak settings, is typically managed through environment files:

• src/environments/environment.ts (for development)
• src/environments/environment.prod.ts (for production)
• Other environment-specific files (e.g., environment.sandbox.ts) corresponding to the build configurations.

These files define variables like API base URLs, Keycloak realm, client ID, etc.

Authentication

Authentication is handled using keycloak-angular. The initializer.ts likely configures and initializes the Keycloak service when the application starts, ensuring that users are authenticated before accessing protected routes. Angular route guards are typically used in conjunction with keycloak-angular to protect routes.