aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--vpp-userdemo/README.md27
-rw-r--r--vpp-userdemo/tutorials/Bridging (renamed from vpp-userdemo/tutorials/bridging)0
-rw-r--r--vpp-userdemo/tutorials/Routing (renamed from vpp-userdemo/tutorials/routing)0
-rw-r--r--vpp-userdemo/tutorials/Tracing (renamed from vpp-userdemo/tutorials/tracing)0
-rw-r--r--vpp-userdemo/ui/dist.prod/cssProd/style.css32
-rw-r--r--vpp-userdemo/ui/dist.prod/html/main.html12
6 files changed, 34 insertions, 37 deletions
diff --git a/vpp-userdemo/README.md b/vpp-userdemo/README.md
index 9820600..31fdc09 100644
--- a/vpp-userdemo/README.md
+++ b/vpp-userdemo/README.md
@@ -17,15 +17,7 @@
This is a Vagrant based user demo environment for beginners with VPP
-to access the GUI for the demo, simply open up your favorite browser and point it at
-` http://localhost:5000 `
-
-# RUNNING DEMOS VIA GUI
-
-- click on a tutorial from the list appearing on the side navigation bar.
-- Once the selected tutorial is loaded, click the "NEXT" button, or hit the SPACE bar to go through the steps.
-- Each step is executing the shown command against the VM, showing the response on the console that appears at the bottom of the GUI.
-
+You can run the demo either through the GUI (recommended) or through the CLI
# REQUIREMENTS
- vagrant (1.8)
@@ -38,24 +30,29 @@ to access the GUI for the demo, simply open up your favorite browser and point i
- ```vagrant up```
- ... run the demo
-# RUNNING DEMOs
-- From the Host, where you ran ```vagrant up``` run ```./run <demoname>```
+# RUNNING DEMOS VIA THE GUI
+
+- simply open up your favorite browser and point it at ` http://localhost:5000 `
+- click on a tutorial from the list appearing on the side navigation bar.
+- Once the selected tutorial is loaded, click the "Next" button, or hit the SPACE bar to go through the steps.
+- Each step is executing the shown command against the VM, showing the response on the console that appears at the bottom of the GUI.
-```./run <demoname>```
+# RUNNING DEMOs VIA THE CLI
+- From the Host, where you ran ```vagrant up``` run ```./run tutorials/<demoname>```
# DEMOs
-## routing - directly connected routing
+## Routing - directly connected routing
- Creates two network namespaces c1, c2
- A gateway interface for each on VPP
- Routes due to directly connected routes inserted into default FIB
-## bridging - directly connected interfaces into a bridge-domain
+## Bridging - directly connected interfaces into a bridge-domain
- Creates two network namespaces c1, c2
- Adds interfaces to VPP and add them to bridge-domain 1
- MAC addresses are automatically learned
-## tracing - how to show a "day in the life of a packet" in VPP
+## Tracing - how to show a "day in the life of a packet" in VPP
- Same environment as "routing" demo
- How to add a trace
- View a trace
diff --git a/vpp-userdemo/tutorials/bridging b/vpp-userdemo/tutorials/Bridging
index c2fe664..c2fe664 100644
--- a/vpp-userdemo/tutorials/bridging
+++ b/vpp-userdemo/tutorials/Bridging
diff --git a/vpp-userdemo/tutorials/routing b/vpp-userdemo/tutorials/Routing
index 36e49af..36e49af 100644
--- a/vpp-userdemo/tutorials/routing
+++ b/vpp-userdemo/tutorials/Routing
diff --git a/vpp-userdemo/tutorials/tracing b/vpp-userdemo/tutorials/Tracing
index 981ec7a..981ec7a 100644
--- a/vpp-userdemo/tutorials/tracing
+++ b/vpp-userdemo/tutorials/Tracing
diff --git a/vpp-userdemo/ui/dist.prod/cssProd/style.css b/vpp-userdemo/ui/dist.prod/cssProd/style.css
index 4222468..9ade21c 100644
--- a/vpp-userdemo/ui/dist.prod/cssProd/style.css
+++ b/vpp-userdemo/ui/dist.prod/cssProd/style.css
@@ -23,7 +23,7 @@ html, body {
color: white; }
.nav {
- background-color: #258dc4;
+ background-color: #ed1c24;
position: relative;
width: 100%;
height: 50px; }
@@ -141,13 +141,13 @@ html, body {
width: 50%;
margin-right: 50%; }
.progress-indicator > li.completed {
- color: #258dc4; }
+ color: #ed1c24; }
.progress-indicator > li.completed .bubble {
- background-color: #258dc4;
- color: #258dc4;
+ background-color: #ed1c24;
+ color: #ed1c24;
border-color: #0d3043; }
.progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
- background-color: #258dc4;
+ background-color: #ed1c24;
border-color: #0d3043; }
.progress-indicator > li.active {
color: #337AB7; }
@@ -236,7 +236,7 @@ html, body {
color: #a3a3a3;
font-size: 15px;
font-weight: bold;
- font-family: "Roboto"; }
+ font-family: "Arial"; }
.tutorials-icon {
color: white;
@@ -265,10 +265,10 @@ html, body {
outline: none; }
.tutorials-row:hover {
- background-color: #258dc4; }
+ background-color: #ed1c24; }
.tutorials-active {
- background-color: #258dc4; }
+ background-color: #ed1c24; }
.card-footer {
background-color: #fafafa;
@@ -314,7 +314,7 @@ html, body {
position: relative;
top: 18px;
font-size: 18px;
- font-family: "Roboto"; }
+ font-family: "Arial"; }
.card-button:focus, .card-button-group:focus {
outline: none; }
@@ -333,13 +333,13 @@ html, body {
color: #434343;
font-weight: 100;
font-size: 18px;
- font-family: "Roboto-Light";
+ font-family: "Arial";
margin: 0; }
.command-text {
font-weight: bold;
font-family: monospace;
- color: #258dc4; }
+ color: #26cad3; }
.command-response {
display: block;
@@ -379,7 +379,7 @@ html, body {
cursor: pointer; }
.clipboard-div:hover > .clipboard-text, .clipboard-div:hover > .clipboard-icon {
- color: #258dc4; }
+ color: #26cad3; }
.code-block {
display: inline-block;
@@ -957,13 +957,13 @@ html, body {
width: 50%;
margin-right: 50%; }
.progress-indicator > li.completed {
- color: #258dc4; }
+ color: #26cad3; }
.progress-indicator > li.completed .bubble {
- background-color: #258dc4;
- color: #258dc4;
+ background-color: #1cede5;
+ color: #26cad3;
border-color: #0d3043; }
.progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
- background-color: #258dc4;
+ background-color: #1cede5;
border-color: #0d3043; }
.progress-indicator > li.active {
color: #337AB7; }
diff --git a/vpp-userdemo/ui/dist.prod/html/main.html b/vpp-userdemo/ui/dist.prod/html/main.html
index b0ba597..3c5300c 100644
--- a/vpp-userdemo/ui/dist.prod/html/main.html
+++ b/vpp-userdemo/ui/dist.prod/html/main.html
@@ -9,9 +9,9 @@
<div layout layout-align="center" class="tutorials-row" ng-repeat="tutorial in tutorials" ng-click="selectTutorial(tutorial)"
ng-class="{'tutorials-active': (tutorial == selectedTutorial)}">
<div flex="90">
- <i class="material-icons tutorials-icon">insert_drive_file</i>
+ <i class="material-icons tutorials-icon">label</i>
<h5 class="tutorials-text">{{tutorial}}</h5>
- <i ng-if="selectedTutorial == tutorial" class="material-icons tutorial-playing-icon">playlist_play</i>
+ <i ng-if="selectedTutorial == tutorial" class="material-icons tutorial-playing-icon">playlist_add_check</i>
</div>
</div>
</div>
@@ -26,11 +26,11 @@
<md-card-header-text>
<div layout>
<div flex>
- <span class="md-title card-title">{{selectedTutorial}}</span>
+ <span style="font-family:arial;"class="md-title card-title">{{selectedTutorial}}</span>
</div>
<div flex>
<div class="clipboard-div" ng-if="selectedTutorial" ngclipboard data-clipboard-text="{{commands[pointer]}}">
- <span class="clipboard-text">Copy to clipboard</span>
+ <span style="font-family:arial;"class="clipboard-text">Copy to Clipboard</span>
<i class="material-icons clipboard-icon">content_paste</i>
</div>
</div>
@@ -52,7 +52,7 @@
<md-progress-circular ng-if="!stepDone" class="card-loader" md-mode="indeterminate"></md-progress-circular>
<div ng-if="stepDone" class="card-button-group" ng-click="nextStep()">
<i class="material-icons card-button">navigate_next</i>
- <span class="card-button-text">next</span>
+ <span class="card-button-text">Next</span>
</div>
</md-card-footer>
</md-card>
@@ -102,4 +102,4 @@
</div>
</div>
</div>
-</div> \ No newline at end of file
+</div>