A comprehensive React-based web application for managing and visualizing qontract-reconcile (app-interface) resources. This application provides an intuitive interface for browsing services, clusters, namespaces, users, permissions, and various organizational resources.

• Services: View application services with detailed information
• Infrastructure Overview: Browse clusters, namespaces, and their configurations
• User & Access Control: View users, roles, and permissions
• Cloud Resources: Handle AWS accounts, AWS groups, and related configurations
• Integrations: View system integrations and upstream connections
• Organization: View GitHub organizations, Quay organizations, and Jenkins instances
• Dependencies: View system dependencies and external service configurations
• Notifications: View email notifications and recipient configurations
• Score Cards: View application score cards and acceptance criteria
• Search & Navigation: Real-time search functionality across all resource types
• Responsive Design: Mobile-friendly interface with collapsible sidebar
• Theme Support: Light and dark theme switching

• Frontend: React 18 with TypeScript
• UI Framework: PatternFly React v6
• GraphQL Client: Apollo Client
• Routing: React Router v6
• Styling: CSS-in-JS with PatternFly theming

• Node.js (version 16 or higher)
• npm or yarn package manager

1. Clone the repository:

git clone <repository-url>
cd visual-app-interface

2. Install dependencies:

npm install

3. Set up environment variables by creating a .env file:

# Copy the example environment file
cp .env.example .env

# Edit the .env file with your configuration
REACT_APP_GRAPHQL_URI=<your-graphql-endpoint>
REACT_APP_DATA_DIR_URL=<your-data-directory-url>
REACT_APP_DOCS_DIR_URL=<your-docs-directory-url>
REACT_APP_SCHEMAS_DIR=<your-schemas-directory-url>
REACT_APP_GRAFANA_URL=<your-grafana-url>

Start qontract-reconcile server:

See https://github.com/app-sre/qontract-reconcile for details

Start the development server:

npm start

The application will open in your browser at http://localhost:3000.

Create a production build:

npm run build

The build artifacts will be stored in the build/ directory.

src/
├── components/          # Reusable React components
├── contexts/           # React context providers
├── lib/               # Utility libraries and configurations
├── pages/             # Page components for each route
├── theme.css          # Custom theme and styling
└── App.tsx            # Main application component

• npm start - Runs the app in development mode
• npm run build - Builds the app for production
• npm test - Launches the test runner
• npm run eject - Ejects from Create React App (irreversible)

Contributions are welcome! Please feel free to submit a Pull Request.

• Claude - AI Assistant by Anthropic - Initial development and comprehensive feature implementation

This project is licensed under Apache License - see the LICENSE file for details.