Landscape UI

The modern web interface for Canonical's Landscape, built with React and TypeScript.

---

• About Landscape
• About this Repository
• Documentation Map
• Getting Started with Local Development
• Technology Stack
• Feedback & Support

---

About Landscape

Canonical Landscape is a comprehensive systems management tool designed to help you monitor, manage, and update your entire Ubuntu estate from a single interface. It provides administrators with a centralized platform for managing physical, virtual, and cloud-based Ubuntu servers.

Landscape is available as a SaaS solution at landscape.canonical.com and as a self-hosted application.

---

About this Repository

This repository contains the source code for the new, modern web interface for Landscape.

This new UI is currently under active development and is intended to replace the legacy UI. Today, both user interfaces still exist within the Landscape product, but the goal of this repository is to incrementally migrate Landscape workflows into this dashboard until the classic interface can be removed.

---

Documentation Map

The repository now includes a small agent- and contributor-facing knowledge base:

• AGENTS.md is the top-level map for agent tooling and quick repo orientation.
• docs/index.md is the index for architecture, frontend conventions, and planning docs.
• docs/testing/index.md defines the repository test layers and test strategy.
• docs/verification/index.md defines the broader verification workflow, including TDD expectations and closed-loop validation.
• Existing root docs such as SECURITY.md, RELEASES.md, and CONTRIBUTING.md remain authoritative for their current subjects.

---

Getting Started with Local Development

Follow these instructions to set up the project on your local machine for development and testing purposes.

Prerequisites

• Node.js (v24 or later recommended)
• pnpm package manager. If you don't have it, you can install it with npm install -g pnpm.

Setup Instructions

1. Clone the repository:

   git clone https://github.com/canonical/landscape-ui.git
   cd landscape-ui

2. Install dependencies:

   pnpm install

3. Configure your environment: Make a copy of the example environment file and rename it to .env.local.

   cp .env.local.example .env.local

   Now, edit .env.local to match your local Landscape setup, providing the necessary API endpoints and credentials.

Running the Development Server

Once the setup is complete, you can start the Vite development server:

pnpm dev

Open the URL provided in your terminal (usually http://localhost:5173) to view the application. The app will automatically reload if you change any of the source files.

Building for Production

To create a production-ready build of the application, run:

pnpm build

This command bundles the app into static files for production in the dist/ directory.

---

Technology Stack

This project is built with a modern, robust set of tools:

• Framework/Library: React
• Language: TypeScript
• Build Tool: Vite
• Package Manager: PNPM
• Data Fetching: React Query
• Unit & Integration Testing: Vitest
• End-to-End Testing: Playwright
• API Mocking: MSW (Mock Service Worker)
• Containerization: Docker

---

Feedback & Support

We welcome your feedback! The best way to share your thoughts, report issues, or request features is through one of the following channels:

• Create an issue directly on our GitHub Issues page.
• Report a bug on our Launchpad project.

---

With ♥ from Canonical