Enopax Resource API Frontend

A lightweight, frontend-only platform for managing cloud resources through Resource APIs

---

Purpose

Enopax Resource API Frontend is a demonstration and development tool that connects to Resource APIs to enable users to provision and manage cloud resources. It provides an intuitive interface for:

• Organizing Resources: Three-level hierarchy (Organization → Project → Resource)
• Managing Access: Project-level SSH key management with automatic provisioning
• Discovering Providers: Dynamic provider discovery via standardized REST APIs
• Provisioning Resources: Simple forms driven by provider-defined schemas
• Accessing Custom UIs: Seamless SSO to provider-specific management interfaces

This platform is designed for:

• Local development and testing of provider APIs
• Demos and proof-of-concepts
• Understanding the Resource API pattern
• Internal tools in trusted environments

Note: This is a frontend-only application with no authentication. All data is stored in browser localStorage. Not suitable for production use.

Features

• Organization Management: Create and manage organizations with readable URLs
• Project Management: Create projects within organizations with SSH key management
• Slug-based Routing: Clean, readable URLs using slugified names (e.g., my_org/my_project)
• Duplicate Prevention: Organizations and projects enforce unique names (case-insensitive)
• Provider Discovery: Automatically discover providers from configured API endpoints
• Resource Provisioning: Provision resources through provider APIs with custom configurations
• SSH Key Management: Add and manage SSH keys for secure resource access
• Custom Endpoints: Execute custom provider endpoints with token-based authentication
• Persistent Storage: All data stored in browser localStorage

Architecture

TypeScript Interfaces (src/types/index.ts)

• Organization: Organization data structure
• Project: Project with SSH keys
• Resource: Provisioned resources
• Provider: Provider information from API
• ProviderConfig: Resource API configuration
• ProvisionRequest: Resource provisioning request

Provider Configuration (src/config/providers.ts)

Configure provider API endpoints:

{
  url: 'http://localhost:3001',
  apiKey: undefined // Optional API key
}

State Management (Pinia Stores)

Organization Store (src/stores/organization.ts)

• Create, read, update, delete organizations
• localStorage persistence

Project Store (src/stores/project.ts)

• Manage projects per organization
• SSH key management (add/remove)
• localStorage persistence

Provider Store (src/stores/provider.ts)

• Discover providers from /providers/info endpoint
• Cache provider information
• Provider configuration management

Resource Store (src/stores/resource.ts)

• Provision resources via POST to /resources
• Delete resources via DELETE to /resources/:id
• Call custom endpoints via /token endpoint
• localStorage persistence

Routing (src/router/index.ts)

• / - Home (organization list)
• /:orgSlug - Organization view (project list)
• /:orgSlug/:projectSlug - Project view (resources, SSH keys, providers)

Note: Routes use slugified names (lowercase, underscores) instead of UUIDs for readable URLs.

Views

HomeView (src/views/HomeView.vue)

• List all organizations
• Create new organizations
• Navigate to organization view
• Delete organizations

OrganizationView (src/views/OrganizationView.vue)

• Display organization details
• List projects in organization
• Create new projects
• Delete projects

ProjectView (src/views/ProjectView.vue)

• Tabbed interface for:
  • Resources: List provisioned resources
  • SSH Keys: Manage project SSH keys
  • Providers: View available providers
• Provision new resources
• View provider custom endpoints

Components

ProviderCard (src/components/ProviderCard.vue)

• Display provider information
• Show capabilities
• Execute custom endpoints with token

ResourceCard (src/components/ResourceCard.vue)

• Display resource details
• Show status with color coding
• Toggle configuration view
• Execute custom endpoints
• Delete resource

SSHKeyManager (src/components/SSHKeyManager.vue)

• Add SSH public keys
• List current keys
• Copy keys to clipboard
• Remove keys

ResourceProvisioner (src/components/ResourceProvisioner.vue)

• Modal form for provisioning resources
• Select provider
• Specify resource type and name
• Add custom configuration fields
• Automatically includes project SSH keys

Main Application

App.vue

• Application layout with header and footer
• Navigation to home
• Router view for content

main.ts

• Initialize Vue app
• Setup Pinia store
• Configure Vue Router
• Mount application

Resource API Integration

The platform expects provider APIs to implement:

GET /providers/info

Returns provider information:

{
  "name": "Provider Name",
  "version": "1.0.0",
  "description": "Provider description",
  "capabilities": ["vm", "container"],
  "customEndpoints": [
    {
      "path": "/console",
      "method": "GET",
      "description": "Open Console",
      "requiresToken": true
    }
  ]
}

POST /resources

Provision a resource (flat structure):

{
  "name": "my-server",
  "sshKeys": ["ssh-rsa AAAA..."],
  "userId": "username",
  "projectId": "my_project",
  "projectName": "My Project",
  "organizationId": "my_org",
  "organisationName": "My Org",
  "customField": "value"
}

Note: SSH keys are sent at the top level. projectId and organizationId contain slugified names (not UUIDs).

Returns:

{
  "id": "resource-id",
  "status": "provisioning"
}

DELETE /resources/:id

Delete a resource

POST /token

Get authenticated URL for custom endpoint:

{
  "endpoint": "/console"
}

Returns:

{
  "url": "https://provider.com/console?token=xyz"
}

Quick Start

See docs/local-setup.md for running both platform and resource-api on localhost.

# Install dependencies
pnpm install

# Start development server (runs on localhost:5173)
pnpm dev

The platform will be available at http://localhost:5173

Usage

1. Create Organization

On the home page, enter an organization name and click "Create Organization".

2. Create Project

Click on your organization, then create a new project within it.

3. Add SSH Keys (Optional)

Switch to the "SSH Keys" tab and add public SSH keys that should have access to resources in this project.

4. Provision Resource

1. Go to the "Resources" tab
2. Click "Provision Resource"
3. Select a provider from the dropdown
4. Fill in the required configuration fields
5. Click "Provision"

The platform will automatically include your project's SSH keys in the resource configuration.

5. Access Custom Endpoints

If a resource has custom endpoints (like "Settings"), click the button to:

1. Request an access token from the provider
2. Open the custom UI in a new tab with JWT authentication
3. Manage resource-specific features

Development

# Install dependencies
pnpm install

# Start dev server (localhost:5173)
pnpm dev

# Type checking
pnpm type-check

# Build for production
pnpm build

# Preview production build
pnpm preview

Technology Stack

• Vue 3: Progressive JavaScript framework
• TypeScript: Type-safe development
• Pinia: State management
• Vue Router: Client-side routing
• Tailwind CSS v4: Utility-first CSS
• Vite: Fast build tool

Configuration

Adding More Providers

Edit src/config/providers.ts:

export const providerConfigs: ProviderConfig[] = [
  {
    url: 'http://localhost:3001',
    apiKey: undefined
  },
  {
    url: 'https://another-provider.com',
    apiKey: 'your-api-key'
  }
]

Path Aliases

The @ alias points to src/:

import { useProjectStore } from '@/stores/project'

Data Persistence

All data is stored in browser localStorage:

• Organizations: platform-organizations (includes name and slug)
• Projects: platform-projects (includes name and slug)
• Resources: platform-resources

Note: Organization and project slugs are generated from names using the slugification utility (src/utils/slugify.ts). Slugs use lowercase letters, numbers, and underscores only.

Clear localStorage to reset all data.

Important Notes

1. Slug-based URLs: Routes use slugified names (e.g., /my_org/my_project) instead of UUIDs for better readability
2. Slugification: Names are converted to lowercase with underscores, handling international characters (see src/utils/slugify.ts)
3. Duplicate Prevention: Organization and project names must be unique (case-insensitive check)
4. SSH Keys: When provisioning resources, all SSH keys from the project are automatically included at the top level of the request
5. Request Structure: POST requests use a flat structure with projectId/organizationId containing slugs, not UUIDs
6. Resource Deletion: Resources delete immediately without confirmation dialog
7. Custom Endpoints: Buttons for custom endpoints call /token endpoint and open the returned URL in a new window
8. Provider Discovery: Providers are discovered on first visit to project view
9. Error Handling: API errors are displayed inline with user-friendly messages
10. Tailwind v4: Using the new Tailwind CSS v4 with @import "tailwindcss" syntax