Working on initial version

.vscode/settings.json

@@ -0,0 +1,9 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.DS_Store": true,
+        "temp": true
+    }
+}

CONTRIBUTING.md

@@ -0,0 +1,43 @@
+# Contributing to Inversify
+
+## Setup
+
+1 - Clone your fork of the repository:
+```
+$ git clone https://github.com/YOUR_USERNAME/inversify-devtools.git
+```
+
+2 - Install typings:
+```
+$ npm install -g typings
+```
+
+3 - Install type definitions:
+```
+$ typings install
+```
+
+4 - Install npm dependencies:
+```
+$ npm install
+```
+
+5 - Run build process
+```
+$ gulp
+```
+
+## Guidelines
+
+- Please try to [combine multiple commits before pushing](http://stackoverflow.com/questions/6934752/combining-multiple-commits-before-pushing-in-git)
+
+- Please use `TDD` when fixing bugs. This means that you should write a unit test that fails because it reproduces the issue, 
+then fix the issue finally run the test to ensure that the issue has been resolved. This helps us to prevent fixed bugs from 
+happening again in the future.
+
+- Please keep the test coverage at 100%. Write additional unit test if necessary
+
+-  Please create an issue before sending a PR ff your it is going to change the public interface of InversifyJS or it 
+includes significant architecture changes.
+
+- Feel free to ask for help from other members of the InversifyJS team via the chat / mailing list or github issues.

package.json

@@ -26,8 +26,8 @@
   "dependencies": {
     "bootstrap": "^3.3.6",
     "font-awesome": "^4.6.1",
-    "inversify-dts": "^1.0.5",
-    "inversify-logger-middleware": "^1.0.0-beta.5",
+    "inversify-dts": "^1.0.7",
+    "inversify-logger-middleware": "^1.0.0-beta.6",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-json-tree": "^0.7.4",
@@ -45,13 +45,13 @@
     "gulp": "^3.9.1",
     "gulp-tslint": "^5.0.0",
     "gulp-typescript": "^2.13.0",
-    "inversify": "^2.0.0-beta.8",
-    "reflect-metadata": "^0.1.3",
+    "inversify": "^2.0.0-beta.10",
     "publish-please": "^2.1.4",
     "redux-devtools": "^3.2.0",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.0.11",
     "redux-logger": "^2.6.1",
+    "reflect-metadata": "^0.1.3",
     "run-sequence": "^1.1.5",
     "tslint": "^3.8.1",
     "vinyl-buffer": "^1.0.0",

src/actions/app_actions.ts

@@ -6,12 +6,13 @@ import SelectableKernel from "../core/selectable_kernel";
 
 let resize = makeActionCreator(ACTION_TYPES.RESIZE, "width", "height");
 let appInitSuccess = makeActionCreator(ACTION_TYPES.APP_INIT_SUCCESS, "kernel");
+let initSettings = makeActionCreator(ACTION_TYPES.APP_SETTINGS_SUCCESS, "settings");
 
 function appInitAsync() {
     return function(dispatch: Redux.Dispatch) {
 
-        let attachLogger = function(kernel: inversify.IKernel) {
-            let logger = getLogger(loggerActions.addLogEntry, dispatch);
+        let attachLogger = function(kernel: inversify.interfaces.Kernel) {
+            let logger = getLogger(loggerActions.addLogEntry, initSettings, dispatch);
             kernel.applyMiddleware(logger);
             let selectableKernel = new SelectableKernel(kernel);
             dispatch(appInitSuccess(selectableKernel));

src/actions/logger_actions.ts

@@ -3,10 +3,14 @@ import ACTION_TYPES from "../constants/action_types";
 
 let addLogEntry = makeActionCreator(ACTION_TYPES.ADD_LOG_ENTRY, "entry");
 let selectRequest = makeActionCreator(ACTION_TYPES.SELECT_LOG_ENTRY, "entry");
+let filterRequests = makeActionCreator(ACTION_TYPES.FILTER_LOG_ENTRIES, "filterBy");
+let clearRequests = makeActionCreator(ACTION_TYPES.CLEAR_LOG);
 
 let loggerActions = {
     addLogEntry,
-    selectRequest
+    selectRequest,
+    filterRequests,
+    clearRequests
 };
 
 export default loggerActions;

src/actions/settings_actions.ts

@@ -0,0 +1,21 @@
+import { makeActionCreator } from "../utils/utils";
+import ACTION_TYPES from "../constants/action_types";
+import interfaces from "../interfaces/interfaces";
+
+let saveSettingsSuccess = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_SUCCESS);
+let saveSettingsError = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_ERROR, "exception");
+
+let saveSettingsAsync = function (settings: interfaces.UserSettings) {
+    try {
+        window.localStorage.setItem("inversify_settings", JSON.stringify(settings));
+        return saveSettingsSuccess();
+    } catch (e) {
+        return saveSettingsError(e);
+    }
+};
+
+let settingsActions = {
+    saveSettingsAsync
+};
+
+export default settingsActions;

src/components/binding_explorer.tsx

@@ -43,11 +43,11 @@ class BindingExplorer extends React.Component<any, any> {
 
     public render() {
         return (
-            <Panel title={"Bindings"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+            <Panel title={"Services"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
                 <div className="customAlert" role="alert">
                     <i className="fa fa-info-circle" aria-hidden="true"></i>
                     Services with more than one implementation are displayed in yellow.
-                    Remember to add some metadata and constrints to avoid ambiguous match exceptions!
+                    Remember to add some metadata and constraints to avoid ambiguous match exceptions!
                 </div>
                 {this._renderBindings(this.props.dictionary)}
             </Panel>

src/components/binding_props_explorer.tsx

@@ -12,7 +12,7 @@ class BindingPropsExplorer extends React.Component<any, any> {
 
     public render() {
         return (
-            <Panel title={"Binding Props"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+            <Panel title={"Implementations"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
                 <div className="entryDetails">
                     <JSONTree data={this.props.bindings} theme={theme} isLightTheme={true} />
                 </div>

src/components/kernel_explorer.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router";
 import Panel from "./panel";
+import interfaces from "../interfaces/interfaces";
 
 const dir = {
     close: "&#9657",
@@ -21,16 +22,16 @@ class KernelExplorer extends React.Component<any, any> {
         );
     }
 
-    private _handleClick(kernel: ISelectableKernel) {
+    private _handleClick(kernel: interfaces.SelectableKernel) {
         this.props.selectKernel(kernel);
     }
 
-    private _renderKernels(kernels: ISelectableKernel[]) {
-        return kernels.map((kernel: ISelectableKernel, id: number) => {
+    private _renderKernels(kernels: interfaces.SelectableKernel[]) {
+        return kernels.map((kernel: interfaces.SelectableKernel, id: number) => {
             return (
                 <div key={id} className="request requestBox defaultBox" onClick={(e) => { this._handleClick(kernel); }}>
                     <div class="title">
-                        <h6>GUID: {kernel.guid}</h6>
+                        <h6>GUID: {kernel.details.guid}</h6>
                         <h2>Kernel</h2>
                     </div>
                 </div>

src/components/log_details.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import Panel from "./panel";
 import JSONTree from "react-json-tree";
 import theme from "../constants/json_tree_theme";
+import interfaces from "../interfaces/interfaces";
 
 class LogDetails extends React.Component<any, any> {
 
@@ -26,7 +27,7 @@ class LogDetails extends React.Component<any, any> {
         );
     }
 
-    private _renderEntry(entry: ISelectableLogEntry) {
+    private _renderEntry(entry: interfaces.SelectableLogEntry) {
 
         if (entry.details.error) {
 

src/components/menu.tsx

@@ -2,16 +2,16 @@ import * as React from "react";
 import { Link } from "react-router";
 
 class Menu extends React.Component<any, any> {
-    
+
     public constructor(props: any) {
         super(props);
     }
-    
+
     public render() {
         return (
             <div className="menu" style={{height: this.props.height, width: this.props.width }}>
                 <ul>
-                    <li className={ (this.props.page === "") ? "active" : "" }>
+                    <li className={ (this.props.page === "" || this.props.page === "logger") ? "active" : "" }>
                         <Link to="/logger">
                             <i className="fa fa-terminal" aria-hidden="true" />
                         </Link>
@@ -21,7 +21,7 @@ class Menu extends React.Component<any, any> {
                             <i className="fa fa-map-o" aria-hidden="true" />
                         </Link>
                     </li>
-                    <li className={ (this.props.page === "playground") ? "active" : "" }>
+                    <li className={ (this.props.page === "playground") ? "hide active" : "hide" }> /* TEMP HIDE CLASS */
                         <Link to="/playground">
                             <i className="fa fa-play-circle-o" aria-hidden="true" />
                         </Link>

src/components/playground.tsx

@@ -10,7 +10,7 @@ class Playground extends React.Component<any, any> {
 
     public render() {
         return (
-            <Panel title={"Playground"} subtitle={"InversifyJS"} 
+            <Panel title={"Playground"} subtitle={"Editor"}
                    columnSize={this.props.columnSize} height={this.props.height}>
 
                 <div className="customAlert" role="alert">

src/components/request_log.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import Panel from "./panel";
+import interfaces from "../interfaces/interfaces";
 
 class RequestLog extends React.Component<any, any> {
 
@@ -9,32 +10,69 @@ class RequestLog extends React.Component<any, any> {
 
     public render() {
 
-        let entries = this.props.log.map((entry: ISelectableLogEntry, i: number) => {
+        let entries = this.props.log.map((entry: interfaces.SelectableLogEntry, i: number) => {
             return this._renderEntry(entry, i);
         });
 
         return (
             <Panel title={"Requests Log"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+                <div className="panelTopMenu">
+                    <ul>
+                        <li>
+                            <a className={this.props.filter === "ALL" ? "active" : ""}
+                               onClick={() => { this._onFilterHandler("ALL"); }}>ALL</a>
+                        </li>
+                        <li>
+                            <a className={this.props.filter === "SUCCESS" ? "active" : ""}
+                               onClick={() => { this._onFilterHandler("SUCCESS"); }}>SUCCESS</a>
+                        </li>
+                        <li>
+                            <a className={this.props.filter === "ERROR" ? "active" : ""}
+                               onClick={() => { this._onFilterHandler("ERROR"); }}>ERROR</a>
+                        </li>
+                        <li>
+                            <a onClick={this._onClearHandler.bind(this)}>CLEAR</a>
+                        </li>
+                    </ul>
+                </div>
                 {entries}
             </Panel>
         );
 
     }
 
-    private _renderResult(entry: ISelectableLogEntry) {
+    private _onClearHandler() {
+        this.props.clearRequests();
+    }
+
+    private _onFilterHandler(filterBy: string) {
+        this.props.filterRequests(filterBy);
+    }
+
+    private _renderResult(entry: interfaces.SelectableLogEntry) {
         return entry.details.error ? entry.details.exception.message : entry.details.results[0].constructor.name;
     }
 
-    private _renderTime(entry: ISelectableLogEntry) {
+    private _renderTime(entry: interfaces.SelectableLogEntry) {
         return entry.details.error ? `ERROR!` : `SUCCESS: ${entry.details.time} ms`;
     }
 
-    private _handleClick(entry: ISelectableLogEntry) {
+    private _handleClick(entry: interfaces.SelectableLogEntry) {
         this.props.selectRequest(entry);
     }
 
-    private _renderEntry(entry: ISelectableLogEntry, id: number) {
+    private _renderEntry(entry: interfaces.SelectableLogEntry, id: number) {
+
+        // set box color based on status 
         let classes = `request requestBox ${entry.details.error ? "errorBox" : "successBox"}`;
+
+        // hide based on filter
+        let filterByErrorAndEntryIsNotAnError = (this.props.filter === "ERROR" && entry.details.error === false);
+        let filterBySuccessAndEntryIsAnError = (this.props.filter === "SUCCESS" && entry.details.error === true);
+        if (filterByErrorAndEntryIsNotAnError || filterBySuccessAndEntryIsAnError) {
+            classes = "hide";
+        }
+
         return (
             <div key={id} className={classes} onClick={(e) => { this._handleClick(entry); }}>
                 <div class="title">

src/components/request_tree.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Panel from "./panel";
+import interfaces from "../interfaces/interfaces";
+
+class RequestTree extends React.Component<any, any> {
+
+    public constructor(props: any) {
+        super(props);
+    }
+
+    public render() {
+        return (
+            <Panel title={"Composition Tree"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+                // TODO
+            </Panel>
+        );
+    }
+
+}
+
+export default RequestTree;

src/components/settings.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router";
 import Panel from "./panel";
+import getDefaultSettings from "../core/default_settings";
 
 class SettingsEditor extends React.Component<any, any> {
 
@@ -15,14 +16,23 @@ class SettingsEditor extends React.Component<any, any> {
                     <div className="form-group">
                         <label htmlFor="settings_log_size">Maximun Log Size:</label>
                         <input type="text" className="form-control" style={{ width: "50%" }}
-                               id="settings_log_size" placeholder="Maximun number of entries in the request log" />
+                               id="settings_log_size"
+                               placeholder="Maximun number of entries in the request log"
+                               defaultValue={this.props.settings.size} />
                     </div>
-                    <button type="button" className="btn btn-default">Save Changes</button>
+                    <button type="button" className="btn btn-default"
+                            onClick={this._handleSaveClick.bind(this)}>Save Changes</button>
                 </div>
             </Panel>
         );
     }
 
+    private _handleSaveClick() {
+        let settings = getDefaultSettings();
+        settings.size = 20; // TODO
+        this.props.saveSettingsAsync(settings);
+    }
+
 }
 
 export default SettingsEditor;

src/constants/action_types.ts

@@ -1,7 +1,12 @@
 const ACTION_TYPES = {
     ADD_LOG_ENTRY: "ADD_LOG_ENTRY",
     APP_INIT_SUCCESS: "APP_INIT_SUCCESS",
+    APP_SETTINGS_SUCCESS: "APP_SETTINGS_SUCCESS",
+    CLEAR_LOG: "CLEAR_LOG",
+    FILTER_LOG_ENTRIES: "FILTER_LOG_ENTRIES",
     RESIZE: "RESIZE",
+    SAVE_SETTINGS_ERROR: "SAVE_SETTINGS_ERROR",
+    SAVE_SETTINGS_SUCCESS: "SAVE_SETTINGS_SUCCESS",
     SELECT_BINDING: "SELECT_BINDING",
     SELECT_KERNEL: "SELECT_KERNEL",
     SELECT_LOG_ENTRY: "SELECT_LOG_ENTRY"