Swsui NPM | npm.io

:toc: macro :toc-title:

toc::[] = SWS UI image:https://coveralls.io/repos/github/swift-sunshine/swsui/badge.svg?branch=master[Coverage Status, link=https://coveralls.io/github/swift-sunshine/swsui?branch=master]

== Introduction

A UI for the Swift-Sunshine Istio Observability Project

== Technologies

React.js
TBD

== Quick Start

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.

== Developing

When developing, is usual to run this application outside of https://github.com/swift-sunshine/swscore[swscore].

Is possible to proxy the API requests without having to push the changes to swscore. 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 the swscore.

source, json

{ "name": "swsui", "version": "0.2.1", "proxy": "http://sws-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.

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

== Directory Structure

src : Source and test code
src/assets : Images and other assets
src/components : Stateless components (pure functions)
src/pages : Top level pages and nested components
stories: Storybook files
build: Production build output
public: home of index.html

== Styling PatternFly is the main UI components framework. It defines style based on SASS preprocessor. All Patternfly build assets are copied to src. The App.scss file will include all PatternFly Sass along with PatternFly React Sass extensions. Once Sass compiles, the resulting CSS can be found in src/css/App.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: