Merge pull request #56 from webdevstar/bugfix272

Bugfix272

Author: webdevstar

server/dashboards/preconfigured/bot-framework-inst.ts

@@ -1,5 +1,3 @@
-/* tslint:disable */
-
 interface IQueryResults {
   Tables: IQueryResult[]
 }

server/dashboards/preconfigured/bot-framework.ts

@@ -183,7 +183,7 @@ export default class Home extends React.Component<any, IHomeState> {
       return null;
     }
 
-    let templateCards = templates.map((temp, index) => (
+    let createCard = (temp, index) => (
       <div key={index} className="md-cell" style={styles.card}>
         <Card className="md-block-centered" key={index} >
           <Media>
@@ -202,10 +202,22 @@ export default class Home extends React.Component<any, IHomeState> {
           </CardActions>
         </Card>
       </div>
-    ));
+    );
+
+    // Finding featured
+    let featuredCards = templates
+                          .filter(temp => temp.id === 'bot_analytics_dashboard' || temp.id === 'bot_analytics_inst')
+                          .map(createCard);
+    let templateCards = templates.map(createCard);
 
     return (
       <div>
+        <h1>Bot Analytics</h1>
+        <div className="md-grid">
+          {featuredCards}
+        </div>
+
+        <h1>All Dashboards</h1>
         <div className="md-grid">
           {templateCards}
         </div>

server/dashboards/preconfigured/cosmosdb-handoff.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+
+import ListItem from 'react-md/lib/Lists/ListItem';
+import List from 'react-md/lib/Lists/List';
+
+import plugins from '../../../data-sources/plugins';
+
+interface IDataSourceSettingsProps {
+  settings: IDataSourceContainer;
+}
+
+interface IDataSourceSettingsState { 
+  selectedIndex: number;
+}
+
+/// This class displays a UI to edit the different data sources of the config file.
+export default class DataSourceSettings extends React.Component<IDataSourceSettingsProps, IDataSourceSettingsState> {
+
+  static uniqueId = 0;
+
+  state = {
+    selectedIndex: 0
+  };
+    
+  constructor(props: IDataSourceSettingsProps) {
+    super(props);
+
+    this.onMenuClick = this.onMenuClick.bind(this);
+    this.getSettings = this.getSettings.bind(this);
+    this.getSettingsEditor = this.getSettingsEditor.bind(this);
+  }
+  
+  /**
+   * Each element is expected to expose a static 'editor' property, which is the UI editor for this specific 
+   * data source node.
+   */
+  getSettingsEditor(element: DataSource): JSX.Element {
+
+    if (!element) { return null; }
+
+    let ReactElementClass = plugins[element.type];
+    if (ReactElementClass && ReactElementClass.editor) {
+      let SettingsEditor = ReactElementClass.editor;
+      return <SettingsEditor key={DataSourceSettings.uniqueId++} settings={element} />;
+    }
+    return null;
+  }
+
+  onMenuClick(index: number) {
+    this.setState({ selectedIndex: index });
+  }
+
+  /**
+   * Get the selected settings from the provided array of settings, based on the user selection.
+   */
+  getSettings(): IDataSource {
+    if (this.props && this.props.settings && this.props.settings.dataSources) {
+      return this.props.settings.dataSources.length > this.state.selectedIndex ?
+        this.props.settings.dataSources[this.state.selectedIndex] :
+        null;
+    }
+    return null;
+  }
+  
+  render() {
+
+    let renderSettingsEditor = (): JSX.Element => {
+      let selectedSettings = this.getSettings();
+      if (!selectedSettings) {
+        return <h1>No data-sources were found</h1>;
+      }
+
+      let editor = this.getSettingsEditor(selectedSettings);
+      if (editor) { return editor; }
+
+      return <h1>No settings yet for {selectedSettings.type}</h1>;
+    };
+
+    let renderMenuItems = (): JSX.Element => {
+      let { selectedIndex } = this.state;
+      let items = this.props.settings.dataSources.map((item, idx) => (
+        <ListItem
+          key={idx}
+          primaryText={item.id}
+          onClick={this.onMenuClick.bind(this, idx)}
+          className={selectedIndex === idx ? 'active-item' : ''}
+          active={selectedIndex === idx}
+        />
+      ));
+
+      return (
+        <List className="md-cell md-paper md-paper--1 md-cell--top md-cell--left md-cell--2 vertical-menu">
+          {items}
+        </List>
+      );
+    };
+
+    return (
+      <div className="md-grid md-cell md-cell--12">
+        {renderMenuItems()}
+        <div className="md-cell md-cell--top md-cell--stretch md-cell--10">
+          {renderSettingsEditor()}
+        </div>
+      </div>
+    );
+  }
+}

src/data-sources/plugins/ApplicationInsights/ai.d.ts renamed to src/@types/ai.d.ts

@@ -13,6 +13,7 @@ import { ToastActions } from '../Toast';
 
 import ConnectionsSettings from './ConnectionsSettings';
 import ElementsSettings from './ElementsSettings';
+import DatasourceSettings from './DatasourceSettings';
 import SettingsStore, { ISettingsStoreState } from '../../stores/SettingsStore';
 import SettingsActions from '../../actions/SettingsActions';
 import ConfigurationsActions from '../../actions/ConfigurationsActions';
@@ -157,15 +158,16 @@ export default class SettingsButton extends React.Component<ISettingsButtonProps
                   <ConnectionsSettings connections={dashboard.config.connections} />          
                 </div>
               </Tab>
+              {/* For now, we are deprecating the settings view
               <Tab label={VIEWS.Elements}>
                 <ElementsSettings settings={dashboard} />
               </Tab>
               <Tab label={VIEWS.DataSources}>
-                <h1>{VIEWS.DataSources} - is not implemented yet</h1>
+                <h1><DatasourceSettings settings={dashboard} /></h1>
               </Tab>
               <Tab label={VIEWS.Filters}>
                 <h1>{VIEWS.Filters} - is not implemented yet</h1>
-              </Tab>
+              </Tab>*/}
             </Tabs>
           </TabsContainer>
         </Dialog>  

src/types.d.ts renamed to src/@types/types.d.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+
+import Card from 'react-md/lib/Cards/Card';
+import TextField from 'react-md/lib/TextFields';
+import FontIcon from 'react-md/lib/FontIcons';
+import CardTitle from 'react-md/lib/Cards/CardTitle';
+import Switch from 'react-md/lib/SelectionControls/Switch';
+import Avatar from 'react-md/lib/Avatars';
+import SelectField from 'react-md/lib/SelectFields';
+
+import SettingsActions from '../../actions/SettingsActions';
+
+export interface IBaseSettingsProps {
+  settings: DataSource;
+}
+
+export interface IBaseSettingsState { 
+}
+
+/**
+ * This base class encapsules shared methods for all types of data sources
+ */
+export abstract class BaseDataSourceSettings<T extends IBaseSettingsState> 
+                      extends React.Component<IBaseSettingsProps, T> {
+
+  // an icon to be displayed when selecting the specific data source settings in the settings dialog
+  abstract icon: string;
+
+  // Implement this menthod with your desired UI implementation. 
+  abstract renderChildren();
+  
+  constructor(props: IBaseSettingsProps) {
+    super(props);
+
+    this.onParamChange = this.onParamChange.bind(this);
+    this.onParamSelectChange = this.onParamSelectChange.bind(this);
+    this.getProperty = this.getProperty.bind(this);
+    this.updateProperty = this.updateProperty.bind(this);
+    this.renderChildren = this.renderChildren.bind(this);
+  }
+
+  /**
+   * A helper method for finding an object by a given dot notation string representation.
+   * e.g: data.size.x
+   */
+  protected getProperty(property: string, defaultValue: any = null): any {
+    let { settings } = this.props;
+    let arr = property.split('.');
+    let obj = settings;
+    let parent = obj;
+
+    while (arr.length && (obj = obj && obj[arr.shift()])) { }
+    
+    if (typeof obj !== 'undefined') { return obj; }
+    
+    return defaultValue;
+  }
+
+  /**
+   * A helper method for updaing an object by a given dot notation string representation.
+   * e.g: data.size.x
+   */
+  protected updateProperty(property: string, value: any): void {
+    let { settings } = this.props;
+    let arr = property.split('.');
+    let object: any = settings;
+    let parent: any;
+    let key: string;
+
+    while (arr.length && (parent = object) && (key = arr.shift()) && (object = object[key])) { }
+    if (parent) { parent[key] = value; }
+  }
+
+  onParamChange(value: string, event: UIEvent) {
+    var t: any = event.target;
+    this.updateProperty(t.id, value);
+  }
+
+  onParamSelectChange(newValue: string, newActiveIndex: number, event: any) {
+
+    // a little hacking to get the id of the parent, 
+    // because event does not contain the outer element, but only the inner li
+    let cur = event.target;
+
+    while (cur && !cur.classList.contains('ddl')) {
+      cur = cur.parentNode;
+    }
+
+    if (cur) {
+      cur = cur.querySelector('input');
+      var id = cur.id;
+      this.updateProperty(id, newValue);
+    }
+  }
+
+  render() {
+    let { settings } = this.props;
+    let { id, type } = settings;
+    return (
+      <Card>
+        <CardTitle title={type} avatar={<Avatar random icon={<FontIcon>{this.icon}</FontIcon>} />} />
+        <div className="md-grid">
+          <TextField
+            id="id"
+            label="Id"
+            placeholder="id"
+            leftIcon={<FontIcon>settings</FontIcon>}
+            className="md-cell md-cell--bottom md-cell--6"
+            defaultValue={id}
+            onChange={this.onParamChange}
+          />
+          {this.renderChildren()}
+        </div>
+      </Card>
+    );
+  }
+};

src/components/Home/index.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import Paper from 'react-md/lib/Papers';
+import Button from 'react-md/lib/Buttons';
+import TextField from 'react-md/lib/TextFields';
+import Chip from 'react-md/lib/Chips';
+import Divider from 'react-md/lib/Dividers';
+
+interface ITokenInputProps {
+  tokens: any[];
+  zDepth: number;
+  onTokensChanged(): void;
+};
+
+interface ITokenInputState {
+  newToken: any;
+};
+
+/**
+ * This is a UI for editing a string array.
+ */
+export default class TokenInput extends React.Component<ITokenInputProps, ITokenInputState> {
+
+  state: ITokenInputState = {
+    newToken: ''
+  };
+
+  constructor(props: ITokenInputProps) {
+    super(props);
+    this.removeToken = this.removeToken.bind(this);
+    this.onNewTokenChange = this.onNewTokenChange.bind(this);
+    this.addToken = this.addToken.bind(this);
+  }
+
+  removeToken(token: any) {
+    let tokens = this.props.tokens;
+    _.remove(tokens, x => x === token);
+    if (this.props.onTokensChanged) {
+      this.props.onTokensChanged();
+    }
+    this.setState(this.state); // foce the component to update
+  }
+
+  onNewTokenChange(newData: any) {
+    this.setState({ newToken: newData });
+  }
+
+  addToken() {
+    if (this.state.newToken) {
+      let {tokens} = this.props;
+      tokens = tokens || [];
+      tokens.push(this.state.newToken);
+      this.setState({
+        newToken: ''
+      });
+      if (this.props.onTokensChanged) {
+        this.props.onTokensChanged();
+      }
+    }
+  }
+
+  render() {
+    let { tokens, zDepth } = this.props;
+    let { newToken } = this.state;
+
+    let chips = tokens.map((token: string, index: number) => (
+      <Chip
+        key={index}
+        onClick={this.removeToken.bind(this, token)}
+        removable
+        label={token}
+      />
+    ));
+
+    return (
+      <Paper zDepth={zDepth} >
+        <div style={{ padding: 5 }}>
+          {chips}
+        </div>
+        <Divider />
+        <div className="md-grid">
+          <TextField
+            id="addTokenInput"
+            lineDirection="center"
+            placeholder="Add a value"
+            className="md-cell md-cell--bottom"
+            value={newToken}
+            onChange={this.onNewTokenChange}
+          />
+          <Button icon primary onClick={this.addToken} className="md-cell">add_circle</Button>
+        </div>
+      </Paper>
+    );
+  }
+};