@kiali/kiali-ui

:toc: macro :toc-title:

toc::[] = Kiali UI image:https://coveralls.io/repos/github/kiali/kiali-ui/badge.svg?branch=master[Coverage Status, link=https://coveralls.io/github/kiali/kiali-ui?branch=master]

== Introduction

A UI for the Kiali Istio Observability Project

== Technologies

• React.js
• TBD

== Quick Start [source,shell]

npm install npm start

A new browser window should automatically open. But, if it doesn't then use: http://localhost:3000

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/app: React top level component
• src/assets: Images and other assets
• src/components: Stateless components (pure functions)
• src/pages: Top level pages and nested components
• src/types: Shared model
• stories: Storybook files

== Developing

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

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": { ...

Run npm start and try it! [source, bash]

$ curl -u jdoe:password 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 ...

WARNING: The proxy will only serve requests without the text/html accept header, using the browser directly won't work.

=== Styling 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]

npm run build-css

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

=== Testing To run the tests, the standard command npm 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]

npm 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

=== For Storybook Components [source,shell]

npm run storybook http://localhost:6006

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

== General

This project was bootstrapped with https://github.com/facebookincubator/create-react-app[create-react-app]

== License and Copyright See the link:./LICENSE[LICENSE file].