update components for 1.0

Signed-off-by: kidrecursive <chris.wilhite@pokitdok.com>

.gitignore

@@ -15,6 +15,7 @@
 
 venv
 .editorconfig
+package-lock.json
 
 # compiled output
 /dist

bin/dev_setup → Dockerfile

@@ -1,6 +1,4 @@
-#!/usr/bin/env bash
-#
-# Copyright 2017 PokitDok, Inc.
+# Copyright 2018 PokitDok, Inc.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -15,23 +13,13 @@
 # limitations under the License.
 # ------------------------------------------------------------------------------
 
-echo "Removing any existing virtualenv files..."
-# cleanup old virtualenv
-rm -rf venv
-# cleanup old nodejs files
-rm -rf node_modules
-
-echo "Creating a new nodejs virtualenv with, `pip install nodeenv` if you haven't already..."
-pip install nodeenv
-nodeenv --node=6.11.1 --prebuilt venv
-source venv/bin/activate
+FROM node:6
 
-echo "Installing npm dependencies..."
-npm install -g @angular/cli@">=1.5.6 <2.0.0" node-sass
-deactivate_node
+ADD . /explorer
 
-echo "Installing local node modules..."
-npm install
+WORKDIR /explorer
 
-echo "All done, great job!"
-echo "Run 'source venv/bin/activate' to activate the nodejs virtualenv."
+RUN npm install -g @angular/cli@">=1.5.6 <2.0.0" node-sass@">=4.8.3"
+RUN npm install
+RUN ng build
+RUN npm rebuild node-sass --force

README.md

@@ -7,54 +7,34 @@ Blockchain for Node Operators.
 
 SawtoothExplorer is built using [Angular](https://angular.io/) and
 [Angular Material](https://material.angular.io/). The project is managed using
-the [Angular CLI](https://cli.angular.io/).
+the [Angular CLI](https://cli.angular.io/). To run the project, you'll need
+[Docker](https://docker/com).
 
 ## Getting Started
 Before starting the SawtoothExplorer app, have the API running locally.
 Instructions for doing so are available in the Sawtooth documentation,
 under [Installing and Running Sawtooth](https://sawtooth.hyperledger.org/docs/core/releases/latest/app_developers_guide/installing_sawtooth.html).
 
-Once this is running, the SawtoothExplorer app must be configured to
-reach the API. Update the `apiURL` property of the project's
-`environment` variable, located in `environments/environments.ts`, to
-point to where the app should be accessing the API. This file
-holds any environment variables for development. Production environment
-variables are in `environments/environments.prod.ts`.
+Once this is up and running, start the explorer container and rest api proxy
+container: `docker-compose up`
 
-By default, the locally running Sawtooth API is available at port `8080`,
-so the `apiUrl` is already set to `http://localhost:8080`.
+By default, the sawtooth API proxy is available at port `8090`,
+so the `apiUrl` is already set to `http://localhost:8090`. To change where the
+explorer connects to the rest api, change the value of `apiUrl` in
+`environments/environments.ts`.
 
 ## Local development
-This project depends on `node` and `angular-cli`, and `node-sass`. It is best
-practice to install and run these in an isolated environment. This project
-includes an example for OSX under `bin/dev_setup` that uses virtual environments
-(that you are welcome to use should you be working in OSX).
-
-After these are installed, run `npm install` to install all other node modules
-locally in the `node_modules` directory. The `bin/dev_setup` script includes
-this command.
-
-## Development server
-
-If you are taking the route of using a virtual environment, this is the point
-where you should source it. Run `ng serve` for a dev server. Navigate to
-`http://localhost:4200/`. The app will automatically reload if you change any
-of the source files.
-
-If you have a different version of node already on your machine, you may see
-the error `Node Sass could not find a binding for your current environment.`
-Run `npm rebuild node-sass` to update the bindings.
-
-Also, occasionally when starting a new project, you may see the error 
-`No NgModule metadata found for AppModule.` This can be fixed by triggering the
-automatic reload by making a small edit to a file then saving while `ng serve`
-is running.
+The `explorer` container is where you'll perform most development related
+functions, the container starts in serve mode, which will auto load changes. To
+connect to the container to perform builds and other functions:
+`docker exec -it sawtooth-explorer /bin/bash`
 
 ## Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can
 also use  `ng generate directive|pipe|service|class|module`. More information
 can be found on the [Angular CLI github page](https://github.com/angular/angular-cli).
+Run these commands inside of the explorer container.
 
 ## Build
 
@@ -64,8 +44,8 @@ be served through a web server such as nginx.
 
 ## Running unit tests
 
-Run `ng test` to execute the unit tests via 
-[Karma](https://karma-runner.github.io) + 
+Run `ng test` to execute the unit tests via
+[Karma](https://karma-runner.github.io) +
 [Jasmine](https://github.com/jasmine/jasmine).
 
 To run a single spec or test, update the spec from `describe` to `fdescribe`
@@ -77,6 +57,6 @@ report will be generated in the `/coverage` directory. To view, open the
 
 ## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via 
+Run `ng e2e` to execute the end-to-end tests via
 [Protractor](http://www.protractortest.org/). Before running the tests make
 sure you are serving the app via `ng serve`.

docker-compose.yml

@@ -0,0 +1,32 @@
+ # Copyright 2018 PokitDok, Inc.
+ #
+ # Licensed under the Apache License, Version 2.0 (the "License");
+ # you may not use this file except in compliance with the License.
+ # You may obtain a copy of the License at
+ #
+ #     http://www.apache.org/licenses/LICENSE-2.0
+ #
+ # Unless required by applicable law or agreed to in writing, software
+ # distributed under the License is distributed on an "AS IS" BASIS,
+ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ # See the License for the specific language governing permissions and
+ # limitations under the License.
+ # -----------------------------------------------------------------------------
+
+version: "2.1"
+
+services:
+  sawtooth-explorer-rest-api-proxy:
+    image: nginx
+    container_name: sawtooth-explorer-rest-api-proxy
+    volumes:
+      - ./docker/nginx.conf:/etc/nginx/nginx.conf:ro
+    ports:
+      - "8090:8090"
+    command: [nginx, '-g', 'daemon off;']
+  sawtooth-explorer:
+    build: .
+    container_name: sawtooth-explorer
+    ports:
+      - "4200:4200"
+    command: "ng serve"

docker/nginx.conf

@@ -0,0 +1,47 @@
+# Copyright 2018 PokitDok, Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# ------------------------------------------------------------------------------
+
+
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
+
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        '' close;
+    }
+
+    server {
+        listen 8090;
+        add_header Pragma no-cache always;
+        add_header Access-Control-Allow-Origin *;
+
+        location / {
+          proxy_pass          http://host.docker.internal:8008;
+          proxy_read_timeout  5000;
+          proxy_set_header Upgrade $http_upgrade;
+          proxy_set_header Connection $connection_upgrade;
+        }
+    }
+}

src/app/batches/batch/batch.component.html

@@ -17,7 +17,7 @@
 <div class="well">
   <dl class="horizontal">
       <dt>Signer Public Key</dt>
-      <dd>{{ data.header?.signer_pubkey }}</dd>
+      <dd>{{ data.header?.signer_public_key }}</dd>
 
       <dt *ngIf="data.state">State</dt>
       <dd>{{ data.state }}</dd>

src/app/blocks/block/block.component.html

@@ -26,7 +26,7 @@
     <dd>{{ data.header?.consensus | base64decode }}</dd>
 
     <dt>Signer Public Key</dt>
-    <dd class="ellipsis"><a>{{ data.header?.signer_pubkey }}</a></dd>
+    <dd class="ellipsis"><a>{{ data.header?.signer_public_key }}</a></dd>
 
     <dt>State Root Hash</dt>
     <dd class="ellipsis"><a>{{ data.header?.state_root_hash }}</a></dd>

src/app/explorer/explorer.component.ts

@@ -15,8 +15,7 @@
  * ------------------------------------------------------------------------------
  */
 
-import { Component, OnInit, OnDestroy, ComponentFactoryResolver } from
-  '@angular/core';
+import { Component, OnInit, OnDestroy, ComponentFactoryResolver } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { MatTableModule, MatSnackBar } from '@angular/material';
 
@@ -61,6 +60,12 @@ export class ExplorerComponent implements OnInit {
   // type of items currently being viewed
   viewType: string;
 
+  // paging settings
+  currentHead: string;
+  currentId: string
+  nextId: string;
+  previousId: string;
+
   // types of views user can select to see
   views = ['transactions', 'batches', 'blocks'];
 
@@ -125,14 +130,16 @@ export class ExplorerComponent implements OnInit {
 
     this.items = data.data;
     this.navTotalItems = data.paging.total_count;
+    this.currentHead = data.head;
+    this.nextId = data.next_position;
 
     this.selectedItem = this.items[0];
 
     // update component used to render the list of API items
     this.listViewComponent = this.listViewComponents[this.viewType];
 
     // update url to reflect selection
-    this.updateParams(this.viewType);
+    this.updateParams(this.viewType, this.currentHead);
 
     // show list of items after API is done loading
     this.loading = false;
@@ -204,19 +211,20 @@ export class ExplorerComponent implements OnInit {
     this.selectedItem = item;
 
     // update url to reflect selection
-    this.updateParams(this.viewType);
+    this.updateParams(this.viewType, this.currentHead);
   }
 
   /**
    * Updates query string parameters so that specific view can be represented in
    * the URL.
    * @param viewType {string} - name of the type of view currently shown
    */
-  updateParams(viewType: string): void {
+  updateParams(viewType: string, currentHead): void {
     // update query string params to reflect selected item
     const queryParams: Params = Object.assign({},
       this.activatedRoute.snapshot.queryParams);
     queryParams['view'] = viewType;
+    queryParams['head'] = currentHead;
 
     // navigate to same route to update query string params
     this.router.navigate(['.'], {

src/app/services/api-service/api.service.ts

@@ -72,8 +72,7 @@ export class APIService {
   getItems(resourceName: string, params?: object): Observable<object[]> {
     let options: object = _.defaults(params, this.pagingDefaults);
     let min = options['pageIndex'] * options['pageSize'];
-    let url = this.apiURL + '/' + resourceName + '?min=' + min +
-      '&count=' + options['pageSize'];
+    let url = this.apiURL + '/' + resourceName + '?limit=' + options['pageSize'];
 
     return this.http.get(url)
       .timeout(this.apiTimeout)

src/app/states/state-monitor/state-monitor.component.ts

@@ -40,7 +40,7 @@ export class StateMonitorComponent implements OnInit, OnDestroy {
    * @param http {Http} - service for making HTTP requests
    */
   constructor(public http:Http) {}
-  
+
   // list of state deltas from addresses subscribed to
   @Input()
   states: object[];
@@ -158,9 +158,10 @@ export class StateMonitorComponent implements OnInit, OnDestroy {
 
     // message needs to include data
     if (!message['data']) return stateChanges;
-    
+
     // data from the message
     let messageData = JSON.parse(message['data']);
+    console.log(messageData);
     let stateChangeData = messageData['state_changes'];
 
     // if no state changes are included in the result, no need to report it

src/app/transactions/transaction/transaction.component.html

@@ -20,10 +20,10 @@
     <dd>{{ data.header.family_name }}, v{{ data.header.family_version }}</dd>
 
     <dt>Signer Public Key</dt>
-    <dd><a routerLink="/wallet">{{ data.header.signer_pubkey || '-' }}</a></dd>
+    <dd><a routerLink="/wallet">{{ data.header.signer_public_key || '-' }}</a></dd>
 
     <dt>Batcher Public Key</dt>
-    <dd><a routerLink="/wallet">{{ data.header.batcher_pubkey || '-' }}</a></dd>
+    <dd><a routerLink="/wallet">{{ data.header.batcher_public_key || '-' }}</a></dd>
 
     <dt>Nonce</dt>
     <dd>{{ data.header.nonce || '-' }}</dd>

src/assets/mock-data/batch.json

@@ -1,7 +1,7 @@
 {
   "data": {
     "header": {
-      "signer_pubkey": "021a7a678da00fcd6e8b8947b6fea454a5808d6dd332c7ad8b3987807cfb588ae6",
+      "signer_public_key": "021a7a678da00fcd6e8b8947b6fea454a5808d6dd332c7ad8b3987807cfb588ae6",
       "transaction_ids": [
         "0e24cde5e2c868f35ed5142359ddf48fd66d58cb130638a29d668f515dcc06cb1e65a28f59b72d39399df1a9f1422088dc2dc3888dc4b9529f30b01fbbf3e401"
       ]
@@ -10,7 +10,7 @@
     "transactions": [
       {
         "header": {
-          "batcher_pubkey": "021a7a678da00fcd6e8b8947b6fea454a5808d6dd332c7ad8b3987807cfb588ae6",
+          "batcher_public_key": "021a7a678da00fcd6e8b8947b6fea454a5808d6dd332c7ad8b3987807cfb588ae6",
           "dependencies": [],
           "family_name": "dokchain_recovery",
           "family_version": "0.0.1",
@@ -25,7 +25,7 @@
           ],
           "payload_encoding": "json",
           "payload_sha512": "0d64e1b38f2b86eb09c30f168e794acb76c0498d0cb40e521dd5afd0ebe016594b11956f3c40a9590426a0613abab8ab94b486b0b7938ae250f402e885945d55",
-          "signer_pubkey": "021a7a678da00fcd6e8b8947b6fea454a5808d6dd332c7ad8b3987807cfb588ae6"
+          "signer_public_key": "021a7a678da00fcd6e8b8947b6fea454a5808d6dd332c7ad8b3987807cfb588ae6"
         },
         "header_signature": "0e24cde5e2c868f35ed5142359ddf48fd66d58cb130638a29d668f515dcc06cb1e65a28f59b72d39399df1a9f1422088dc2dc3888dc4b9529f30b01fbbf3e401",
         "payload": "eyJhY3Rpb24iOiAiUkVUVVJOX1NIQVJFIiwgInNoYXJlIjogImM0Yjg0MDk4MTNmYmE0MWVkNWJiNGZkMmJjNDg3ZGEyMDQwMWNkZjc0YzcxOTFiYTM3Mzc2MDk2YjBjOGM2NDI5MGUyYzliNjU4NTMwY2Q2OTUwNWE4M2UzNDgzMWNmYzlkZGI0MDkwZGQ0ZGQyYTIzOTdjMzEzOTUxZmIyNGQ4MmY3YTdhNTc1NGExNjYyMzA5MzM1MGY5MGEyMTNmYzNkNzQzMTY2OGY5NDc2NTI5ZTczYzM3MGZlMDdlMTAwMjVhMDNlOTRmZjcyMjM0MjNkMDQ3MmFkNDEyMjU4NWZjMzFkMjYyZTY4ZjVjYjFjODEyNTE5YjRmNGJhODc3MDkzNjliZjYwN2NlNWRmYThlMTgwMGQ4OGMxNWFlMzY4YTkxZmJlMTE2YzdlYTA3MzUxYTZmOTkwOGM2N2VkODRmMjdmNTk4YWE1ODJlZDdjMjQxYzA4Y2M2NTk3MmRlZTk0M2U4ODgxNWM1NTEyMjIyYjU2NGZhZWVkNjJlNjI1OTVlMDAwMzhhZWRkMjZmOGIzYzdhMGViOGE3ZmMyNTUxZTc4NmYzOGMwMzdjYTY1NmVkZTkzNzdlNWE2NTc0ZjVhOCIsICJ0b2tlbl9pZCI6ICI5ODAxYTQwMi0zNDEzLTQyYzktYjljNC0xYTM2MzVlYzU3NTMifQ=="