Merge pull request #1015 from chef/vj/make-demo-better

make demo better

www/tutorial/README.md

@@ -1,7 +1,7 @@
 ## InSpec Demo
 
 run `npm install` to load dependencies
-run `npm start` to load demo in your browser
+run `npm run start` and browse to localhost:8080
 
 To generate content for the app/responses folder,
 run `bundle exec rake update demo` from the root of inspec project.

www/tutorial/app/app.component.css

@@ -23,7 +23,7 @@
 .guide {
   font-family: monospace;
   font-size: 1.2rem;
-  max-width: 1200px;
+  max-width: 1000px;
   margin: auto;
   margin-top: 1rem;
   margin-bottom: 1rem;

www/tutorial/app/app.component.ts

@@ -29,71 +29,76 @@ export class AppComponent implements OnInit {
 
   updateInstructions(step) {
     let totalSteps = this.instructionsArray.length - 1;
-    let originalCounter = this.counter;
-    let error = Math.random();
+    let msg = Math.random();
     if (step === 'next') {
-      if (originalCounter === totalSteps) {
-        // if the user has reached the end of the demo, send
-        // a unique response to back to ensure correct handling in ui
-        this.response = 'Message: ' + error + ': you have reached the end of the demo';
-      } else {
+      if (this.counter < totalSteps) {
         this.counter += 1;
-        this.response = 'moving forward to step ' + this.counter;
       }
+      this.response = ' Message: ' + msg;
+
     } else if (step === 'prev') {
-      this.counter -= 1;
-      if (this.counter < 0) {
-        this.counter = 0;
-        this.response = 'Message: ' + error + ': you have reached the beginning of the demo';
-      } else {
-        this.response = 'moving back to step ' + this.counter;
+      if (this.counter > 0) {
+        this.counter -= 1;
       }
+      this.response = ' Message: ' + msg;
     }
     this.instructions = this.instructionsArray[this.counter]['_body'];
   }
 
   evalCommand(command) {
-    // play with inspec shell
     if (this.shell === 'inspec-shell') {
       this.parseInspecShell(command);
     }
-    // match on various commands or print inspec help
+    else if (command.match(/^inspec\s*.*/)) {
+      this.parseInspecCommand(command);
+    }
+    else if (command.match(/^next\s*/)) {
+      this.updateInstructions('next');
+    }
+    else if (command.match(/^prev\s*/)) {
+      this.updateInstructions('prev');
+    }
+    else if (command.match(/^ls\s*/)) {
+      this.response = " " + this.responsesArray[1]['_body'];
+    }
+    else if (command.match(/^pwd\s*/)) {
+      this.response = " " + this.responsesArray[2]['_body'];
+    }
+    else if (command.match(/^cat\s*README.md\s*/i)) {
+      this.response = " Only a few commands are implemented in this terminal.  Please follow the demo";
+    }
+    else if (command.match(/^less\s*README.md\s*/i)) {
+      this.response = " Only a few commands are implemented in this terminal.  Please follow the demo.";
+    }
     else {
-      if (command === 'inspec shell') {
-        this.shell = 'inspec-shell'
-        this.response = 'Welcome to the InSpec Shell\n To find out how to use it, type: help\n';
-      }
-      // TODO: cat readme.md less readme.md  "Only a few commands are implemented in this terminal."
-      else if (command.match(/^inspec\s*exec\s*.*/)) {
-        this.parseInspecExec(command);
-      }
-      else if (command.match(/^inspec\s*version\s*/)) {
-        this.response = this.responsesArray[4]['_body'];
-      }
-      else if (command.match(/^next\s*/)) {
-        this.updateInstructions('next');
-      }
-      else if (command.match(/^prev\s*/)) {
-        this.updateInstructions('prev');
-      }
-      else if (command.match(/^ls\s*/)) {
-        this.response = this.responsesArray[1]['_body'];
-      }
-      else if (command.match(/^pwd\s*/)) {
-        this.response = this.responsesArray[2]['_body'];
-      }
-      else {
-        this.response = this.responsesArray[0]['_body'];
-      }
+      this.response = " invalid command: " + command;
+    }
+  }
+
+  parseInspecCommand(command) {
+    let command_target = command.match(/^inspec\s*(.*)/);
+    if (command_target[1] === 'shell') {
+      this.shell = 'inspec-shell'
+      this.response = " " + 'Welcome to the InSpec Shell\r\n To find out how to use it, type: help\r\n To leave, type: exit';
+    }
+    else if (command_target[1].match(/^exec\s*.*/)) {
+      this.parseInspecExec(command);
+    }
+    else if (command_target[1].match(/^version\s*/)) {
+      this.response = " " + this.responsesArray[4]['_body'];
+    }
+    else {
+      let msg = Math.random();
+      this.response = " " + this.responsesArray[0]['_body'] + " " + msg;
     }
   }
 
   parseInspecExec(command) {
     let target = command.match(/^inspec exec\s*(.*)/);
     if (target[1] === 'examples/profile') {
-      this.response = this.responsesArray[3]['_body'];
+      this.response = " " + this.responsesArray[3]['_body'];
     } else {
-      this.response = "Could not fetch inspec profile in '" + target[1] + "' ";
+      this.response = "  Could not fetch inspec profile in '" + target[1] + "' ";
     }
   }
 
@@ -104,11 +109,11 @@ export class AppComponent implements OnInit {
       this.response = '';
     }
     else if (command.match(/^ls\s*/)) {
-      this.response = this.responsesArray[5]['_body'];
+      this.response = " " + this.responsesArray[5]['_body'];
     }
     // TODO: functionality for inspec Shell
     else {
-      this.response = 'soon this will work, but not yet :) '
+      this.response = " " + 'soon this will work, but not yet :) '
     }
   }
 

www/tutorial/app/responses/ls.txt

@@ -1,4 +1 @@
-Berksfile         CONTRIBUTING.md   Gemfile.lock      MAINTAINERS.md    Rakefile          coverage          inspec-0.30.0.gem
-omnibus           test              Berksfile.lock    Dockerfile        ISSUE_TEMPLATE.md MAINTAINERS.toml  appveyor.yml
-docs              inspec.gemspec    profile.tar.gz    www               CHANGELOG.md      Gemfile           LICENSE
-README.md         bin               examples          lib               tasks
+README.md

www/tutorial/app/xterm-terminal/xterm-terminal.component.css

@@ -1,24 +1,26 @@
 #terminal-container {
     width: 1200px;
-    height: 800px;
+    height: 500px;
     margin: 0 auto;
     padding: 2px;
+    font-size: 16px;
+    margin-left: 70px;
 }
 
-/*the app was having trouble setting the following css
-classes, so i added a host and /deep/ call to ensure they get set*/
-
-:host /deep/ .terminal {
-    background-color: black;
+#terminal-container .terminal {
+    background-color: #111;
     color: #fafafa;
     padding: 2px;
-    outline: 0;
 }
 
-:host /deep/ .terminal:focus .terminal-cursor {
+#terminal-container .terminal:focus .terminal-cursor {
     background-color: #fafafa;
 }
 
-:host /deep/ .xterm-helpers {
-    display: none;
+:host /deep/ .xterm-color-0 {
+    color: black;
 }
+
+:host /deep/ .xterm-color-6 {
+    color: lightskyblue;
+}

www/tutorial/app/xterm-terminal/xterm-terminal.component.html

@@ -1 +1 @@
-<div (keyup)="onKey($event)" id="terminal-container"></div>
+<div (keyup)="onKey($event)" id="terminal-container"></div>

www/tutorial/app/xterm-terminal/xterm-terminal.component.ts

@@ -16,6 +16,7 @@ export class XtermTerminalComponent implements OnInit {
   currentResponse: string;
   shellStatus: string;
   buffer: string = '';
+  poppedCommands: any = [];
 
   // xterm variables
   terminalContainer: any;
@@ -23,15 +24,12 @@ export class XtermTerminalComponent implements OnInit {
   optionElements: any;
   cols: string;
   rows: string;
-  shellprompt: string = '$ ';
+  shellprompt: string = ' $ ';
 
 
  ngOnInit() {
-    this.terminalContainer = document.getElementById('terminal-container'),
-    this.optionElements = {
-      cursorBlink: true
-    },
-    this.cols = '70',
+    this.terminalContainer = document.getElementById('terminal-container');
+    this.cols = '70';
     this.rows = '70';
     this.createTerminal();
   }
@@ -75,21 +73,21 @@ export class XtermTerminalComponent implements OnInit {
   setPrompt() {
     this.buffer = '';
     if (this.shell === 'inspec-shell') {
-      this.term.write('\r\ninspec> ');
+      this.term.write(" " + '\r\ninspec> ');
     } else {
-      this.term.write('\r\n' + this.shellprompt);
+      this.term.write(this.shellprompt);
     }
   }
 
   onKey(ev) {
     var shell = null
-    var printable = ['Alt', 'Control', 'Meta', 'Shift', 'CapsLock', 'Tab', 'Escape'].indexOf(ev.key) == -1
+    var printable = ['Alt', 'Control', 'Meta', 'Shift', 'CapsLock', 'Tab', 'Escape', 'ArrowLeft', 'ArrowRight'].indexOf(ev.key) == -1
 
     // on enter, save command to array and send current value of buffer
     // to parent component (app).  if the command is the same as the previous command
     // entered, we just diplay the currentResponse. the reason this is being done here and
     // not in the app component is because the ngOnChanges that tracks the value of the
-    // emitted event won't recognize that there has been a change if it is the same
+    // emitted event won't recognize that there has been a change if it is the same.
     if (ev.keyCode == 13) {
       this.previousCommands.push(this.buffer);
       this.term.write('\r\n');
@@ -119,19 +117,37 @@ export class XtermTerminalComponent implements OnInit {
       }
     }
     // on up arrow, delete anything on line and print previous command
+    // and push last to poppedCommands
     else if (ev.keyCode === 38) {
       let last;
       if (this.previousCommands.length > 0) {
         last = this.previousCommands.pop();
+        this.poppedCommands.push(last);
       } else {
         last = '';
       }
-      let letters = this.term.x - 2;
+      let letters = this.term.x - 3;
       for (var i = 0; i < letters; i++) {
         this.term.write('\b \b');
       }
       this.term.write(last);
     }
+    // on down arrow, delete anything on line and print from popped command
+    // and push previous to previousCommands
+    else if (ev.keyCode === 40) {
+      let previous;
+      if (this.poppedCommands.length > 0) {
+        previous = this.poppedCommands.pop();
+        this.previousCommands.push(previous);
+      } else {
+        previous = '';
+      }
+      let letters = this.term.x - 3;
+      for (var i = 0; i < letters; i++) {
+        this.term.write('\b \b');
+      }
+      this.term.write(previous);
+    }
     // write each character on prompt line
     else if (printable) {
       this.term.write(ev.key);

www/tutorial/index.html

@@ -4,21 +4,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="node_modules/xterm/src/xterm.css">
     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
     <!-- 1. Load libraries -->
      <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <!-- 2. Configure SystemJS -->
-    <script src="systemjs.config.js"></script>
+    <!--2. Load Webpack Config-->
+    <script src="dist/bundle.js"></script>
     <!-- 3. Load Xterm -->
     <script src="node_modules/xterm/src/xterm.js"></script>
     <script src="node_modules/xterm/addons/fit/fit.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
   </head>
   <!-- 3. Display the application -->
   <body>

www/tutorial/package.json

@@ -2,12 +2,9 @@
   "name": "angular2-quickstart",
   "version": "1.0.0",
   "scripts": {
-    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
-    "lite": "lite-server",
-    "postinstall": "typings install",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "typings": "typings"
+    "build": "node --max-old-space-size=4096 ./node_modules/webpack/bin/webpack --config webpack.config.js --progress --profile --colors --display-error-details --display-cached",
+    "start": "node --max-old-space-size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server & open http://localhost:8080/",
+    "dev": "node --max-old-space-size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server --config config/webpack.config.js --inline --progress --hot --profile --colors --watch --display-error-details --display-cachedwebpack-dev-server & open http://localhost:8080/"
   },
   "license": "ISC",
   "dependencies": {
@@ -27,12 +24,18 @@
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.27",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.15.1",
     "xterm": "git://github.com/sourcelair/xterm.js.git#1.1.2",
     "zone.js": "^0.6.12"
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
+    "css-loader": "^0.25.0",
     "lite-server": "^2.2.0",
+    "sass-loader": "^4.0.2",
+    "source-map-loader": "^0.1.5",
+    "ts-loader": "^0.8.2",
     "typescript": "^1.8.10",
     "typings": "^1.0.4"
   }

www/tutorial/systemjs.config.js

@@ -1,48 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function(global) {
-  // map tells the System loader where to look for things
-  var map = {
-    'app':                        'app', // 'dist',
-    '@angular':                   'node_modules/@angular',
-    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-    'rxjs':                       'node_modules/rxjs'
-  };
-  // packages tells the System loader how to load when no filename and/or no extension
-  var packages = {
-    'app':                        { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs':                       { defaultExtension: 'js' },
-    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
-  };
-  var ngPackageNames = [
-    'common',
-    'compiler',
-    'core',
-    'forms',
-    'http',
-    'platform-browser',
-    'platform-browser-dynamic',
-    'router',
-    'router-deprecated',
-    'upgrade',
-  ];
-  // Individual files (~300 requests):
-  function packIndex(pkgName) {
-    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
-  }
-  // Bundled (~40 requests):
-  function packUmd(pkgName) {
-    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
-  }
-  // Most environments should use UMD; some (Karma) need the individual index files
-  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
-  // Add package entries for angular packages
-  ngPackageNames.forEach(setPackageConfig);
-  var config = {
-    map: map,
-    packages: packages
-  };
-  System.config(config);
-})(this);

www/tutorial/typings.json

@@ -2,6 +2,7 @@
   "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160602141332",
     "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
-    "node": "registry:dt/node#6.0.0+20160807145350"
+    "node": "registry:dt/node#6.0.0+20160907103612",
+    "zone.js": "registry:dt/zone.js#0.0.0+20160316155526"
   }
 }