decodedco / predix-seed-xlp

Dashboard Seed is an application that uses Px Web Components and Px UI Elements inside an Angular application.

Predix Experience 2.0 Seed

Dashboard Seed is an application that uses Px Web Components inside a Polymer web application. It runs on the Express web server.

Getting Started

Get the source code

Make a directory for your project. Clone or download and extract the seed in that directory.

git clone https://github.com/PredixDev/predix-seed.git

Install tools

If you don't have them already, you'll need node, bower and gulp to be installed globally on your machine.

1. Install node. This includes npm - the node package manager.
2. Install bower globally npm install bower -g
3. Install gulp globally npm install gulp -g

Install the dependencies

Change directory into the new project you just cloned, then install dependencies.

npm install
bower install

Running the app locally

The default gulp task will start a local web server. Just run this command:

gulp

Browse to http://localhost:5000. Initially, the app will use mock data for the views service, asset service, and time series service. Later you can connect your app to real instances of these services.

Running in Predix Cloud

With a few commands you can build a distribution version of the app, and deploy it to the cloud.

Create a dist version

Use gulp to create a distribution version of your app. You will need to run this command during development every time before you cf push to make the latest dist.

gulp compile:all

Deploy to the cloud

First make sure you're logged in to the Predix Cloud using the cf login command. Then deploy your app using this command:

cf push my-seed-app

You can give the app any unique name you like. "my-seed-app" is just an example.

UAA

1. Setup UAA service

1. cf create-service predix-uaa Tiered xlpuser04-uaa -c '{"adminClientSecret":"clientsecret"}'
2. Add xlpuser-04-uaa to manifest.yml
3. cf push
4. cf env xlp-polymer to extract

2. Add client for UAA

1. uaac target <uaa-URI>
2. uaac token client get admin
3. uaac client add xlpuser04-uaa-client -i:
4. scope: openid uaa.none
5. authorized grant types: password client_credentials authorization_code
6. authorities: uaa.resource openid uaa.none
7. echo -n xlpuser04-uaa-client:clientsecret | base64 - save in manifest.yml under base64ClientCredential
8. Update clientId in manifest.yml

3. Add users to app

1. uaac user add <my-user> --emails <my_user>@domain.com --password <my_password>
2. uaac group add uaa.user
3. uaac member add uaa.user user

Predix Time series

1. Create Service

1. cf env xlp-polymer - grab issuer id from uaa
2. cf create-service predix-timeseries Tiered xlpuser04-timeseries -c '{"trustedIssuerIds":["https://xxx.run.aws-usw02-pr.ice.predix.io/oauth/token"]}'
3. Update manifest.yml with timeseries instance, cf push

2. Config Service

1. cf env xlp-polymer - grab zone id
2. uaac client update xlpuser04-uaa-client -i add
3. authorities: timeseries.zones.<zone-id>.user timeseries.zones.<zone-id>.query timeseries.zones.<zone-id>.ingest
4. scope: timeseries.zones.<zone-id>.user timeseries.zones.<zone-id>.query timeseries.zones.<zone-id>.ingest

3. Use Timeseries

1. Simply access /predix-api/predix-timeseries/v1/tags..
2. To test with curl, copy the cookie_name from your browser and curl --cookie "cookie_name=xxxx" http://localhost:5000/predix-api/predix-timeseries/v1/tags

Predix Machine

On the Pis, update the following:

1. ~/PredixMachine/configuration/machine/com.ge.dspmicro.predixcloud.identity.config with UAA details
2. com.ge.dspmicro.websocketriver.send-0.config with Zone ID for TS
3. com.ge.dspmicro.hoover.spillway-0.config updated com.ge.dspmicro.hoover.spillway.destination="WS Sender Service"

Questions?

• Ask questions and file tickets on https://www.predix.io/community.

Copyright

Copyright © 2015 GE Global Research. All rights reserved.

The copyright to the computer software herein is the property of GE Global Research. The software may be used and/or copied only with the written permission of GE Global Research or in accordance with the terms and conditions stipulated in the agreement/contract under which the software has been supplied.

predix-seed-xlp's Issues

Split out values into individual cards

Right now values appear all together:

1. Can we split out each value as a separate card
2. Can we allow user to change h1 of card to e.g. "Wind Power (MW)"
3. Can we add latest timestamp from data, formatted for information (check we have latest data)
4. Is there option to combine multiple cards in a row?

Fix realtime card for windspeed

Windspeed behaves differently than other tags because it is not timeseries data.

Add units to values cards

We need the user to specify units e.g. MW m/s etc.

Single tag data being set incorrectly

WindSpeed sometimes returns N/A

Unclear why?

Fix layout issue

Why are the layout classes not showing up?

Wind speed not coming through node.js backend

Hook up scatter plot to real data services

Create simple bar chart for realtime energy values

Currently, latest values for power generation are visible as value cards:

Can we add option to display values as comparative bar chart:

Coal, Gas, Wind, Demand with different colors ala https://github.com/PredixDev/px-simple-bar-chart

Maybe a stacked version against Demand would make sense too?

Timeseries charts jump out of zoom every x seconds

1. Zoom in to timeseries area
2. Wait until "push new point" appears in console
3. View will zoom out automatically (frustrating UX)

Create quickstart cards for common tasks

E.g. add a pie chart

Toggle historical/ realtime view for time series

Merge with latest from seed master

Timeseries - show in local timezone not UTC

Currently timeseries calendar is showing in UTC.

Confusing for the user. Can we show in local timezone?

Allow timeseries viz of Demand tag

There is now a global Demand tag in timeseries for energy demand, which each team will share.

Currently the timeseries dropdown filters on the device name:

if(tag.indexOf(this.deviceName)!== -1){

Can we add in the Demand tag as always there?

Create calculated/static value card (not from API)

More customizable thresholds

-Background or text color
-More complex conditional statements

Implement alerts for Demand and Output inconsistencies

Can we trigger alerts when demand <> TotalPower?

Or turn the text color red?

Change card color, or text, when value goes above or below a threshold

Update Getting Started Guide

https://docs.google.com/document/d/1dIExcPq_QRSBGJUQUMz9W9gfn73Xvzf9VbrmpWLWc08/edit

Address slowness of scatter plot

Is this the number of data points? Need to look into.

Create historical demand data for session

For Sunday

Show multiple separate Timeseries cards on one page

Currently multiple timeseries cards on one page, all pull the same data.

Make sure they have their own data.

Create final student example

1. Everything on one dashboard
2. Multiple pages
3. Aggregation example (e.g. avg)
4. Scatter plot

Plot Demand timeseries data

    <time-series-card id="tsSingleTag"
        card-title="Demand - Line" tags="[[_setTag('CoalPower-xlp-')]]" hide-bar card-color="[[cardColor]]">
    </time-series-card>

This notation prevents Demand being shown, as it doesn't have the device name after it

Split out timeseries line and bar charts as separate cards

Can we have two timeseries html files - one for bar chart and one for line chart?

Show multiple series on time series card

Bar chart legend needs to update on tag change

Round aggregation to 2 decimal points

Timeseries not rescaling

Switching to Temperature keeps previous scale:

Clean up unneeded code

To reduce complexity, remove cards and decks from the views API and provide example blocks in the dashboard-views.html

Display aggregate value for timeseries data

Card showing average over last hour, 10 minutes, 1 minute.

From https://www.predix.io/docs/?r=119474#F0PrUNk2

avg
dev
max
min

Force authentication on front page

Currently front-page is unauthenticated, only /secure/ is authenticated

Remove Wind API endpoint

Now Wind is being stored directly in Timeseries

Allow one tag display of Timeseries

Currently, timeseries plots have a dropdown of all available tags (see #18).

Some customers will want to show multiple timeseries on one page, of specific tags.

Can

    <time-series-card id="tsLineChart" card-title="Time Series Card - Line" tags="[[tagVals]]" hide-bar></time-series-card>

be extended to behave like

      <latest-data-card id="humidityTag" class="layout__item"
        card-title="Humidity" tag="Humidity-xlp-[[deviceName]]"></latest-data-card>

Write-up UAA setup steps

Identify easy CSS changes

Customers will want different color schemes.

We should identify easy things to change:

1. bg color
2. card color
3. add logo

Add Timeseries API

https://github.com/DecodedCo/ge-xlp-thursday-ui/blob/master/app.js

Finalize boilerplate for teams

Merge in lastest changes from PredixDev/

Deploy to cf

1. Test UAA login flow

Finalize team instructions for boilerplate

Update traffic light scheme for card color and backgrounds

Default timeseries to show last 12 hours

Current default is hard-coded, update to show last 12 hours

Pie chart doesn't redraw after 0 value

If you set a value to 0, then increase, the Pie chart won't redraw the 0 value:

Bind Timeseries service

Fix scatter plot

Create users for each team

Wind Speed not AJAXing

Wind speed card should update every ~3s

Save Demand into Timeseries

In order to view historical demand data, and plot demand vs total power, we need to store demand in the Timeseries.

Currently it is generated in realtime from

https://ge-wind.herokuapp.com/api/demand