platform doc
This commit is contained in:
ValueOn AG
parent
118fd1711f
commit
8c4287b7ad
13 changed files with 2751 additions and 0 deletions
372
appdoc/doc_security_role_based_access_admin_api.md
Normal file
372
appdoc/doc_security_role_based_access_admin_api.md
Normal file
|
|
@ -0,0 +1,372 @@
|
|||
# RBAC Admin Roles Management & Options API
|
||||
|
||||
## Overview
|
||||
|
||||
This document describes two new features added to support RBAC management:
|
||||
|
||||
1. **Options API**: Dynamic options endpoint for frontend select/multiselect fields
|
||||
2. **Admin RBAC Roles Module**: Comprehensive role and role assignment management
|
||||
|
||||
---
|
||||
|
||||
## 1. Options API
|
||||
|
||||
### Purpose
|
||||
|
||||
The Options API provides dynamic options for frontend form fields that use `frontend_options` as a string reference (e.g., `"user.role"`). This allows the frontend to fetch options from the backend, enabling:
|
||||
- Database-driven options (e.g., user connections)
|
||||
- Context-aware options (filtered by current user's permissions)
|
||||
- Centralized option management
|
||||
|
||||
### Frontend Options Format
|
||||
|
||||
The `frontend_options` attribute in Pydantic `Field` definitions supports **two formats**:
|
||||
|
||||
#### 1. Static List (for basic data types)
|
||||
```python
|
||||
frontend_options=[
|
||||
{"value": "a", "label": {"en": "All Records", "fr": "Tous les enregistrements"}},
|
||||
{"value": "m", "label": {"en": "My Records", "fr": "Mes enregistrements"}}
|
||||
]
|
||||
```
|
||||
|
||||
#### 2. String Reference (for dynamic/custom types)
|
||||
```python
|
||||
frontend_options="user.role" # Frontend fetches from /api/options/user.role
|
||||
```
|
||||
|
||||
### API Endpoints
|
||||
|
||||
#### Get Options
|
||||
```
|
||||
GET /api/options/{optionsName}
|
||||
```
|
||||
|
||||
**Path Parameters:**
|
||||
- `optionsName`: Name of the options set (e.g., "user.role", "user.connection")
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
[
|
||||
{
|
||||
"value": "sysadmin",
|
||||
"label": {
|
||||
"en": "System Administrator",
|
||||
"fr": "Administrateur système"
|
||||
}
|
||||
},
|
||||
{
|
||||
"value": "admin",
|
||||
"label": {
|
||||
"en": "Administrator",
|
||||
"fr": "Administrateur"
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
- `GET /api/options/user.role` - Get available role options
|
||||
- `GET /api/options/user.connection` - Get user's connections (context-aware)
|
||||
- `GET /api/options/auth.authority` - Get authentication authority options
|
||||
- `GET /api/options/connection.status` - Get connection status options
|
||||
|
||||
#### List Available Options
|
||||
```
|
||||
GET /api/options/
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
[
|
||||
"user.role",
|
||||
"auth.authority",
|
||||
"connection.status",
|
||||
"user.connection"
|
||||
]
|
||||
```
|
||||
|
||||
### Available Options
|
||||
|
||||
| Options Name | Description | Context-Aware |
|
||||
|-------------|------------|---------------|
|
||||
| `user.role` | Standard role options (sysadmin, admin, user, viewer) | No |
|
||||
| `auth.authority` | Authentication authority options (local, google, msft) | No |
|
||||
| `connection.status` | Connection status options (active, inactive, expired, error) | No |
|
||||
| `user.connection` | User's connections (fetched from database) | Yes (requires currentUser) |
|
||||
|
||||
### Implementation
|
||||
|
||||
**Files:**
|
||||
- `gateway/modules/features/options/mainOptions.py` - Options logic
|
||||
- `gateway/modules/routes/routeOptions.py` - Options API endpoints
|
||||
|
||||
**Usage in Pydantic Models:**
|
||||
```python
|
||||
roleLabels: List[str] = Field(
|
||||
default_factory=list,
|
||||
description="List of role labels",
|
||||
json_schema_extra={
|
||||
"frontend_type": "multiselect",
|
||||
"frontend_readonly": False,
|
||||
"frontend_required": True,
|
||||
"frontend_options": "user.role" # String reference
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Admin RBAC Roles Module
|
||||
|
||||
### Purpose
|
||||
|
||||
The Admin RBAC Roles module provides comprehensive management of roles and role assignments to users. This module allows administrators to:
|
||||
- View all available roles with metadata
|
||||
- List users with their role assignments
|
||||
- Assign/remove roles to/from users
|
||||
- Filter users by role or mandate
|
||||
- View role statistics (user counts per role)
|
||||
|
||||
### Access Control
|
||||
|
||||
**Required Permissions:**
|
||||
- User must have `admin` or `sysadmin` role
|
||||
- RBAC permission check for `UserInDB` table update operations
|
||||
|
||||
### API Endpoints
|
||||
|
||||
#### List All Roles
|
||||
```
|
||||
GET /api/admin/rbac/roles/
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
[
|
||||
{
|
||||
"roleLabel": "sysadmin",
|
||||
"description": {
|
||||
"en": "System Administrator - Full access to all system resources",
|
||||
"fr": "Administrateur système - Accès complet à toutes les ressources"
|
||||
},
|
||||
"userCount": 2,
|
||||
"isSystemRole": true
|
||||
},
|
||||
{
|
||||
"roleLabel": "admin",
|
||||
"description": {
|
||||
"en": "Administrator - Manage users and resources within mandate scope",
|
||||
"fr": "Administrateur - Gérer les utilisateurs et ressources dans le périmètre du mandat"
|
||||
},
|
||||
"userCount": 5,
|
||||
"isSystemRole": true
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### List Users with Roles
|
||||
```
|
||||
GET /api/admin/rbac/roles/users?roleLabel=admin&mandateId=mandate-123
|
||||
```
|
||||
|
||||
**Query Parameters:**
|
||||
- `roleLabel` (optional): Filter by role label
|
||||
- `mandateId` (optional): Filter by mandate ID
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "user-123",
|
||||
"username": "john.doe",
|
||||
"email": "john@example.com",
|
||||
"fullName": "John Doe",
|
||||
"mandateId": "mandate-123",
|
||||
"enabled": true,
|
||||
"roleLabels": ["admin", "user"],
|
||||
"roleCount": 2
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### Get User Roles
|
||||
```
|
||||
GET /api/admin/rbac/roles/users/{userId}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"id": "user-123",
|
||||
"username": "john.doe",
|
||||
"email": "john@example.com",
|
||||
"fullName": "John Doe",
|
||||
"mandateId": "mandate-123",
|
||||
"enabled": true,
|
||||
"roleLabels": ["admin", "user"],
|
||||
"roleCount": 2
|
||||
}
|
||||
```
|
||||
|
||||
#### Update User Roles
|
||||
```
|
||||
PUT /api/admin/rbac/roles/users/{userId}/roles
|
||||
```
|
||||
|
||||
**Request Body:**
|
||||
```json
|
||||
{
|
||||
"roleLabels": ["admin", "user"]
|
||||
}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
Updated user object with new role assignments
|
||||
|
||||
#### Add Role to User
|
||||
```
|
||||
POST /api/admin/rbac/roles/users/{userId}/roles/{roleLabel}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
Updated user object with role added (if not already present)
|
||||
|
||||
#### Remove Role from User
|
||||
```
|
||||
DELETE /api/admin/rbac/roles/users/{userId}/roles/{roleLabel}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
Updated user object with role removed
|
||||
|
||||
**Note:** If all roles are removed, user defaults to `"user"` role
|
||||
|
||||
#### Get Users with Specific Role
|
||||
```
|
||||
GET /api/admin/rbac/roles/roles/{roleLabel}/users?mandateId=mandate-123
|
||||
```
|
||||
|
||||
**Query Parameters:**
|
||||
- `mandateId` (optional): Filter by mandate ID
|
||||
|
||||
**Response:**
|
||||
List of users with the specified role
|
||||
|
||||
### Standard Roles
|
||||
|
||||
| Role Label | Description | System Role |
|
||||
|-----------|-------------|-------------|
|
||||
| `sysadmin` | System Administrator - Full access to all system resources | Yes |
|
||||
| `admin` | Administrator - Manage users and resources within mandate scope | Yes |
|
||||
| `user` | User - Standard user with access to own records | Yes |
|
||||
| `viewer` | Viewer - Read-only access to group records | Yes |
|
||||
|
||||
**Custom Roles:** The system also supports custom role labels. These are detected when users are assigned non-standard roles and are marked with `isSystemRole: false`.
|
||||
|
||||
### Implementation
|
||||
|
||||
**Files:**
|
||||
- `gateway/modules/routes/routeAdminRbacRoles.py` - Admin RBAC Roles API endpoints
|
||||
|
||||
**Dependencies:**
|
||||
- `gateway/modules/interfaces/interfaceDbAppObjects.py` - User management interface
|
||||
- `gateway/modules/security/auth.py` - Authentication and authorization
|
||||
|
||||
### Usage Examples
|
||||
|
||||
#### Assign Multiple Roles to User
|
||||
```bash
|
||||
curl -X PUT "http://localhost:8000/api/admin/rbac/roles/users/user-123/roles" \
|
||||
-H "Authorization: Bearer <token>" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"roleLabels": ["admin", "user"]}'
|
||||
```
|
||||
|
||||
#### Add Single Role
|
||||
```bash
|
||||
curl -X POST "http://localhost:8000/api/admin/rbac/roles/users/user-123/roles/admin" \
|
||||
-H "Authorization: Bearer <token>"
|
||||
```
|
||||
|
||||
#### Remove Role
|
||||
```bash
|
||||
curl -X DELETE "http://localhost:8000/api/admin/rbac/roles/users/user-123/roles/viewer" \
|
||||
-H "Authorization: Bearer <token>"
|
||||
```
|
||||
|
||||
#### List All Admins
|
||||
```bash
|
||||
curl "http://localhost:8000/api/admin/rbac/roles/roles/admin/users" \
|
||||
-H "Authorization: Bearer <token>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Integration
|
||||
|
||||
### Route Registration
|
||||
|
||||
Both modules are registered in `gateway/app.py`:
|
||||
|
||||
```python
|
||||
from modules.routes.routeOptions import router as optionsRouter
|
||||
app.include_router(optionsRouter)
|
||||
|
||||
from modules.routes.routeAdminRbacRoles import router as adminRbacRolesRouter
|
||||
app.include_router(adminRbacRolesRouter)
|
||||
```
|
||||
|
||||
### Frontend Integration
|
||||
|
||||
#### Using Dynamic Options
|
||||
|
||||
When a Pydantic model field uses `frontend_options` as a string reference:
|
||||
|
||||
```python
|
||||
roleLabels: List[str] = Field(
|
||||
frontend_options="user.role"
|
||||
)
|
||||
```
|
||||
|
||||
The frontend should:
|
||||
1. Detect the string reference (not a list)
|
||||
2. Fetch options from `/api/options/user.role`
|
||||
3. Use the returned options for the select/multiselect field
|
||||
|
||||
#### Using Admin RBAC Roles Module
|
||||
|
||||
The frontend can use the Admin RBAC Roles endpoints to:
|
||||
- Display role management UI
|
||||
- Show role assignments in user management
|
||||
- Provide role assignment controls
|
||||
- Display role statistics
|
||||
|
||||
---
|
||||
|
||||
## Security Considerations
|
||||
|
||||
1. **Options API**:
|
||||
- Requires authentication (currentUser dependency)
|
||||
- Context-aware options (e.g., `user.connection`) are filtered by current user
|
||||
- Rate limited: 120 requests/minute
|
||||
|
||||
2. **Admin RBAC Roles Module**:
|
||||
- Requires `admin` or `sysadmin` role
|
||||
- All endpoints are rate limited: 30-60 requests/minute
|
||||
- RBAC permission checks ensure users can only manage roles if they have permission
|
||||
|
||||
---
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
1. **Options API**:
|
||||
- Add more option types (e.g., mandate options, workflow options)
|
||||
- Support for filtered options based on RBAC permissions
|
||||
- Caching for frequently accessed options
|
||||
|
||||
2. **Admin RBAC Roles Module**:
|
||||
- Role metadata management (descriptions, permissions summary)
|
||||
- Bulk role assignment operations
|
||||
- Role usage analytics
|
||||
- Role templates/presets
|
||||
BIN
strategy/doc_platform_01_platform_overview.jpg
Normal file
BIN
strategy/doc_platform_01_platform_overview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
strategy/doc_platform_02_customer_story.jpg
Normal file
BIN
strategy/doc_platform_02_customer_story.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
strategy/doc_platform_03_workflow_system.jpg
Normal file
BIN
strategy/doc_platform_03_workflow_system.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
strategy/doc_platform_04_microservice_architecture.jpg
Normal file
BIN
strategy/doc_platform_04_microservice_architecture.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
strategy/doc_platform_05_rbac_system.jpg
Normal file
BIN
strategy/doc_platform_05_rbac_system.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
strategy/doc_platform_06_ui_architecture.jpg
Normal file
BIN
strategy/doc_platform_06_ui_architecture.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
strategy/doc_platform_07_big_picture_and_future_vision.jpg
Normal file
BIN
strategy/doc_platform_07_big_picture_and_future_vision.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
867
strategy/doc_platform_big_picture.css
Normal file
867
strategy/doc_platform_big_picture.css
Normal file
|
|
@ -0,0 +1,867 @@
|
|||
/* PowerON Platform Big Picture Documentation Styles */
|
||||
|
||||
/* Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #1a1a1a;
|
||||
background-color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
padding: 1rem 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover .logo-text {
|
||||
color: #4B73FF;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-size: 1.1rem;
|
||||
color: #555;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 2px solid #e5e5e5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
color: #1a1a1a;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: #4B73FF;
|
||||
border-bottom-color: #4B73FF;
|
||||
}
|
||||
|
||||
/* Tab Content */
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
color: #1a1a1a;
|
||||
border-bottom: 3px solid #4B73FF;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #1a1a1a;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.section h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.8;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.section ul, .section ol {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.section li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.section code {
|
||||
background-color: #f4f4f4;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.section pre {
|
||||
background-color: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
border-left: 4px solid #4B73FF;
|
||||
}
|
||||
|
||||
.section pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Highlight Box */
|
||||
.highlight-box {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
margin: 2rem 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.highlight-box h4 {
|
||||
color: #ffffff;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.highlight-box ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.highlight-box li {
|
||||
margin-bottom: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.highlight-box li strong {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.highlight-box li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Architecture Diagram */
|
||||
.architecture-diagram {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.layer {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #4B73FF;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.layer:hover {
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.layer h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Workflow Structure */
|
||||
.workflow-structure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.workflow-item {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border-top: 4px solid #4B73FF;
|
||||
}
|
||||
|
||||
.workflow-item h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Mode Grid */
|
||||
.mode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.mode-card {
|
||||
background: white;
|
||||
border: 2px solid #e5e5e5;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mode-card:hover {
|
||||
border-color: #4B73FF;
|
||||
box-shadow: 0 4px 12px rgba(75, 115, 255, 0.1);
|
||||
}
|
||||
|
||||
.mode-card h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Services Tree */
|
||||
.services-tree {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.service-category {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
border-left: 4px solid #4B73FF;
|
||||
}
|
||||
|
||||
.service-category h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.service-category ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.service-category > ul > li {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.service-category ul ul {
|
||||
margin-left: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.service-category ul ul li {
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* Access Levels */
|
||||
.access-levels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.access-level {
|
||||
background: white;
|
||||
border: 2px solid #e5e5e5;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.access-level:hover {
|
||||
border-color: #4B73FF;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 115, 255, 0.1);
|
||||
}
|
||||
|
||||
.access-level h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.access-level p {
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Context Grid */
|
||||
.context-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.context-card {
|
||||
background: white;
|
||||
border: 2px solid #e5e5e5;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.context-card:hover {
|
||||
border-color: #4B73FF;
|
||||
box-shadow: 0 4px 12px rgba(75, 115, 255, 0.1);
|
||||
}
|
||||
|
||||
.context-card h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.context-card code {
|
||||
background-color: #f4f4f4;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
/* Building Blocks */
|
||||
.building-blocks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.block:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.block h4 {
|
||||
color: white;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.block p {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0.5rem 0;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.architecture-diagram,
|
||||
.workflow-structure,
|
||||
.mode-grid,
|
||||
.access-levels,
|
||||
.context-grid,
|
||||
.building-blocks,
|
||||
.feature-grid,
|
||||
.transformation-comparison,
|
||||
.vision-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.diagram-box {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Feature Grid */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border: 2px solid #e5e5e5;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: #4B73FF;
|
||||
box-shadow: 0 4px 12px rgba(75, 115, 255, 0.1);
|
||||
}
|
||||
|
||||
.feature-card h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* System Diagram */
|
||||
.system-diagram {
|
||||
margin: 2rem 0;
|
||||
padding: 2rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.diagram-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.diagram-box {
|
||||
background: white;
|
||||
border: 3px solid #4B73FF;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
min-width: 400px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.diagram-box.customer {
|
||||
border-color: #28a745;
|
||||
background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.diagram-box.platform {
|
||||
border-color: #4B73FF;
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.diagram-box h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.diagram-box.customer h4 {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.diagram-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.diagram-item {
|
||||
background: #f8f9fa;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #4B73FF;
|
||||
font-size: 0.95em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.diagram-box.customer .diagram-item {
|
||||
border-left-color: #28a745;
|
||||
}
|
||||
|
||||
.diagram-arrow {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Customer Story Steps */
|
||||
.step-card {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
background: white;
|
||||
border: 2px solid #e5e5e5;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin: 2rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-card:hover {
|
||||
border-color: #4B73FF;
|
||||
box-shadow: 0 4px 12px rgba(75, 115, 255, 0.1);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-content h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.step-content ul {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
background: #fff3cd;
|
||||
padding: 1rem;
|
||||
border-left: 4px solid #ffc107;
|
||||
border-radius: 4px;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* Transformation Comparison */
|
||||
.transformation-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.comparison-box {
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.comparison-box.old {
|
||||
background: #fff5f5;
|
||||
border-color: #fc8181;
|
||||
}
|
||||
|
||||
.comparison-box.new {
|
||||
background: #f0fff4;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.comparison-box h5 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.comparison-box.old h5 {
|
||||
color: #c53030;
|
||||
}
|
||||
|
||||
.comparison-box.new h5 {
|
||||
color: #22543d;
|
||||
}
|
||||
|
||||
.comparison-box ul {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.comparison-box li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Vision Cards */
|
||||
.vision-card {
|
||||
background: white;
|
||||
border: 2px solid #e5e5e5;
|
||||
border-left: 4px solid #4B73FF;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
margin: 2rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.vision-card:hover {
|
||||
border-color: #4B73FF;
|
||||
box-shadow: 0 4px 12px rgba(75, 115, 255, 0.1);
|
||||
}
|
||||
|
||||
.vision-card h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.vision-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.vision-item {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border-top: 4px solid #4B73FF;
|
||||
}
|
||||
|
||||
.vision-item h4 {
|
||||
color: #4B73FF;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.vision-item ul {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
/* Diagram Images */
|
||||
.diagram-image-container {
|
||||
margin: 2rem 0;
|
||||
text-align: center;
|
||||
background: #f8f9fa;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.diagram-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.diagram-image:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.diagram-image-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.diagram-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.header,
|
||||
.footer,
|
||||
.tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
799
strategy/doc_platform_big_picture.html
Normal file
799
strategy/doc_platform_big_picture.html
Normal file
|
|
@ -0,0 +1,799 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/poweron-favicon.png" type="image/png">
|
||||
<title>PowerOn Platform - Big Picture | PowerON</title>
|
||||
<meta name="description" content="PowerON Platform Architecture - Big Picture for External Developers">
|
||||
<meta name="author" content="PowerON">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="doc_platform_big_picture.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="navbar">
|
||||
<a href="/" class="logo">
|
||||
<img src="logo2.png" alt="PowerON" class="logo-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
|
||||
</a>
|
||||
<nav>
|
||||
<span class="nav-title">Platform Architecture</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<h1>PowerOn Platform - Big Picture</h1>
|
||||
<p class="subtitle">Enterprise AI Workflow Platform with Integrated Data Privacy Neutralizer</p>
|
||||
<p class="intro">This document provides an overview of the PowerOn platform architecture, building blocks, and capabilities for external software developers who want to contribute to or integrate with the platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs Navigation -->
|
||||
<div class="tabs">
|
||||
<button class="tab-button active" onclick="openTab(event, 'overview')">Overview</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'customer-story')">Customer Story</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'workflows')">Workflows</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'services')">Microservices</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'rbac')">RBAC System</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'ui')">UI Architecture</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'big-picture')">Big Picture</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'integration')">Integration</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div id="overview" class="tab-content active">
|
||||
<h2>Platform Overview</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>Core Concept</h3>
|
||||
<p>PowerOn is a <strong>Multi-Agent AI Platform for Enterprise Workflows</strong> with an integrated data privacy neutralizer. The platform enables companies to accelerate their AI transformation without data privacy risks.</p>
|
||||
|
||||
<div class="highlight-box">
|
||||
<h4>Key Value Propositions</h4>
|
||||
<ul>
|
||||
<li><strong>Data Privacy First:</strong> Integrated privacy neutralizer enables safe use of ChatGPT/Copilot without privacy risks</li>
|
||||
<li><strong>Unlimited Processing:</strong> No token limits - process documents of any size through intelligent chunking</li>
|
||||
<li><strong>Universal Integration:</strong> Seamless integration of all enterprise data sources</li>
|
||||
<li><strong>Workflow Automation:</strong> Configure workflows per customer journey with standard automation elements and AI components</li>
|
||||
<li><strong>Future-Proof Architecture:</strong> Automatically improves with better AI models and larger token limits</li>
|
||||
<li><strong>Plug & Play Architecture:</strong> Renderers and dynamic AI selection per intention (analyze, generate, web, plan, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Architecture Layers</h3>
|
||||
<div class="architecture-diagram">
|
||||
<div class="layer">
|
||||
<h4>UI Layer (Playground)</h4>
|
||||
<p>React-based playground UI as entry point. Additional UIs (chatbots, customer UIs) can be easily integrated via REST API in React, JavaScript, or other languages.</p>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<h4>API Layer</h4>
|
||||
<p>RESTful API providing full access to platform capabilities. Open API design allows external UIs and integrations.</p>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<h4>Workflow Engine</h4>
|
||||
<p>Core orchestration engine managing tasks, actions, and state. Supports multiple execution modes (Learning, Actionplan, Automation).</p>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<h4>Microservices Layer</h4>
|
||||
<p>Modular service architecture with specialized services for AI, data processing, security, and integrations.</p>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<h4>Data Layer</h4>
|
||||
<p>Multi-tenant database with RBAC-based access control. Mandate isolation ensures secure data separation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Customer Journey → Workflow</h3>
|
||||
<p>For each customer journey, a workflow can be configured in the workflow editor where:</p>
|
||||
<ul>
|
||||
<li>Customers integrate their data sources</li>
|
||||
<li>Standard automation elements are available</li>
|
||||
<li>AI components can be used</li>
|
||||
<li>Workflows can be executed manually or automated (hourly/daily/weekly)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Plug & Play Architecture</h3>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h4>Dynamic Renderers</h4>
|
||||
<p>Plug & play architecture for document renderers. Support for multiple formats (PDF, DOCX, XLSX, PPTX, HTML, Markdown, JSON, CSV, etc.) with easy extension capabilities.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>Dynamic AI Selection</h4>
|
||||
<p>Intelligent AI model selection per intention type. The system automatically selects the best AI model based on the task: analysis, generation, web research, planning, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>System Architecture Diagram</h3>
|
||||
<div class="diagram-image-container">
|
||||
<img src="doc_platform_01_platform_overview.jpg" alt="PowerON Platform Architecture Diagram" class="diagram-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="customer-story" class="tab-content">
|
||||
<h2>Customer Story</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>The Journey from Application-Centric to Data-Centric Work</h3>
|
||||
<p class="lead">PowerOn enables customers to transition from <strong>application-centric</strong> to <strong>data-centric</strong> work. This is a <strong>key differentiator</strong> that transforms how businesses operate.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Step 1: Customer Journey Identification</h3>
|
||||
<div class="step-card">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h4>Identify Business Processes</h4>
|
||||
<p>Work with customers to identify their key customer journeys and business processes that can benefit from automation and AI.</p>
|
||||
<ul>
|
||||
<li>Document analysis workflows</li>
|
||||
<li>Email processing and routing</li>
|
||||
<li>Data extraction and transformation</li>
|
||||
<li>Report generation</li>
|
||||
<li>Customer communication workflows</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Step 2: MVP Integration with Focus on Data Privacy & Compliance</h3>
|
||||
<div class="step-card">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h4>Simple MVP Integration</h4>
|
||||
<p>Start with a simple MVP that integrates customer data sources with <strong>strong focus on data privacy and compliance</strong>:</p>
|
||||
<ul>
|
||||
<li><strong>Data Privacy Neutralizer:</strong> Automatic anonymization of sensitive data before AI processing</li>
|
||||
<li><strong>Compliance First:</strong> DSGVO/GDPR compliant processing from day one</li>
|
||||
<li><strong>Secure Connections:</strong> Encrypted connections to customer data sources (SharePoint, Google Drive, Outlook, etc.)</li>
|
||||
<li><strong>Mandate Isolation:</strong> Complete data separation between tenants</li>
|
||||
<li><strong>Audit Logging:</strong> Full traceability of all data access and processing</li>
|
||||
</ul>
|
||||
<p class="highlight-text">This step builds trust and demonstrates the platform's commitment to data security.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Step 3: Pre-Processing Engine Deployment</h3>
|
||||
<div class="step-card">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h4>Standard API Pre-Processing</h4>
|
||||
<p>Deploy a pre-processing engine at the customer's location using a <strong>standard API</strong>:</p>
|
||||
<ul>
|
||||
<li><strong>On-Premise/Edge Processing:</strong> Data processing happens at the customer's location</li>
|
||||
<li><strong>Standard API:</strong> Consistent interface for all customers</li>
|
||||
<li><strong>Data Minimization:</strong> Only necessary data is sent to the platform</li>
|
||||
<li><strong>Local Neutralization:</strong> Privacy neutralization can happen before data leaves customer premises</li>
|
||||
<li><strong>Reduced Latency:</strong> Faster processing for large documents</li>
|
||||
</ul>
|
||||
<p class="highlight-text">This step further enhances data privacy and gives customers full control over their data processing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Step 4: Gradual Component Integration - The Transformation</h3>
|
||||
<div class="step-card">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-content">
|
||||
<h4>From Application-Centric to Data-Centric</h4>
|
||||
<p>Gradually integrate additional components until the customer works <strong>data-centrically</strong> instead of <strong>application-centrically</strong>:</p>
|
||||
|
||||
<div class="transformation-comparison">
|
||||
<div class="comparison-box old">
|
||||
<h5>❌ Application-Centric (Old Way)</h5>
|
||||
<ul>
|
||||
<li>Work within individual applications (Word, Excel, SharePoint, Outlook)</li>
|
||||
<li>Manual data transfer between applications</li>
|
||||
<li>Data silos in different systems</li>
|
||||
<li>Workflows are application-bound</li>
|
||||
<li>Difficult to automate across applications</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="comparison-box new">
|
||||
<h5>✅ Data-Centric (PowerOn Way)</h5>
|
||||
<ul>
|
||||
<li>Work with data directly, regardless of source application</li>
|
||||
<li>Automatic data integration across all sources</li>
|
||||
<li>Unified data view across all systems</li>
|
||||
<li>Workflows span multiple applications seamlessly</li>
|
||||
<li>Easy automation across entire data ecosystem</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="highlight-text"><strong>This transformation is a KEY DIFFERENTIATOR!</strong> Customers no longer think in terms of applications, but in terms of their data and business processes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Customer Journey Diagram</h3>
|
||||
<div class="diagram-image-container">
|
||||
<img src="doc_platform_02_customer_story.jpg" alt="Customer Story - Journey from Application-Centric to Data-Centric" class="diagram-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="workflows" class="tab-content">
|
||||
<h2>Workflow System</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>Core Concept: Tasks with Actions</h3>
|
||||
<p class="lead">The core building block is <strong>workflow elements: tasks with actions</strong>. Each workflow consists of tasks, and each task contains one or more actions that execute specific operations.</p>
|
||||
|
||||
<div class="workflow-structure">
|
||||
<div class="workflow-item">
|
||||
<h4>Workflow</h4>
|
||||
<p><strong>Definition:</strong> Top-level container representing a complete customer journey or business process.</p>
|
||||
<p><strong>Purpose:</strong> Orchestrates multiple tasks to achieve a business goal.</p>
|
||||
</div>
|
||||
<div class="workflow-item">
|
||||
<h4>Task</h4>
|
||||
<p><strong>Definition:</strong> A logical step in the workflow.</p>
|
||||
<p><strong>Purpose:</strong> Groups related actions that work together to complete a sub-goal.</p>
|
||||
</div>
|
||||
<div class="workflow-item">
|
||||
<h4>Action</h4>
|
||||
<p><strong>Definition:</strong> Executable unit that performs a specific operation.</p>
|
||||
<p><strong>Purpose:</strong> Actions belong to methods (microservices) and are the atomic units of work.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Execution Modes</h3>
|
||||
<p class="lead">PowerOn supports three execution modes, each optimized for different use cases:</p>
|
||||
<div class="mode-grid">
|
||||
<div class="mode-card">
|
||||
<h4>Learning Mode</h4>
|
||||
<p><strong>Best for:</strong> Exploratory tasks with up to 5 steps</p>
|
||||
<p><strong>Approach:</strong> Iterative Plan-Act-Observe-Refine loop</p>
|
||||
<p><strong>Use Case:</strong> When the solution path is not fully known in advance</p>
|
||||
</div>
|
||||
<div class="mode-card">
|
||||
<h4>Actionplan Mode</h4>
|
||||
<p><strong>Best for:</strong> Structured, sequential processes</p>
|
||||
<p><strong>Approach:</strong> Batch planning with sequential execution</p>
|
||||
<p><strong>Use Case:</strong> When the workflow steps are well-defined</p>
|
||||
</div>
|
||||
<div class="mode-card">
|
||||
<h4>Automation Mode</h4>
|
||||
<p><strong>Best for:</strong> Repetitive, predefined workflows</p>
|
||||
<p><strong>Approach:</strong> Automated execution (scheduled or event-triggered)</p>
|
||||
<p><strong>Use Case:</strong> Production workflows that run automatically</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Available Workflow Methods</h3>
|
||||
<p class="lead">Workflow methods provide actions that can be executed within workflows. Each method exposes multiple actions accessible via <code>self.services.<method>.<action></code>:</p>
|
||||
<ul>
|
||||
<li><strong>ai.*</strong> - AI operations (process, analyze, generate)</li>
|
||||
<li><strong>sharepoint.*</strong> - SharePoint integration (search, read, upload)</li>
|
||||
<li><strong>outlook.*</strong> - Outlook integration (read emails, send emails)</li>
|
||||
<li><strong>context.*</strong> - Context management (get context, set context)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Workflow System Diagram</h3>
|
||||
<div class="diagram-image-container">
|
||||
<img src="doc_platform_03_workflow_system.jpg" alt="Workflow System - Structure, Execution Modes, and Available Methods" class="diagram-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="services" class="tab-content">
|
||||
<h2>Microservices Architecture</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>Service Access Pattern</h3>
|
||||
<p class="lead">All microservices are accessible via <code>self.services.<serviceName></code>. Services follow a consistent access pattern and are organized into logical categories.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Services Structure Tree</h3>
|
||||
<p>Complete overview of all available microservices:</p>
|
||||
|
||||
<div class="services-tree">
|
||||
<div class="service-category">
|
||||
<h4>Core Services</h4>
|
||||
<ul>
|
||||
<li><code>self.services.chat</code> - Chat and conversation management
|
||||
<ul>
|
||||
<li>Progress logging</li>
|
||||
<li>Document management</li>
|
||||
<li>Connection handling</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>self.services.workflow</code> - Workflow state and management</li>
|
||||
<li><code>self.services.utils</code> - Utility functions (timestamps, formatting, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-category">
|
||||
<h4>AI & Processing Services</h4>
|
||||
<ul>
|
||||
<li><code>self.services.ai</code> - AI model management and operations
|
||||
<ul>
|
||||
<li>Model selection</li>
|
||||
<li>Prompt processing</li>
|
||||
<li>Response handling</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>self.services.generation</code> - Document generation
|
||||
<ul>
|
||||
<li>Multiple formats (PDF, DOCX, XLSX, PPTX, HTML, Markdown, etc.)</li>
|
||||
<li>Template-based rendering</li>
|
||||
<li>JSON schema support</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>self.services.extraction</code> - Document extraction and processing
|
||||
<ul>
|
||||
<li>Multiple extractors (PDF, DOCX, XLSX, PPTX, CSV, HTML, XML, JSON, Images, etc.)</li>
|
||||
<li>Intelligent chunking</li>
|
||||
<li>Merging strategies</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>self.services.neutralization</code> - Data privacy neutralization
|
||||
<ul>
|
||||
<li>PII detection and anonymization</li>
|
||||
<li>Pattern-based neutralization</li>
|
||||
<li>Binary and text processing</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-category">
|
||||
<h4>Integration Services</h4>
|
||||
<ul>
|
||||
<li><code>self.services.sharepoint</code> - SharePoint integration
|
||||
<ul>
|
||||
<li>Site discovery</li>
|
||||
<li>File operations (read, upload, search)</li>
|
||||
<li>Path resolution</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>self.services.web</code> - Web operations
|
||||
<ul>
|
||||
<li>HTTP requests</li>
|
||||
<li>Web scraping</li>
|
||||
<li>API integration</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>self.services.ticket</code> - Ticket system integration
|
||||
<ul>
|
||||
<li>Jira integration</li>
|
||||
<li>ClickUp integration</li>
|
||||
<li>Generic ticket operations</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-category">
|
||||
<h4>Security & Infrastructure</h4>
|
||||
<ul>
|
||||
<li><code>self.services.security</code> - Security operations
|
||||
<ul>
|
||||
<li>Authentication</li>
|
||||
<li>Authorization</li>
|
||||
<li>Token management</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Code Examples</h3>
|
||||
<p>Examples of how to use services in workflow actions or methods:</p>
|
||||
<pre><code># In workflow actions or methods
|
||||
result = await self.services.<service>.<method>(parameters)
|
||||
|
||||
# Example: Using AI service
|
||||
response = await self.services.ai.process(prompt="Analyze this document", documents=[...])
|
||||
|
||||
# Example: Using SharePoint service
|
||||
files = await self.services.sharepoint.searchFiles(pathQuery="sites/my-site/documents")
|
||||
|
||||
# Example: Using generation service
|
||||
document = self.services.generation.createDocument(format="pdf", content={...})</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Microservices Architecture Diagram</h3>
|
||||
<div class="diagram-image-container">
|
||||
<img src="doc_platform_04_microservice_architecture.jpg" alt="Microservices Architecture - Core Services, AI & Processing, Integration Services, and Security" class="diagram-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rbac" class="tab-content">
|
||||
<h2>RBAC System</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>Overview</h3>
|
||||
<p class="lead">The Role-Based Access Control (RBAC) system provides <strong>complete UI configuration per tenant and user</strong>. It enables fine-grained control over data access, UI visibility, and resource availability.</p>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h4>Data Access</h4>
|
||||
<p>Table and field-level permissions for database operations. Control who can read, create, update, or delete specific data.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>UI Access</h4>
|
||||
<p>Component and feature visibility management. Configure exactly which UI elements each user or role can see.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>Resource Access</h4>
|
||||
<p>System resource availability control. Manage access to AI models, actions, and other platform resources.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Access Levels: Opening Logic</h3>
|
||||
<p class="lead">For DATA context, the system uses <strong>opening rights</strong> with four access levels. These levels determine what data a user can access:</p>
|
||||
<div class="access-levels">
|
||||
<div class="access-level">
|
||||
<h4>none (n)</h4>
|
||||
<p>No access - item is completely hidden/disabled</p>
|
||||
</div>
|
||||
<div class="access-level">
|
||||
<h4>my (m)</h4>
|
||||
<p>My records - only records created by the current user</p>
|
||||
</div>
|
||||
<div class="access-level">
|
||||
<h4>group (g)</h4>
|
||||
<p>Group records - records within the same mandate (group context)</p>
|
||||
</div>
|
||||
<div class="access-level">
|
||||
<h4>all (a)</h4>
|
||||
<p>All records - full access to all records in the mandate</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>View Logic: Open + Close</h3>
|
||||
<p class="lead">The <code>view</code> attribute controls visibility and enablement. This is the fundamental on/off switch for all RBAC contexts:</p>
|
||||
<ul>
|
||||
<li><strong>view: true</strong> - Item is visible/enabled</li>
|
||||
<li><strong>view: false</strong> - Item is hidden/disabled (regardless of other permissions)</li>
|
||||
</ul>
|
||||
<p><strong>Key Rule:</strong> Only objects with <code>view: true</code> are shown. This applies to:</p>
|
||||
<ul>
|
||||
<li><strong>DATA Context:</strong> Controls whether tables/fields are accessible</li>
|
||||
<li><strong>UI Context:</strong> Controls whether UI elements are visible</li>
|
||||
<li><strong>RESOURCE Context:</strong> Controls whether resources are available</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Rule Specificity & Hierarchy</h3>
|
||||
<p class="lead">The RBAC system uses a cascading hierarchy where more specific rules override generic ones:</p>
|
||||
<ol>
|
||||
<li><strong>Generic Rules</strong> (<code>item = null</code>) - Apply to all items in context</li>
|
||||
<li><strong>Specific Rules</strong> (<code>item = "table.field"</code> or <code>item = "ui.component.feature"</code>) - Override generic rules</li>
|
||||
</ol>
|
||||
<p><strong>Resolution Logic:</strong> Within a single role, the most specific rule wins. Across multiple roles, opening (union) logic applies - if ANY role enables something, it is enabled.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Opening Rights Principle</h3>
|
||||
<p class="lead">For DATA context, read permission (R) is a prerequisite for create/update/delete operations (CUD). This ensures data integrity and proper access control:</p>
|
||||
<ul>
|
||||
<li>If Read = "n": No CUD operations allowed</li>
|
||||
<li>If Read = "m": CUD operations limited to "m" or "n"</li>
|
||||
<li>If Read = "g": CUD operations limited to "g", "m", or "n"</li>
|
||||
<li>If Read = "a": CUD operations can be "a", "g", "m", or "n"</li>
|
||||
</ul>
|
||||
<p><strong>Key Rule:</strong> You can ONLY create/update/delete if you have read right.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Context Types</h3>
|
||||
<p class="lead">RBAC rules apply to three different context types, each serving a specific purpose:</p>
|
||||
<div class="context-grid">
|
||||
<div class="context-card">
|
||||
<h4>DATA</h4>
|
||||
<p>Database tables and fields. Controls read/create/update/delete permissions.</p>
|
||||
<p><strong>Example:</strong> <code>item: "UserInDB.email"</code></p>
|
||||
</div>
|
||||
<div class="context-card">
|
||||
<h4>UI</h4>
|
||||
<p>UI elements and features. Controls component visibility.</p>
|
||||
<p><strong>Example:</strong> <code>item: "playground.voice.settings"</code></p>
|
||||
</div>
|
||||
<div class="context-card">
|
||||
<h4>RESOURCE</h4>
|
||||
<p>System resources (AI models, actions, etc.). Controls resource availability.</p>
|
||||
<p><strong>Example:</strong> <code>item: "ai.model.anthropic"</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>RBAC System Diagram</h3>
|
||||
<div class="diagram-image-container">
|
||||
<img src="doc_platform_05_rbac_system.jpg" alt="RBAC System - Contexts, Access Levels, View Logic, and Rule Hierarchy" class="diagram-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ui" class="tab-content">
|
||||
<h2>UI Architecture</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>Playground UI</h3>
|
||||
<p class="lead">The <strong>Playground</strong> serves as the main entry point and demonstration UI. It's built with React and provides a comprehensive interface for workflow interaction:</p>
|
||||
<ul>
|
||||
<li>Chat interface for workflow interaction</li>
|
||||
<li>Workflow editor for configuration</li>
|
||||
<li>Document management</li>
|
||||
<li>Connection management</li>
|
||||
<li>Voice input/output capabilities</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>RBAC-Driven UI Configuration</h3>
|
||||
<p class="lead">The UI is <strong>completely configurable via RBAC rules</strong>. This allows customers to configure exactly the UI they need for their use case:</p>
|
||||
<ul>
|
||||
<li>Per tenant configuration</li>
|
||||
<li>Per user configuration</li>
|
||||
<li>Component-level visibility control</li>
|
||||
<li>Feature-level access control</li>
|
||||
</ul>
|
||||
<p>This allows customers to configure exactly the UI they need for their use case.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>External UI Integration</h3>
|
||||
<p class="lead">Additional UIs can be easily integrated via the REST API. All UI components communicate with the platform through the standardized REST API, ensuring consistent behavior and security:</p>
|
||||
<ul>
|
||||
<li><strong>Chatbots:</strong> Build custom chatbots using the workflow API</li>
|
||||
<li><strong>Customer UIs:</strong> Create customer-specific interfaces in React, JavaScript, or other languages</li>
|
||||
<li><strong>Mobile Apps:</strong> Integrate via REST API from mobile applications</li>
|
||||
<li><strong>Third-Party Tools:</strong> Connect existing tools via webhooks and API</li>
|
||||
</ul>
|
||||
<p>All UI components communicate with the platform through the standardized REST API, ensuring consistent behavior and security.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Available UI Components</h3>
|
||||
<p class="lead">The platform provides reusable UI components that can be configured via RBAC:</p>
|
||||
<ul>
|
||||
<li>Chat interface</li>
|
||||
<li>Document viewer/editor</li>
|
||||
<li>Workflow editor</li>
|
||||
<li>Connection manager</li>
|
||||
<li>Settings panels</li>
|
||||
<li>Dashboard widgets</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>UI Architecture Diagram</h3>
|
||||
<div class="diagram-image-container">
|
||||
<img src="doc_platform_06_ui_architecture.jpg" alt="UI Architecture - RBAC-Driven Configuration, UI Components, UI Layer, and REST API" class="diagram-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="big-picture" class="tab-content">
|
||||
<h2>Big Picture & Future Vision</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>Vendor-Independent Platform</h3>
|
||||
<div class="vision-card">
|
||||
<h4>AI Model Independence</h4>
|
||||
<p>PowerOn is designed as a <strong>vendor-independent platform</strong> regarding AI models:</p>
|
||||
<ul>
|
||||
<li>Support for multiple AI providers (OpenAI, Anthropic, Google, Azure, etc.)</li>
|
||||
<li>Dynamic model selection based on task requirements</li>
|
||||
<li>Easy addition of new AI providers</li>
|
||||
<li>No vendor lock-in - customers can switch providers seamlessly</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="vision-card">
|
||||
<h4>Connector Independence</h4>
|
||||
<p>Universal connector architecture supporting all major platforms:</p>
|
||||
<ul>
|
||||
<li><strong>Microsoft:</strong> SharePoint, Outlook, Teams, OneDrive, Azure</li>
|
||||
<li><strong>Google:</strong> Drive, Gmail, Workspace, Cloud</li>
|
||||
<li><strong>Amazon:</strong> AWS services, S3, etc.</li>
|
||||
<li><strong>Other:</strong> Jira, Slack, Salesforce, and many more</li>
|
||||
</ul>
|
||||
<p>Customers are not locked into a single vendor ecosystem.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Graphical Workflow Modeling</h3>
|
||||
<div class="vision-card">
|
||||
<h4>Visual Customer Journey Design</h4>
|
||||
<p>Future capability to <strong>graphically model workflows</strong> for customer journeys:</p>
|
||||
<ul>
|
||||
<li>Drag-and-drop workflow editor</li>
|
||||
<li>Visual representation of customer journeys</li>
|
||||
<li>Easy workflow modification without coding</li>
|
||||
<li>Template library for common workflows</li>
|
||||
<li>Workflow versioning and testing</li>
|
||||
</ul>
|
||||
<p>This makes workflow creation accessible to business users, not just developers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>MCP Integration in Customer Copilot</h3>
|
||||
<div class="vision-card">
|
||||
<h4>Microsoft Copilot Plugin Architecture</h4>
|
||||
<p>Integration of PowerOn actions as <strong>MCP (Model Context Protocol) plugins</strong> in the customer's Copilot:</p>
|
||||
<ul>
|
||||
<li><strong>Native Copilot Integration:</strong> PowerOn workflows accessible directly from Microsoft Copilot</li>
|
||||
<li><strong>Action Library:</strong> All PowerOn actions available as Copilot plugins</li>
|
||||
<li><strong>Seamless Experience:</strong> Customers use PowerOn capabilities without leaving Copilot</li>
|
||||
<li><strong>Enterprise Workflows:</strong> Complex workflows triggered from simple Copilot conversations</li>
|
||||
<li><strong>Data Privacy:</strong> All PowerOn privacy features work seamlessly in Copilot context</li>
|
||||
</ul>
|
||||
<p class="highlight-text">This enables customers to leverage PowerOn's powerful workflow capabilities directly from their familiar Copilot interface.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Platform Evolution</h3>
|
||||
<div class="vision-grid">
|
||||
<div class="vision-item">
|
||||
<h4>Today</h4>
|
||||
<ul>
|
||||
<li>REST API-based workflows</li>
|
||||
<li>Playground UI</li>
|
||||
<li>Multiple AI providers</li>
|
||||
<li>Standard connectors</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="vision-item">
|
||||
<h4>Near Future</h4>
|
||||
<ul>
|
||||
<li>Graphical workflow editor</li>
|
||||
<li>MCP Copilot integration</li>
|
||||
<li>Enhanced pre-processing</li>
|
||||
<li>Advanced AI selection</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="vision-item">
|
||||
<h4>Future</h4>
|
||||
<ul>
|
||||
<li>AI-powered workflow generation</li>
|
||||
<li>Multi-platform Copilot support</li>
|
||||
<li>Edge computing expansion</li>
|
||||
<li>Federated learning</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Big Picture & Future Vision Diagram</h3>
|
||||
<div class="diagram-image-container">
|
||||
<img src="doc_platform_07_big_picture_and_future_vision.jpg" alt="Big Picture & Future Vision - Platform Evolution from Today to Future" class="diagram-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="integration" class="tab-content">
|
||||
<h2>Integration Guide</h2>
|
||||
|
||||
<div class="section">
|
||||
<h3>REST API</h3>
|
||||
<p class="lead">The platform exposes a comprehensive REST API for all operations. This API serves as the primary integration point for external developers:</p>
|
||||
<ul>
|
||||
<li><strong>Workflow API:</strong> Create, execute, and manage workflows</li>
|
||||
<li><strong>Document API:</strong> Upload, download, and process documents</li>
|
||||
<li><strong>Connection API:</strong> Manage external connections (SharePoint, Outlook, etc.)</li>
|
||||
<li><strong>RBAC API:</strong> Manage roles and permissions</li>
|
||||
<li><strong>Options API:</strong> Dynamic options for UI components</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Building Blocks for Developers</h3>
|
||||
<p class="lead">Developers can extend the platform by creating custom components in these areas:</p>
|
||||
<div class="building-blocks">
|
||||
<div class="block">
|
||||
<h4>Workflow Methods</h4>
|
||||
<p>Create custom workflow methods by extending <code>MethodBase</code> and registering actions.</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h4>Services</h4>
|
||||
<p>Extend the services layer by creating new service modules following the existing pattern.</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h4>Connectors</h4>
|
||||
<p>Build connectors for external systems (databases, APIs, services) using the connector interface.</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h4>UI Components</h4>
|
||||
<p>Create React components that integrate with the REST API and respect RBAC rules.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Development Workflow</h3>
|
||||
<p class="lead">Follow these steps to get started with platform development:</p>
|
||||
<ol>
|
||||
<li><strong>Understand the Architecture:</strong> Review this document and codebase structure</li>
|
||||
<li><strong>Set Up Development Environment:</strong> Clone repository and configure local environment</li>
|
||||
<li><strong>Choose Integration Point:</strong> Decide whether to extend workflows, services, or UI</li>
|
||||
<li><strong>Follow Patterns:</strong> Use existing code as reference for consistent implementation</li>
|
||||
<li><strong>Test with RBAC:</strong> Ensure your changes respect RBAC rules</li>
|
||||
<li><strong>Document:</strong> Update documentation for your changes</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Key Integration Points</h3>
|
||||
<p class="lead">Main directories where developers can add new functionality:</p>
|
||||
<ul>
|
||||
<li><code>gateway/modules/workflows/methods/</code> - Add new workflow methods</li>
|
||||
<li><code>gateway/modules/services/</code> - Add new microservices</li>
|
||||
<li><code>gateway/modules/connectors/</code> - Add new connectors</li>
|
||||
<li><code>gateway/modules/routes/</code> - Add new API endpoints</li>
|
||||
<li><code>gateway/modules/features/</code> - Add new features</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 PowerON. All rights reserved.</p>
|
||||
<p>Platform Architecture Documentation v1.0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openTab(evt, tabName) {
|
||||
var i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tab-content");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].classList.remove("active");
|
||||
}
|
||||
tablinks = document.getElementsByClassName("tab-button");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].classList.remove("active");
|
||||
}
|
||||
document.getElementById(tabName).classList.add("active");
|
||||
evt.currentTarget.classList.add("active");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
484
strategy/doc_platform_diagrams.md
Normal file
484
strategy/doc_platform_diagrams.md
Normal file
|
|
@ -0,0 +1,484 @@
|
|||
# PowerON Platform Architecture Diagrams
|
||||
|
||||
This document contains all Mermaid diagrams visualizing the PowerON platform architecture, components, and workflows. These diagrams can be rendered in any Mermaid-compatible viewer or exported as images for documentation purposes.
|
||||
|
||||
---
|
||||
|
||||
## 1. Platform Overview
|
||||
|
||||
This diagram shows the overall architecture of the PowerON platform, including the UI layer, API, workflow engine, microservices, and the customer tenant with pre-processing engine.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "PowerON Platform Architecture"
|
||||
UI[UI Layer<br/>Playground, Chatbots, Customer UIs]
|
||||
API[REST API<br/>Open API Design]
|
||||
WF[Workflow Engine<br/>Tasks & Actions Orchestration]
|
||||
MS[Microservices Layer<br/>AI, Processing, Integration]
|
||||
DB[(Multi-Tenant Database<br/>RBAC Access Control)]
|
||||
end
|
||||
|
||||
subgraph "Customer Tenant"
|
||||
PRE[Pre-Processing Engine<br/>On-Premise/Edge]
|
||||
DATA[Customer Data Sources<br/>SharePoint, Outlook, etc.]
|
||||
end
|
||||
|
||||
subgraph "Plug & Play Components"
|
||||
RENDER[Dynamic Renderers<br/>PDF, DOCX, XLSX, etc.]
|
||||
AI_SEL[Dynamic AI Selection<br/>Analysis, Generate, Web, Plan]
|
||||
end
|
||||
|
||||
UI --> API
|
||||
API --> WF
|
||||
WF --> MS
|
||||
MS --> DB
|
||||
MS --> RENDER
|
||||
MS --> AI_SEL
|
||||
PRE -->|Secure API| API
|
||||
DATA --> PRE
|
||||
|
||||
style UI fill:#4B73FF,color:#fff
|
||||
style API fill:#4B73FF,color:#fff
|
||||
style WF fill:#FF6B6B,color:#fff
|
||||
style MS fill:#51CF66,color:#fff
|
||||
style DB fill:#FFD93D,color:#000
|
||||
style PRE fill:#A78BFA,color:#fff
|
||||
style DATA fill:#A78BFA,color:#fff
|
||||
style RENDER fill:#51CF66,color:#fff
|
||||
style AI_SEL fill:#51CF66,color:#fff
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Customer Story
|
||||
|
||||
This diagram illustrates the customer journey from application-centric to data-centric work, showing the four key steps: identification, MVP integration, pre-processing deployment, and transformation.
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
subgraph "Step 1: Identification"
|
||||
ID[Identify Customer Journey<br/>Business Process Analysis]
|
||||
end
|
||||
|
||||
subgraph "Step 2: MVP Integration"
|
||||
MVP[MVP Integration<br/>Data Privacy & Compliance Focus]
|
||||
NEUT[Privacy Neutralizer<br/>DSGVO/GDPR Compliant]
|
||||
SEC[Secure Connections<br/>Encrypted Data Sources]
|
||||
end
|
||||
|
||||
subgraph "Step 3: Pre-Processing"
|
||||
PRE[Pre-Processing Engine<br/>Standard API Deployment]
|
||||
EDGE[On-Premise/Edge<br/>Local Processing]
|
||||
end
|
||||
|
||||
subgraph "Step 4: Transformation"
|
||||
OLD[Application-Centric<br/>❌ Work within Apps<br/>❌ Manual Transfer<br/>❌ Data Silos]
|
||||
NEW[Data-Centric<br/>✅ Work with Data<br/>✅ Auto Integration<br/>✅ Unified View]
|
||||
end
|
||||
|
||||
ID --> MVP
|
||||
MVP --> NEUT
|
||||
MVP --> SEC
|
||||
MVP --> PRE
|
||||
PRE --> EDGE
|
||||
EDGE --> OLD
|
||||
OLD -->|Transformation| NEW
|
||||
|
||||
style ID fill:#4B73FF,color:#fff
|
||||
style MVP fill:#51CF66,color:#fff
|
||||
style NEUT fill:#FF6B6B,color:#fff
|
||||
style SEC fill:#FF6B6B,color:#fff
|
||||
style PRE fill:#A78BFA,color:#fff
|
||||
style EDGE fill:#A78BFA,color:#fff
|
||||
style OLD fill:#FFD93D,color:#000
|
||||
style NEW fill:#51CF66,color:#fff
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Workflow System
|
||||
|
||||
This diagram shows the workflow structure (Workflow → Tasks → Actions), execution modes (Learning, Actionplan, Automation), and available methods.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "Workflow Structure"
|
||||
WF[Workflow<br/>Customer Journey]
|
||||
T1[Task 1]
|
||||
T2[Task 2]
|
||||
T3[Task 3]
|
||||
|
||||
A1[Action 1.1]
|
||||
A2[Action 1.2]
|
||||
A3[Action 2.1]
|
||||
A4[Action 3.1]
|
||||
|
||||
WF --> T1
|
||||
WF --> T2
|
||||
WF --> T3
|
||||
|
||||
T1 --> A1
|
||||
T1 --> A2
|
||||
T2 --> A3
|
||||
T3 --> A4
|
||||
end
|
||||
|
||||
subgraph "Execution Modes"
|
||||
LM[Learning Mode<br/>Plan-Act-Observe-Refine<br/>Up to 5 steps]
|
||||
AM[Actionplan Mode<br/>Batch Planning<br/>Sequential Execution]
|
||||
AUTO[Automation Mode<br/>Scheduled/Event-Triggered<br/>Production Workflows]
|
||||
end
|
||||
|
||||
subgraph "Available Methods"
|
||||
AI_M[ai.*<br/>process, analyze, generate]
|
||||
SP_M[sharepoint.*<br/>search, read, upload]
|
||||
OUT_M[outlook.*<br/>read, send emails]
|
||||
CTX_M[context.*<br/>get, set context]
|
||||
end
|
||||
|
||||
A1 --> AI_M
|
||||
A2 --> SP_M
|
||||
A3 --> OUT_M
|
||||
A4 --> CTX_M
|
||||
|
||||
WF -.->|Mode Selection| LM
|
||||
WF -.->|Mode Selection| AM
|
||||
WF -.->|Mode Selection| AUTO
|
||||
|
||||
style WF fill:#4B73FF,color:#fff
|
||||
style T1 fill:#51CF66,color:#fff
|
||||
style T2 fill:#51CF66,color:#fff
|
||||
style T3 fill:#51CF66,color:#fff
|
||||
style A1 fill:#FFD93D,color:#000
|
||||
style A2 fill:#FFD93D,color:#000
|
||||
style A3 fill:#FFD93D,color:#000
|
||||
style A4 fill:#FFD93D,color:#000
|
||||
style LM fill:#A78BFA,color:#fff
|
||||
style AM fill:#A78BFA,color:#fff
|
||||
style AUTO fill:#A78BFA,color:#fff
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Microservices Architecture
|
||||
|
||||
This diagram shows the complete microservices structure, organized into Core Services, AI & Processing, Integration Services, and Security, with their relationships and dependencies.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "Core Services"
|
||||
CHAT[self.services.chat<br/>Chat & Conversation]
|
||||
WF_SVC[self.services.workflow<br/>Workflow State]
|
||||
UTILS[self.services.utils<br/>Utilities]
|
||||
end
|
||||
|
||||
subgraph "AI & Processing"
|
||||
AI[self.services.ai<br/>AI Model Management]
|
||||
GEN[self.services.generation<br/>Document Generation<br/>PDF, DOCX, XLSX, etc.]
|
||||
EXT[self.services.extraction<br/>Document Extraction<br/>Multiple Extractors]
|
||||
NEUT_SVC[self.services.neutralization<br/>Privacy Neutralization<br/>PII Detection]
|
||||
end
|
||||
|
||||
subgraph "Integration Services"
|
||||
SP[self.services.sharepoint<br/>SharePoint Integration]
|
||||
WEB[self.services.web<br/>Web Operations]
|
||||
TICKET[self.services.ticket<br/>Jira, ClickUp, etc.]
|
||||
end
|
||||
|
||||
subgraph "Security"
|
||||
SEC_SVC[self.services.security<br/>Auth, Authorization<br/>Token Management]
|
||||
end
|
||||
|
||||
CHAT --> AI
|
||||
CHAT --> GEN
|
||||
CHAT --> EXT
|
||||
WF_SVC --> AI
|
||||
GEN --> EXT
|
||||
EXT --> NEUT_SVC
|
||||
SP --> SEC_SVC
|
||||
WEB --> SEC_SVC
|
||||
TICKET --> SEC_SVC
|
||||
|
||||
style CHAT fill:#4B73FF,color:#fff
|
||||
style WF_SVC fill:#4B73FF,color:#fff
|
||||
style UTILS fill:#4B73FF,color:#fff
|
||||
style AI fill:#51CF66,color:#fff
|
||||
style GEN fill:#51CF66,color:#fff
|
||||
style EXT fill:#51CF66,color:#fff
|
||||
style NEUT_SVC fill:#FF6B6B,color:#fff
|
||||
style SP fill:#A78BFA,color:#fff
|
||||
style WEB fill:#A78BFA,color:#fff
|
||||
style TICKET fill:#A78BFA,color:#fff
|
||||
style SEC_SVC fill:#FFD93D,color:#000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. RBAC System
|
||||
|
||||
This diagram visualizes the Role-Based Access Control system, showing context types (DATA, UI, RESOURCE), access levels (none, my, group, all), view logic, and rule hierarchy.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "RBAC Contexts"
|
||||
DATA[DATA Context<br/>Tables & Fields]
|
||||
UI_CTX[UI Context<br/>Components & Features]
|
||||
RES[RESOURCE Context<br/>AI Models, Actions]
|
||||
end
|
||||
|
||||
subgraph "Access Levels - Opening Logic"
|
||||
N[none - n<br/>No Access]
|
||||
M[my - m<br/>My Records]
|
||||
G[group - g<br/>Group Records]
|
||||
A[all - a<br/>All Records]
|
||||
end
|
||||
|
||||
subgraph "View Logic"
|
||||
V_TRUE[view: true<br/>Visible/Enabled]
|
||||
V_FALSE[view: false<br/>Hidden/Disabled]
|
||||
end
|
||||
|
||||
subgraph "Rule Hierarchy"
|
||||
GEN_RULE[Generic Rules<br/>item = null]
|
||||
SPEC_RULE[Specific Rules<br/>item = 'table.field']
|
||||
end
|
||||
|
||||
DATA --> N
|
||||
DATA --> M
|
||||
DATA --> G
|
||||
DATA --> A
|
||||
|
||||
DATA --> V_TRUE
|
||||
UI_CTX --> V_TRUE
|
||||
RES --> V_TRUE
|
||||
|
||||
DATA --> V_FALSE
|
||||
UI_CTX --> V_FALSE
|
||||
RES --> V_FALSE
|
||||
|
||||
GEN_RULE --> SPEC_RULE
|
||||
|
||||
style DATA fill:#4B73FF,color:#fff
|
||||
style UI_CTX fill:#51CF66,color:#fff
|
||||
style RES fill:#A78BFA,color:#fff
|
||||
style N fill:#FF6B6B,color:#fff
|
||||
style M fill:#FFD93D,color:#000
|
||||
style G fill:#51CF66,color:#fff
|
||||
style A fill:#4B73FF,color:#fff
|
||||
style V_TRUE fill:#51CF66,color:#fff
|
||||
style V_FALSE fill:#FF6B6B,color:#fff
|
||||
style GEN_RULE fill:#FFD93D,color:#000
|
||||
style SPEC_RULE fill:#4B73FF,color:#fff
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. UI Architecture
|
||||
|
||||
This diagram shows the UI layer structure, RBAC-driven configuration, REST API integration, and available UI components.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "UI Layer"
|
||||
PLAY[Playground UI<br/>React-based Main Entry]
|
||||
CHAT_UI[Chatbots<br/>Custom Chat Interfaces]
|
||||
CUST_UI[Customer UIs<br/>Tenant-Specific UIs]
|
||||
end
|
||||
|
||||
subgraph "RBAC-Driven Configuration"
|
||||
TENANT[Per Tenant<br/>Configuration]
|
||||
USER[Per User<br/>Configuration]
|
||||
COMP[Component-Level<br/>Visibility]
|
||||
FEAT[Feature-Level<br/>Access Control]
|
||||
end
|
||||
|
||||
subgraph "REST API"
|
||||
API[REST API<br/>Standardized Interface]
|
||||
end
|
||||
|
||||
subgraph "UI Components"
|
||||
CHAT_COMP[Chat Interface]
|
||||
DOC_COMP[Document Viewer/Editor]
|
||||
WF_COMP[Workflow Editor]
|
||||
CONN_COMP[Connection Manager]
|
||||
SETT_COMP[Settings Panels]
|
||||
DASH_COMP[Dashboard Widgets]
|
||||
end
|
||||
|
||||
PLAY --> API
|
||||
CHAT_UI --> API
|
||||
CUST_UI --> API
|
||||
|
||||
TENANT --> COMP
|
||||
USER --> COMP
|
||||
COMP --> FEAT
|
||||
|
||||
FEAT --> CHAT_COMP
|
||||
FEAT --> DOC_COMP
|
||||
FEAT --> WF_COMP
|
||||
FEAT --> CONN_COMP
|
||||
FEAT --> SETT_COMP
|
||||
FEAT --> DASH_COMP
|
||||
|
||||
PLAY --> CHAT_COMP
|
||||
PLAY --> DOC_COMP
|
||||
PLAY --> WF_COMP
|
||||
|
||||
style PLAY fill:#4B73FF,color:#fff
|
||||
style CHAT_UI fill:#51CF66,color:#fff
|
||||
style CUST_UI fill:#51CF66,color:#fff
|
||||
style API fill:#FF6B6B,color:#fff
|
||||
style TENANT fill:#A78BFA,color:#fff
|
||||
style USER fill:#A78BFA,color:#fff
|
||||
style COMP fill:#FFD93D,color:#000
|
||||
style FEAT fill:#FFD93D,color:#000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Big Picture & Future Vision
|
||||
|
||||
This diagram shows the platform evolution from today to the future, including vendor independence, graphical workflow modeling, MCP integration, and future capabilities.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "Vendor Independence"
|
||||
AI_PROV[AI Providers<br/>OpenAI, Anthropic, Google, Azure]
|
||||
CONN_PROV[Connectors<br/>Microsoft, Google, Amazon, Others]
|
||||
end
|
||||
|
||||
subgraph "Today"
|
||||
REST[REST API Workflows]
|
||||
PLAY_TODAY[Playground UI]
|
||||
MULT_AI[Multiple AI Providers]
|
||||
STD_CONN[Standard Connectors]
|
||||
end
|
||||
|
||||
subgraph "Near Future"
|
||||
GRAPH[Graphical Workflow Editor<br/>Drag & Drop]
|
||||
MCP[MCP Copilot Integration<br/>Microsoft Copilot]
|
||||
PRE_ENH[Enhanced Pre-Processing]
|
||||
AI_SEL_ENH[Advanced AI Selection]
|
||||
end
|
||||
|
||||
subgraph "Future Vision"
|
||||
AI_WF[AI-Powered Workflow Generation]
|
||||
MULT_COP[Multi-Platform Copilot Support]
|
||||
EDGE_EXP[Edge Computing Expansion]
|
||||
FED_LEARN[Federated Learning]
|
||||
end
|
||||
|
||||
REST --> GRAPH
|
||||
PLAY_TODAY --> GRAPH
|
||||
MULT_AI --> AI_PROV
|
||||
STD_CONN --> CONN_PROV
|
||||
|
||||
GRAPH --> AI_WF
|
||||
MCP --> MULT_COP
|
||||
PRE_ENH --> EDGE_EXP
|
||||
AI_SEL_ENH --> FED_LEARN
|
||||
|
||||
style AI_PROV fill:#4B73FF,color:#fff
|
||||
style CONN_PROV fill:#51CF66,color:#fff
|
||||
style REST fill:#FFD93D,color:#000
|
||||
style PLAY_TODAY fill:#FFD93D,color:#000
|
||||
style GRAPH fill:#A78BFA,color:#fff
|
||||
style MCP fill:#A78BFA,color:#fff
|
||||
style AI_WF fill:#51CF66,color:#fff
|
||||
style MULT_COP fill:#51CF66,color:#fff
|
||||
style EDGE_EXP fill:#4B73FF,color:#fff
|
||||
style FED_LEARN fill:#4B73FF,color:#fff
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Integration Guide
|
||||
|
||||
This diagram shows the REST API endpoints, building blocks for developers, integration points in the codebase, and the development workflow.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "REST API Endpoints"
|
||||
WF_API[Workflow API<br/>Create, Execute, Manage]
|
||||
DOC_API[Document API<br/>Upload, Download, Process]
|
||||
CONN_API[Connection API<br/>SharePoint, Outlook, etc.]
|
||||
RBAC_API[RBAC API<br/>Roles & Permissions]
|
||||
OPT_API[Options API<br/>Dynamic UI Options]
|
||||
end
|
||||
|
||||
subgraph "Building Blocks"
|
||||
WF_METH[Workflow Methods<br/>Extend MethodBase]
|
||||
SERVICES[Services<br/>New Service Modules]
|
||||
CONNECTORS[Connectors<br/>External Systems]
|
||||
UI_COMP[UI Components<br/>React Components]
|
||||
end
|
||||
|
||||
subgraph "Integration Points"
|
||||
WF_DIR[gateway/modules/workflows/methods/]
|
||||
SVC_DIR[gateway/modules/services/]
|
||||
CONN_DIR[gateway/modules/connectors/]
|
||||
ROUTE_DIR[gateway/modules/routes/]
|
||||
FEAT_DIR[gateway/modules/features/]
|
||||
end
|
||||
|
||||
subgraph "Development Workflow"
|
||||
ARCH[Understand Architecture]
|
||||
SETUP[Set Up Environment]
|
||||
CHOOSE[Choose Integration Point]
|
||||
PATTERN[Follow Patterns]
|
||||
TEST[Test with RBAC]
|
||||
DOC[Document Changes]
|
||||
end
|
||||
|
||||
WF_API --> WF_METH
|
||||
DOC_API --> SERVICES
|
||||
CONN_API --> CONNECTORS
|
||||
RBAC_API --> UI_COMP
|
||||
OPT_API --> UI_COMP
|
||||
|
||||
WF_METH --> WF_DIR
|
||||
SERVICES --> SVC_DIR
|
||||
CONNECTORS --> CONN_DIR
|
||||
UI_COMP --> ROUTE_DIR
|
||||
UI_COMP --> FEAT_DIR
|
||||
|
||||
ARCH --> SETUP
|
||||
SETUP --> CHOOSE
|
||||
CHOOSE --> PATTERN
|
||||
PATTERN --> TEST
|
||||
TEST --> DOC
|
||||
|
||||
style WF_API fill:#4B73FF,color:#fff
|
||||
style DOC_API fill:#4B73FF,color:#fff
|
||||
style CONN_API fill:#4B73FF,color:#fff
|
||||
style RBAC_API fill:#4B73FF,color:#fff
|
||||
style OPT_API fill:#4B73FF,color:#fff
|
||||
style WF_METH fill:#51CF66,color:#fff
|
||||
style SERVICES fill:#51CF66,color:#fff
|
||||
style CONNECTORS fill:#51CF66,color:#fff
|
||||
style UI_COMP fill:#51CF66,color:#fff
|
||||
style ARCH fill:#FFD93D,color:#000
|
||||
style SETUP fill:#FFD93D,color:#000
|
||||
style CHOOSE fill:#FFD93D,color:#000
|
||||
style PATTERN fill:#FFD93D,color:#000
|
||||
style TEST fill:#FFD93D,color:#000
|
||||
style DOC fill:#FFD93D,color:#000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Usage Notes
|
||||
|
||||
- These diagrams can be rendered in any Mermaid-compatible viewer (e.g., mermaid.live, GitHub, GitLab, VS Code with Mermaid extension)
|
||||
- To export as images, use a Mermaid renderer or online tool like mermaid.live
|
||||
- Each diagram corresponds to a tab in the main documentation (`doc_platform_big_picture.html`)
|
||||
- The color scheme is consistent across all diagrams:
|
||||
- Blue (#4B73FF): Core/Platform components
|
||||
- Green (#51CF66): Processing/AI components
|
||||
- Red (#FF6B6B): Security/Critical components
|
||||
- Yellow (#FFD93D): Development/Workflow steps
|
||||
- Purple (#A78BFA): Integration/Customer components
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2025*
|
||||
BIN
strategy/logo2.png
Normal file
BIN
strategy/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
229
ui_playground/doc_frontend_options_usage.md
Normal file
229
ui_playground/doc_frontend_options_usage.md
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
# Frontend Options Usage Guide
|
||||
|
||||
## Overview
|
||||
|
||||
The `frontend_options` attribute in Pydantic `Field` definitions supports **two formats** for providing options to frontend select/multiselect fields:
|
||||
|
||||
1. **Static List**: Predefined list of options
|
||||
2. **String Reference**: Dynamic options fetched from the Options API
|
||||
|
||||
## Type System
|
||||
|
||||
The type system is defined in `gateway/modules/shared/frontendOptionsTypes.py`:
|
||||
|
||||
```python
|
||||
from modules.shared.frontendOptionsTypes import FrontendOptions, OptionItem
|
||||
|
||||
# FrontendOptions is Union[List[OptionItem], str]
|
||||
# OptionItem is Dict[str, Any] with "value" and "label" keys
|
||||
```
|
||||
|
||||
## Format 1: Static List
|
||||
|
||||
Use static lists for fixed, predefined options that don't change based on user context.
|
||||
|
||||
### Example
|
||||
|
||||
```python
|
||||
from pydantic import Field
|
||||
from typing import List
|
||||
|
||||
language: str = Field(
|
||||
default="en",
|
||||
description="Preferred language",
|
||||
json_schema_extra={
|
||||
"frontend_type": "select",
|
||||
"frontend_readonly": False,
|
||||
"frontend_required": True,
|
||||
"frontend_options": [
|
||||
{"value": "en", "label": {"en": "English", "fr": "Anglais"}},
|
||||
{"value": "fr", "label": {"en": "Français", "fr": "Français"}},
|
||||
{"value": "de", "label": {"en": "Deutsch", "fr": "Allemand"}},
|
||||
]
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### When to Use Static Lists
|
||||
|
||||
- Options are fixed constants (e.g., enum values)
|
||||
- Options don't require database queries
|
||||
- Options are the same for all users
|
||||
- Options are simple and don't change frequently
|
||||
|
||||
## Format 2: String Reference
|
||||
|
||||
Use string references for dynamic options that come from the database or are context-aware.
|
||||
|
||||
### Example
|
||||
|
||||
```python
|
||||
from pydantic import Field
|
||||
from typing import List
|
||||
|
||||
roleLabels: List[str] = Field(
|
||||
default_factory=list,
|
||||
description="List of role labels",
|
||||
json_schema_extra={
|
||||
"frontend_type": "multiselect",
|
||||
"frontend_readonly": False,
|
||||
"frontend_required": True,
|
||||
"frontend_options": "user.role" # String reference
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### When to Use String References
|
||||
|
||||
- Options come from the database (e.g., user connections)
|
||||
- Options are context-aware (filtered by current user's permissions)
|
||||
- Options need centralized management
|
||||
- Options may change frequently
|
||||
- Options depend on user context or permissions
|
||||
|
||||
### Frontend Integration
|
||||
|
||||
When the frontend encounters a string reference:
|
||||
|
||||
1. **Detect**: Check if `frontend_options` is a string (not a list)
|
||||
2. **Fetch**: Call `GET /api/options/{optionsName}` (e.g., `/api/options/user.role`)
|
||||
3. **Use**: Use the returned options for the select/multiselect field
|
||||
|
||||
**Example Frontend Code**:
|
||||
```typescript
|
||||
// Pseudocode
|
||||
if (typeof field.frontend_options === 'string') {
|
||||
// Dynamic options - fetch from API
|
||||
const options = await fetch(`/api/options/${field.frontend_options}`);
|
||||
return options;
|
||||
} else {
|
||||
// Static options - use directly
|
||||
return field.frontend_options;
|
||||
}
|
||||
```
|
||||
|
||||
## Available Option Names
|
||||
|
||||
| Option Name | Description | Context-Aware |
|
||||
|-------------|-------------|---------------|
|
||||
| `user.role` | Standard role options (sysadmin, admin, user, viewer) | No |
|
||||
| `auth.authority` | Authentication authority options (local, google, msft) | No |
|
||||
| `connection.status` | Connection status options (active, inactive, expired, error) | No |
|
||||
| `user.connection` | User's connections (fetched from database) | Yes (requires currentUser) |
|
||||
|
||||
## Utility Functions
|
||||
|
||||
The `frontendOptionsTypes` module provides utility functions:
|
||||
|
||||
```python
|
||||
from modules.shared.frontendOptionsTypes import (
|
||||
isStringReference,
|
||||
isStaticList,
|
||||
validateFrontendOptions,
|
||||
getOptionsName,
|
||||
getStaticOptions
|
||||
)
|
||||
|
||||
# Check format
|
||||
if isStringReference(frontend_options):
|
||||
optionsName = getOptionsName(frontend_options)
|
||||
# Fetch from API: /api/options/{optionsName}
|
||||
elif isStaticList(frontend_options):
|
||||
options = getStaticOptions(frontend_options)
|
||||
# Use directly
|
||||
|
||||
# Validate format
|
||||
if not validateFrontendOptions(frontend_options):
|
||||
raise ValueError("Invalid frontend_options format")
|
||||
```
|
||||
|
||||
## Validation
|
||||
|
||||
The `validateFrontendOptions()` function ensures:
|
||||
|
||||
1. **String References**: Non-empty string
|
||||
2. **Static Lists**:
|
||||
- List of dictionaries
|
||||
- Each dictionary has `"value"` and `"label"` keys
|
||||
- `"label"` is a dictionary (multilingual labels)
|
||||
|
||||
## Examples in Codebase
|
||||
|
||||
### Static List Example
|
||||
```python
|
||||
# datamodelUam.py - Language field
|
||||
language: str = Field(
|
||||
default="en",
|
||||
json_schema_extra={
|
||||
"frontend_options": [
|
||||
{"value": "en", "label": {"en": "English", "fr": "Anglais"}},
|
||||
{"value": "fr", "label": {"en": "Français", "fr": "Français"}},
|
||||
]
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### String Reference Example
|
||||
```python
|
||||
# datamodelUam.py - Role labels field
|
||||
roleLabels: List[str] = Field(
|
||||
default_factory=list,
|
||||
json_schema_extra={
|
||||
"frontend_options": "user.role" # Dynamic - fetched from API
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### Mixed Example
|
||||
```python
|
||||
# datamodelRbac.py - AccessRule model
|
||||
roleLabel: str = Field(
|
||||
json_schema_extra={
|
||||
"frontend_options": "user.role" # String reference
|
||||
}
|
||||
)
|
||||
|
||||
context: AccessRuleContext = Field(
|
||||
json_schema_extra={
|
||||
"frontend_options": [ # Static list
|
||||
{"value": "DATA", "label": {"en": "Data", "fr": "Données"}},
|
||||
{"value": "UI", "label": {"en": "UI", "fr": "Interface"}},
|
||||
{"value": "RESOURCE", "label": {"en": "Resource", "fr": "Ressource"}}
|
||||
]
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use Static Lists** for:
|
||||
- Enum values
|
||||
- Fixed constants
|
||||
- Simple options that don't change
|
||||
|
||||
2. **Use String References** for:
|
||||
- Database-driven options
|
||||
- Context-aware options
|
||||
- Options that need centralized management
|
||||
|
||||
3. **Always validate** frontend_options format when processing
|
||||
|
||||
4. **Document** which format is used and why in field descriptions
|
||||
|
||||
5. **Frontend**: Always check the type before using options
|
||||
|
||||
## Migration Guide
|
||||
|
||||
If you have existing static lists that should become dynamic:
|
||||
|
||||
1. **Create Options Provider**: Add option logic to `gateway/modules/features/options/mainOptions.py`
|
||||
2. **Register Option Name**: Add to `getAvailableOptionsNames()` function
|
||||
3. **Update Field**: Change `frontend_options` from list to string reference
|
||||
4. **Update Frontend**: Ensure frontend handles string references correctly
|
||||
|
||||
## See Also
|
||||
|
||||
- `gateway/modules/shared/frontendOptionsTypes.py` - Type definitions and utilities
|
||||
- `gateway/modules/features/options/mainOptions.py` - Options API implementation
|
||||
- `gateway/modules/routes/routeOptions.py` - Options API endpoints
|
||||
- `wiki/appdoc/doc_security_role_based_access.md` - RBAC documentation with frontend_options examples
|
||||
Loading…
Reference in a new issue