Frontend part of Kiali (use github.com/kiali/kiali to report issues)
Clone or download
abonas Merge pull request #885 from kiali/pilhuhn-patch-1
Update PULL_REQUEST_TEMPLATE.md
Latest commit 5c0430a Dec 13, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public KIALI-1847 fix Kiali favicon (#850) Nov 28, 2018
src Merge pull request #884 from mtho11/remove-strict-mode Dec 13, 2018
.gitignore Trivial: Remove old unused kiali-browser-test.png from .gitignore. Nov 30, 2018
.npmignore Don't send node_modules to publish to npm. Feb 22, 2018
.npmrc KIALI-727 Migrate from npm to yarn (#348) May 18, 2018
.prettierrc.json SWS-161 Let prettier infer the format by the path Mar 5, 2018
.snyk KIALI-2109 Create a .snyk policy file for remediation of vulnerabilit… Dec 7, 2018
.travis.yml KIALI-1982 Prepare repository to automate releases Nov 29, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jul 20, 2018
LICENSE Add Apache 2 License Feb 9, 2018
Makefile.jenkins KIALI-2040 Support for snapshot releases through Jenkins Pipeline Dec 4, 2018
PULL_REQUEST_TEMPLATE.md Update PULL_REQUEST_TEMPLATE.md Dec 13, 2018
README.adoc Merge pull request #586 from mtho11/kiali-1131-rcue Aug 21, 2018
RELEASING.adoc KIALI-2040 Support for snapshot releases through Jenkins Pipeline Dec 4, 2018
STYLE_GUIDE.adoc Style guide wip (#289) May 31, 2018
getLabels.py [KIALI-902] Improve itest bot to fetch images on demand (#421) Jun 14, 2018
package.json Trivial: Remove the @types/node from package.json since we don't have… Dec 11, 2018
tsconfig.json Remove tslint errors from the 'start' process (#731) Oct 5, 2018
tsconfig.prod.json kiali-1553 upgrade react-* libs and fix various compilation errors (#753 Oct 22, 2018
tsconfig.test.json SWS-56: Initial UI project created (#1) Feb 7, 2018
tslint.json Trivial: Use 'Number()' instead of parseFloat() for type-safety and s… Oct 17, 2018
tslint.prod.json Remove tslint errors from the 'start' process (#731) Oct 5, 2018
yarn.lock Trivial: Remove the @types/node from package.json since we don't have… Dec 11, 2018

README.adoc

Kiali UI

Introduction

A UI for the Kiali Istio Observability Project

Technologies

  • React.js

  • Redux

Quick Start

npm install -g yarn
yarn
yarn 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

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

It is possible to proxy the API requests without having to push the changes to kiali. Add the proxy property to package.json with the url of kiali.

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

Run yarn start and try it!

$ 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
...
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:

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 RCUE styled css instead of normal Patternfly

For development run:

env REACT_APP_RCUE=true yarn start

For production build run:

env REACT_APP_RCUE=true yarn build

Style Code Guide

Testing

To run the tests, the standard command yarn test is valid, but since some tests are using snapshots the preferred command is to update them in the same time:

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

brew install watchman

Production Builds

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

Configure Kiali

Use the config file to configure Kiali-UI.

Environment Variable Name Description and YAML Setting

sessionTimeOut

Time in minutes when session will expire. (default is 30 minutes)

sessionTimeOut: 30 * UNIT_TIME.MINUTE * MILLISECONDS

defaultDuration

The default duration of charts in seconds. (default is 60 seconds)

toolbar: {
  defaultDuration: 1 * UNIT_TIME.MINUTE
}

intervalDuration

The options for the duration of charts.

toolbar: {
  intervalDuration: {
    60: 'Last minute',
    300: 'Last 5 minutes',
    600: 'Last 10 minutes',
    1800: 'Last 30 minutes',
    3600: 'Last hour',
    10800: 'Last 3 hours',
    21600: 'Last 6 hours',
    43200: 'Last 12 hours',
    86400: 'Last day',
    604800: 'Last 7 days',
    2592000: 'Last 30 days'
  }
}

defaultPollInterval

Time for the refresh of the information. (default is 15 seconds)

toolbar: {
  defaultPollInterval: 15 * MILLISECONDS
}

pollInterval

The options for the refresh of the information.

toolbar: {
  pollInterval: {
    0: 'Pause',
    5000: '5 seconds',
    10000: '10 seconds',
    15000: '15 seconds',
    30000: '30 seconds',
    60000: '1 minute',
    300000: '5 minutes'
  }
}

graphLayouts

The types of layouts for graph.

toolbar: {
  graphLayouts: {
    cola: 'Cola',
    'cose-bilkent': 'Cose',
    dagre: 'Dagre'
  }
}

threshold

The threshold limits to show in the charts.

toolbar: {
  threshold: {
    percentErrorSevere: 2.0,
    percentErrorWarn: 0.1
  }
}

See the LICENSE file.