adding server api

package.json

@@ -2,6 +2,7 @@
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:4000/",
   "devDependencies": {
     "@types/alt": "^0.16.32",
     "@types/jest": "^19.2.2",
@@ -24,6 +25,7 @@
     "lodash": "^4.17.4",
     "material-colors": "^1.2.5",
     "moment": "^2.18.0",
+    "morgan": "^1.8.1",
     "react": "^15.4.2",
     "react-addons-css-transition-group": "^15.4.2",
     "react-addons-transition-group": "^15.4.2",
@@ -35,12 +37,12 @@
     "xhr-request": "^1.0.1"
   },
   "scripts": {
-    "build-css": "node-sass src/ -o src/",
-    "watch-css": "yarn run build-css && node-sass src/ -o src/ --watch --recursive",
-    "start-js": "react-scripts-ts start",
-    "start": "npm-run-all -p watch-css start-js",
-    "build": "yarn run build-css && react-scripts-ts build",
-    "test": "react-scripts-ts test --env=jsdom",
-    "eject": "react-scripts-ts eject"
+    "css:build": "node-sass src/ -o src/",
+    "css:watch": "yarn run css:build && node-sass src/ -o src/ --watch --recursive",
+    "server:start": "node server",
+    "client:start": "react-scripts-ts start",
+    "start": "npm-run-all -p css:watch server:start client:start",
+    "build": "yarn run css:build && react-scripts-ts build",
+    "test": "react-scripts-ts test --env=jsdom"
   }
 }

public/index.html

@@ -6,6 +6,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
+    <script type="text/javascript" src="/api/config.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

server/app.js

@@ -0,0 +1,34 @@
+// server/app.js
+const express = require('express');
+const morgan = require('morgan');
+const path = require('path');
+const fs = require('fs');
+
+const app = express();
+
+// Setup logger
+app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));
+
+// Serve static assets
+app.use(express.static(path.resolve(__dirname, '..', 'build')));
+
+app.get('/api/config.js', (req, res) => {
+  fs.readFile(path.join(__dirname, 'dashboards', 'bot-framework.js'), 'utf8', (err, data) => {
+    if (err) throw err;
+
+    // Ensuing this dashboard is loaded into the dashboards array on the page
+    data += `
+      window.dashboards = window.dashboards || [];
+      window.dashboards.push(dashboard);
+    `;
+
+    res.send(data);
+  });
+});
+
+// Always return the main index.html, so react-router render the route in the client
+app.get('*', (req, res) => {
+  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
+});
+
+module.exports = app;

src/pages/temp.ts → server/dashboards/bot-framework.js

@@ -1,7 +1,4 @@
-import * as _ from 'lodash';
-import colors from '../components/colors';
-
-export default <IDashboardConfig>{
+var dashboard = {
   config: {
     layout: {
       isDraggable: true,
@@ -51,8 +48,8 @@ export default <IDashboardConfig>{
       calculated: (state) => {
         var { values } = state;
 
-        var total : any = _.find(values, { name: 'message.convert.start' });
-        var successful: any = _.find(values, { name: 'message.convert.end', successful: true }) || { event_count: 0 };
+        var total = _.find(values, { name: 'message.convert.start' });
+        var successful = _.find(values, { name: 'message.convert.end', successful: true }) || { event_count: 0 };
 
         if (!total) {
           return null;
@@ -71,7 +68,7 @@ export default <IDashboardConfig>{
       type: 'ApplicationInsights/Query',
       dependencies: { timespan: 'timespan', queryTimespan: 'timespan:queryTimespan', granularity: 'timespan:granularity' },
       params: {
-        query: (dependencies: any) => {
+        query: (dependencies) => {
           var { granularity } = dependencies;
           return ` customEvents` +
                    ` | where name == 'Activity'` + 
@@ -191,7 +188,6 @@ export default <IDashboardConfig>{
       title: 'Message Rate',
       subtitle: 'How many messages were sent per timeframe',
       size: { w: 5, h: 8},
-      theme: colors.ThemeColors2,
       dependencies: { values: 'timeline:graphData', lines: 'timeline:channels', timeFormat: 'timeline:timeFormat' }
     },
     {
@@ -239,7 +235,6 @@ export default <IDashboardConfig>{
       title: 'Conversion Rate',
       subtitle: 'Total conversion rate',
       size: { w: 4, h: 8},
-      theme: colors.ThemeColors2,
       dependencies: { values: 'conversions:displayValues' },
       props: { 
         pieProps: { nameKey: 'label', valueKey: 'count' }

server/index.js

@@ -0,0 +1,10 @@
+// server/index.js
+'use strict';
+
+const app = require('./app');
+
+const PORT = process.env.PORT || 4000;
+
+app.listen(PORT, () => {
+  console.log(`App listening on port ${PORT}!`);
+});

src/components/generic/Table/Table.tsx

@@ -68,8 +68,9 @@ export default class Table extends GenericComponent<ITableProps, ITableState> {
               col.type === 'icon' ?
                 <FontIcon>{col.value || value[col.field]}</FontIcon> :
               col.type === 'button' ?
-                <Button icon={true} 
-                        onClick={this.onButtonClick.bind(this, col, value)}>{col.value || value[col.field]}</Button> :
+                <Button 
+                    icon={true} 
+                    onClick={this.onButtonClick.bind(this, col, value)}>{col.value || value[col.field]}</Button> :
               col.type === 'time' ?
                 moment(value[col.field]).format('MMM-DD HH:mm:ss') :
                 value[col.field]

src/pages/Dashboard.tsx

@@ -14,7 +14,8 @@ import { DataSourceConnector, IDataSourceDictionary } from '../data-sources';
 import ElementConnector from  '../components/ElementConnector';
 import { loadDialogsFromDashboard } from '../components/generic/Dialogs';
 
-import dashboard from './temp';
+var dashboards : IDashboardConfig = (window as any)["dashboards"];
+var dashboard = dashboards[0];
 const layout = dashboard.config.layout;
 
 interface IDashboardState {

yarn.lock

@@ -443,6 +443,10 @@ base64-js@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
 
+basic-auth@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-1.1.0.tgz#45221ee429f7ee1e5035be3f51533f1cdfd29884"
+
 [email protected]:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
@@ -3053,6 +3057,16 @@ moment@^2.18.0:
   version "2.18.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.0.tgz#6cfec6a495eca915d02600a67020ed994937252c"
 
+morgan@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.8.1.tgz#f93023d3887bd27b78dfd6023cea7892ee27a4b1"
+  dependencies:
+    basic-auth "~1.1.0"
+    debug "2.6.1"
+    depd "~1.1.0"
+    on-finished "~2.3.0"
+    on-headers "~1.0.1"
+
 [email protected]:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"