Kiali UI is the frontend component of the Kiali Istio Observability Project, providing a user interface for observing and managing service mesh infrastructure. The repository is written in TypeScript and React, serving as the visualization layer for Istio service mesh monitoring and traffic management. According to the README, the UI has been moved to the main Kiali repository at github.com/kiali/kiali/tree/master/frontend, and this repository now primarily supports versions 1.48 and earlier, though it remains available for reference and legacy deployments.
The application is structured around several core functional areas organized in the src directory. Redux is used for state management with dedicated directories for actions and reducers, while React components form the UI layer. The codebase includes API services for backend communication, configuration modules, and comprehensive TypeScript type definitions. Pages and nested components handle top-level routing and feature-specific interfaces. The styling system relies on PatternFly as the primary UI component framework, with SASS preprocessing for CSS compilation. Assets including images, fonts, and PatternFly resources are organized in dedicated directories.
Development workflow uses Yarn as the package manager with hot-reload capabilities through the yarn start command, which launches a development server on localhost:3000. The development environment supports proxying API requests to a running Kiali instance without requiring code changes to be pushed upstream, enabling rapid iteration during feature development. The README includes specific guidance for Kubernetes setups where Kiali may be configured with a web root path like /kiali.
Testing infrastructure includes both unit tests using Jest with snapshot testing capabilities and integration testing through Cypress. The standard yarn test command runs the test suite, with the -u flag updating snapshots. The project uses Snyk for JavaScript vulnerability scanning, which runs automatically on commits. For macOS developers, watchman installation is required for test execution.
Production builds are generated using yarn build, which bundles artifacts with webpack into the build directory. The project includes tooling to analyze JavaScript library sizes and their proportion of the total bundle, helping developers understand and optimize dependencies. A style guide document provides standards for code styling and component development.
The repository is classified across multiple observability and networking domains including service mesh, network topology, tracing, monitoring, traffic visualization, metrics, microservices monitoring, and Kubernetes integration. These classifications reflect the tool's role in providing comprehensive visibility into Istio service mesh deployments, enabling operators to visualize traffic flows, monitor performance metrics, and manage microservices communication patterns.
