Adding doc images.

README.md

@@ -28,6 +28,12 @@ The idea behind this repo is to establish a way to use newer web tech for your b
 
 In my own case, I was driven in this direction by performance issues with Angular that I could not find any good way to get past, besides just not using Angular.   
 
+This plugin sample is using:
+
+* **Webpack** as the building/bundling solution
+* **React** cooperating together with the existing **Angular** setup
+* **Typescript** to provide additional compile time type checking and IDE assistance, though you can easily write in plain JS if you like 
+
 ## Developing A Buildbot Plugin Locally
 
 You *could* develop your new plugin directly on your buildbot server, but you may not want to for various reasons.  Fortunately there's a good workflow where you can develop locally using data from a remote server.
@@ -126,4 +132,10 @@ In this repo, the setup is similar, except
 * the top level React Component gets its data (its **props**) from the Angular Controller, which calls ```ReactDOM.render``` to invoke React to update
 
 
-* The Controller is a bit slimmer, since more of the view logic is contained in the React components.  The controller's main role now is to get the data from the services and forward it as **props** to React.  The controller may want to massage the data a bit get it into a form that's more appropriate for the view.  Ideally the **props** should only change when you want the view to change, so if there's extra data returned by the ```dataService``` that your view doesn't need, the controller can play the role of filtering that into a more view-relevant form.
+* The Controller is a bit slimmer, since more of the view logic is contained in the React components.  The controller's main role now is to get the data from the services and forward it as **props** to React.  The controller may want to massage the data a bit get it into a form that's more appropriate for the view.  Ideally the **props** should only change when you want the view to change, so if there's extra data returned by the ```dataService``` that your view doesn't need, the controller can play the role of filtering that into a more view-relevant form.
+
+ ### Taking Advantage of Typescript
+
+I have included a file 
+
+![](https://github.com/uglycoyote/buildbot-react-plugin-boilerplate/blob/master/documentation/TypescriptBuildbotCompletion.gif?raw=true)

package.json

@@ -10,10 +10,10 @@
   },
   "keywords": [],
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
     "@types/react": "^16.0.5",
-    "@types/react-dom": "^16.0.3"
+    "@types/react-dom": "^16.0.3",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
   },
   "devDependencies": {
     "awesome-typescript-loader": "^3.2.3",
@@ -24,6 +24,7 @@
     "css-loader": "^0.28.5",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.11.2",
+    "json2ts": "0.0.7",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "source-map-loader": "^0.2.1",

scripts/GenerateTypings.js

@@ -0,0 +1,29 @@
+
+//http = require('http')
+request = require('request')
+
+
+function parseResponse(query, jsonContent) {
+
+	let json2ts = require("json2ts");
+	let interfaces = json2ts.convert(jsonContent);
+	console.log( interfaces );	
+}
+
+var server = 'nine.buildbot.net';
+
+var queries = ['builds', 'changes', 'buildsets', 'workers', 'changesources', 'masters', 'sourcestamps', 'schedulers', 'forceschedulers']
+
+queries.forEach( query => {
+	var request = require('request');
+	var limit = 2;
+	var url = 'http://'+server+'/api/v2/'+query+'?limit='+limit;
+	var requestComplete = false;
+	request(url, function (error, response, body) {
+	  if ( error != null ) { console.log('error:', error); } 
+	  if ( response.statusCode != 200 ) { console.log('statusCode:', response && response.statusCode); }
+	  parseResponse(query, body);
+	  requestComplete = true;
+	});
+} );
+

src/BuildbotJsonInterfaces.ts

@@ -0,0 +1,149 @@
+
+// This is generated from Buildbot's JSON data using json2ts
+// (the GenerateTypings.ts script in the scripts directory is a wrapper for json2ts which requests
+//  a bunch of buildbot JSON API url's and calls json2ts on them to output Typescript interface
+//  definitions)
+
+export interface Property {}
+
+export interface Build {
+	builderid: number;
+	buildid: number;
+	buildrequestid: number;
+	complete: boolean;
+	complete_at: number;
+	masterid: number;
+	number: number;
+	properties: Property;
+	results: number;
+	started_at: number;
+	state_string: string;
+	workerid: number;
+}
+
+export interface Field {
+	default: string;
+	fullName: string;
+	hide: boolean;
+	label: string;
+	maxsize?: any;
+	multiple: boolean;
+	name: string;
+	need_email: boolean;
+	regex?: any;
+	required: boolean;
+	size: number;
+	tablabel: string;
+	type: string;
+}
+
+export interface All_field {
+	columns: number;
+	default: string;
+	fields: Field[];
+	fullName?: any;
+	hide: boolean;
+	label: string;
+	layout: string;
+	maxsize?: any;
+	multiple: boolean;
+	name: string;
+	regex?: any;
+	required: boolean;
+	tablabel: string;
+	type: string;
+}
+
+export interface Forcescheduler {
+	all_fields: All_field[];
+	builder_names: string[];
+	button_name: string;
+	enabled: boolean;
+	label: string;
+	name: string;
+}
+
+
+export interface Configured_on {
+	builderid: number;
+	masterid: number;
+}
+
+export interface Workerinfo {
+	access_uri?: any;
+	admin?: any;
+	host?: any;
+	version: string;
+}
+
+export interface Worker {
+	configured_on: Configured_on[];
+	connected_to: any[];
+	graceful: boolean;
+	name: string;
+	paused: boolean;
+	workerid: number;
+	workerinfo: Workerinfo;
+}
+
+export interface Master {
+	active: boolean;
+	last_active: number;
+	masterid: number;
+	name: string;
+}
+
+export interface Sourcestamp {
+	branch: string;
+	codebase: string;
+	created_at: number;
+	patch?: any;
+	project: string;
+	repository: string;
+	revision: string;
+	ssid: number;
+}
+
+export interface Buildset {
+	bsid: number;
+	complete: boolean;
+	complete_at: number;
+	external_idstring?: any;
+	parent_buildid?: any;
+	parent_relationship?: any;
+	reason: string;
+	results: number;
+	sourcestamps: Sourcestamp[];
+	submitted_at: number;
+}
+
+export interface Scheduler {
+	enabled: boolean;
+	master: Master;
+	name: string;
+	schedulerid: number;
+}
+
+export interface Property {
+	event: string[];
+	github_distinct: any[];
+}
+
+export interface Change {
+	author: string;
+	branch: string;
+	category?: any;
+	changeid: number;
+	codebase: string;
+	comments: string;
+	files: string[];
+	parent_changeids: number[];
+	project: string;
+	properties: Property;
+	repository: string;
+	revision: string;
+	revlink: string;
+	sourcestamp: Sourcestamp;
+	when_timestamp: number;
+}
+

src/SampleReactComponent.tsx

@@ -1,16 +1,17 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+// import * from '../typings/buildbot'
 
-// stuff like this should go into some common .d.ts that describes the common data structures
-//   in buildbot so that Typescript can take advantage of this info for auto-completion and 
-//   compile-time checking.
-interface Change {
-	author : string;
-	comments : string;
-	revision : string;
-	files : string[];
-}
+// // stuff like this should go into some common .d.ts that describes the common data structures
+// //   in buildbot so that Typescript can take advantage of this info for auto-completion and 
+// //   compile-time checking.
+// interface Change {
+// 	author : string;
+// 	comments : string;
+// 	revision : string;
+// 	files : string[];
+// }
 
 class SampleReactComponentProps {
 	changes : Change[];
@@ -31,6 +32,7 @@ export class ChangeRow extends React.Component<ChangeRowProps, any> {
 			comments = comments.substring(0, 512) + "...";
 		}
 
+
 		let files = this.props.change.files.length + " files"
 
 		return <tr key={this.props.change.revision}>