Mirrors/inspec
2
0
Fork 0
mirror of https://github.com/inspec/inspec synced 2025-02-17 06:28:40 +00:00
Code Issues Projects Releases Packages Wiki Activity

make the demo better!!

Browse source
This commit is contained in:
Victoria Jeffrey 2016-09-02 15:13:07 -04:00 • committed by Christoph Hartmann
parent 9e9de6c66b
commit 7f47f61f43
7 changed files with 90 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
www/tutorial/app/app.component.css
View file

@ -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;

97
www/tutorial/app/app.component.ts
View file

@ -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 :) '
}
}

5
www/tutorial/app/responses/ls.txt
View file

@ -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

18
www/tutorial/app/xterm-terminal/xterm-terminal.component.css
View file

@ -1,24 +1,22 @@
#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;
}

2
www/tutorial/app/xterm-terminal/xterm-terminal.component.html
View file

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

38
www/tutorial/app/xterm-terminal/xterm-terminal.component.ts
View file

@ -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);

1
www/tutorial/index.html
View file

@ -4,6 +4,7 @@
<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 -->