:toc: macro :toc-title:
toc:: = Kiali UI
A UI for the Kiali Istio Observability Project
A new browser window should automatically open.
But, if it doesn't then use:
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/containers: [.line-through]#Redux connected containers# Deprecated
src/components: React Components
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
yarn as the package manager, if adding dependencies to
make sure you install them with
yarn and commit the
=== Testing with Kiali
When developing, it is usual to run this application outside of https://github.com/kiali/kiali[kiali].
package.jsonwith the url of kiali. [source, json]
yarn startand 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]
WARNING: The proxy will only serve requests without the text/html accept header, using the browser directly won't work.
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
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:
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
=== Style Code Guide
See the link:./STYLE_GUIDE.adoc[STYLE CODE GUIDE file].
yarn testis 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]
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.
== Testing Libraries for Vulnerabilities
We use https://snyk.io/[Snyk] for JS vulnerability testing. Snyke will run automatically on every commit pushed to
== Production Builds
yarn build which will bundle the build artifacts using webpack into the
Which will then launch a browser with your graphical source map displayed.
== Configure Kiali Use the link:https://github.com/kiali/kiali-ui/blob/master/src/Config.ts[config file] to configure Kiali-UI.
[cols="1a,1a"] |=== |Environment Variable Name|Description and YAML Setting
sessionTimeOut|Time in minutes when session will expire. (default is 30 minutes) [source,yaml]
defaultDuration|The default duration of charts in seconds. (default is 60 seconds) [source,yaml]
intervalDuration|The options for the duration of charts. [source,yaml]
defaultPollInterval|Time for the refresh of the information. (default is 15 seconds) [source,yaml]
pollInterval|The options for the refresh of the information. [source,yaml]
graphLayouts|The types of layouts for graph. [source,yaml]
threshold|The threshold limits to show in the charts. [source,yaml]
== License and Copyright See the link:./LICENSE[LICENSE file].