Kiali-ui NPM | npm.io

:toc: macro :toc-title:

toc::[] = Kiali UI

== Introduction

A UI for the Kiali Istio Observability Project

== Quick Start

source,shell

Get the kiali-ui sources

git clone https://github.com/kiali/kiali.git cd kiali/frontend

Install Yarn

npm install -g yarn

Install kiali-ui dependencies

yarn

Start a development server

yarn start

NOTE On some platforms, yarn start may fail with an error like Error: ENOSPC: System limit for number of file watchers reached. To fix this, you need to increase the limit of file watchers on your system. The command may vary depending on the platform, please refer to link:https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers[these instructions].

A new browser window should automatically open. But, if it doesn't then use: http://localhost:3000 (or whatever address is told by the yarn start command).

This launches a development environment that instantly reloads any changes to the browser for rapid development.

== Directory Structure

build: Production build output
public: Home of index.html
src: Source and test code
src/actions: Redux actions
src/app: React top level component
src/assets: Images and other assets
src/components: React Components
src/config: Configuration
src/fonts: Fonts
src/helpers: Utility functions and components
src/img: Patternfly Images
src/pages: Top level pages and nested components
src/reducers: Redux reducers
src/services: Api services
src/store: Redux store definitions
src/styles: Application wide styles
src/types: Typescript definitions for all kinds of types
src/utils: Various Utilities

== Developing

The Kiali UI is a React application written in Typescript.

We use yarn as the package manager, if adding dependencies to package.json make sure you install them with yarn and commit the yarn.lock file.

=== Testing with Kiali

When developing, it is usual to run this application outside of https://github.com/kiali/kiali[kiali].

It is possible to proxy the API requests without having to push the changes to kiali. Add the https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development[proxy] property to package.json with the url of kiali.

source, json

{ "name": "kiali-ui", "version": "0.2.1", "proxy": "http://kiali-istio-system.127.0.0.1.nip.io", "bugs": {

...

For a video on getting a Kiali-ui development environment running please see (complete with tips/tricks):

video::v4MN04nQNCUyoutube

If Kiali is configured with a specific web root, make sure to append it to the URL. On many setups with Kubernetes, the web root will be /kiali by default.

Run yarn start and try it!

source, bash

$ curl -u admin:admin http://localhost:3000/api Namespaces: default istio-system kube-public kube-system myproject openshift openshift-infra openshift-node

Namespace: default Services docker-registry kubernetes router

Service Name: docker-registry Service Labels: docker-registry = default Type: ClusterIP

...

=== Integration Testing

Integration testing is done with cypress. More information can be found link:./cypress/README.mdhere.

=== Styling https://www.patternfly.org/[PatternFly] is the main UI components framework. It defines style based on SASS preprocessor. All Patternfly build assets are copied to src. Any React component may have its related SCSS file (such as App.scss - this one includes all PatternFly Sass along with PatternFly React Sass extensions). Once Sass compiles, the resulting CSS can be found next to its SCSS counterpart (ex: src/app/App.css).

To compile CSS, run:

source,shell

yarn build-css

Note: Only static assets which are import 'ed into your application will be included in your resulting build output.

=== Style Code Guide

See the link:https://github.com/kiali/kiali/blob/master/STYLE_GUIDE.adoc#frontend-typescript[STYLE CODE GUIDE file].

=== Testing To run the tests, the standard command yarn test is valid, but since some tests are using link:https://facebook.github.io/jest/docs/en/snapshot-testing.html[snapshots] the preferred command is to update them in the same time:

source,shell

yarn test -u

Then hit a to run all tests.

After running the tests, if any snapshot has been modified (check git status), the diff should be reviewed to make sure it's an intentional or trivial change. Modified snapshots must be part of the commit so that they're reviewed collectively and won't make CI build fail.

Note: for OS/X users testing requires watchman to be installed

source,shell

brew install watchman

== Testing Libraries for Vulnerabilities We use github Dependabot for vulnerability testing. Dependabot runs regularly on the kiali/kiali repository.

== Production Builds Use yarn build which will bundle the build artifacts using webpack into the build directory.

== License and Copyright See the link:https://github.com/kiali/kiali/blob/master/LICENSE[LICENSE file].