# API Management Toolkit UI
 
[![Build Status](https://apim-jenkins3.hursley.ibm.com/buildStatus/icon?job=apim-ui&build=161)](https://apim-jenkins3.hursley.ibm.com/job/apim-ui/161/)
## Description

## Getting Started
This module is used by [apiconnect](https://www.npmjs.com/package/apiconnect).

The UI can be run either as API Designer or API Manager - here's how:

### First timers:

#### Instructions for setting up the registries:
```shell
npm login --registry=https://dev-console-npm.stage1.ng.bluemix.net --scope=@console
# Username: dev
# Password: bmDev
# Email:    { YOUR_IBM_EMAIL }
```

#### Setting up APIM-UI
```shell
cd apim-ui
npm install --registry http://apic-ci-npm.hursley.ibm.com:4873/
npm start
```
Note: you will need to use the appropriate ci registry for the `npm install` in the steps above, the example is the current dev registry. Details of the different registries can be returned by slackbot in API Connect slack instance by typing `ci registry`.



First time through, this will take around 10 minutes to download and install the pre-requisite node modules. Once complete, a browser window will open showing API Designer. You're now up and running in offline mode. You'll also have a war file (com.ibm.apim.apimanager-5.0.0.war) in the dist directory which can be deployed to an appliance.

### Running / developing the UI

There are four different ways to run the UI:

#### API Designer dev mode

For developing the toolkit experience. This will open up API Designer without any minification of the code, and will watch the source directory for changes. Intended for fast development of the offline experience - minimal overhead for the developer to try out a change.
```shell
gulp serve
```

### API Manager dev mode

For developing the online experience. This will open up API Manager without any minification of the code, and will watch the source directory for changes. It will proxy any /proxy/* API calls to a designated management node, as defined in gulp/proxy.json - you'll want to change this for your own system. Intended for fast development of the online experience, and for testing fixes against management nodes - the fix can be tested against the management node showing the UI issue *without* modifying the UI code deployed on that system.
```
{
  "proxy": {
    "forward": {
      "/proxy/(.*)": "https://172.16.80.161/v1/$1"
    },
    "auth": {                                                                                                                         
      "owner": {                                                                                                                      
        "username": "my_username",                                                                                            
        "password": "my_password"                                                                                                        
      },
      ... any other user roles you may have ...
  }
}
```

```shell
gulp serve:online --role <role, e.g. owner>
```
In order to point your proxy to an existing SAAS stack, you need to:

1. Open `https://login.service.{stack}.apim.ibmcloud.com/auth?redirectURL=/token`
2. Copy the value in `jwt` key
3. Remove `auth` element, add in `headers` element:
```
{
  "proxy": {
    "forward": {
      "/proxy/(.*)": "https://stecksalathe.apim.ibmcloud.com/v1/$1"
    },
    "headers": {
      "Authorization": "Bearer  eyJhbGciOiJFUz..."
    }
  }
}
```
Now, you can run `gulp serve:online` and omit the `--role` flag, since the access roles are already defined on your username. 



### API Designer prod mode

For running the offline experience in compressed, streamlined production mode.
```shell
gulp serve:dist
```

### API Manager prod mode

For running the online experience in compressed, streamlined production mode.
```shell
gulp serve:online:dist
```

## Running the Toolkit UI tests

Fire up the Toolkit UI in online dev mode:
```shell
gulp serve:online
```

In another window, kick off the test suite:
```shell
gulp apim-test
```