Need help with kiali-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kiali
192 Stars 89 Forks Apache License 2.0 2.8K Commits 8 Opened issues

Description

Frontend part of Kiali (use github.com/kiali/kiali to report issues)

Services available

!
?

Need anything else?

Contributors list

:toc: macro :toc-title:

toc::[] = Kiali UI

== Introduction

A UI for the Kiali Istio Observability Project

== Technologies * React.js * Redux

== Quick Start

[source,shell]

npm install -g yarn yarn

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

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/config
: Configuration *
src/containers
: [.line-through]#Redux connected containers# Deprecated *
src/components
: React Components *
src/fonts
: Fonts *
src/images
: Patternfly Images *
src/pages
: Top level pages and nested components *
src/reducers
: Redux reducers *
src/services
: Api services *
src/store
: Redux store definitions *
src/types
: Typescript definitions for all kinds of types *
src/utils
: Various Utilities

== Developing

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::v4MN04nQNCU[youtube]

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

...

=== 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.

=== RCUE Styling To use the https://redhat-rcue.github.io/[RCUE] styled css instead of normal Patternfly

For development run:

[source,shell]

env REACTAPPRCUE=true yarn start

For production build run:

[source,shell]

env REACTAPPRCUE=true yarn build

=== Style Code Guide

See the link:./STYLE_GUIDE.adoc[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 https://snyk.io/[Snyk] for JS vulnerability testing. Snyke will run automatically on every commit pushed to

kiali-ui
.

If you wish to run Snyk manually to test before you push, then the following command can be used:

[source,shell]

yarn run snyk

== Production Builds Use

yarn build
which will bundle the build artifacts using webpack into the
build
directory.

== Analyze Javascript Library Size To produce a graphical representation of the all the libraries in the project (showing what % of total each one is).

[source,shell]

yarn build

yarn run analyze

Which will then launch a browser with your graphical source map displayed.

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.