From 51e00de1e4a4102e5d15c2e219787f8565f51019 Mon Sep 17 00:00:00 2001 From: Padraig Connolly Date: Mon, 21 Nov 2016 10:10:07 +0000 Subject: vpp-userdemo: Small changes to README/GUI Changes to README: *README flow changed (i.e intro first, setup next, then running) *Changed CLI command help (tutorials directory needed to run demo) Changes to GUI: *Added fd.io colors to GUI interface *Added more relevent icons to each tutorial *Capitalized tutorial file names (Looks better on GUI) Change-Id: Ib6c1347e24687d489f3b0be3808aefb4bbb622f2 Signed-off-by: Padraig Connolly --- vpp-userdemo/README.md | 27 ++++++-------- vpp-userdemo/tutorials/Bridging | 57 +++++++++++++++++++++++++++++ vpp-userdemo/tutorials/Routing | 57 +++++++++++++++++++++++++++++ vpp-userdemo/tutorials/Tracing | 46 +++++++++++++++++++++++ vpp-userdemo/tutorials/bridging | 57 ----------------------------- vpp-userdemo/tutorials/routing | 57 ----------------------------- vpp-userdemo/tutorials/tracing | 46 ----------------------- vpp-userdemo/ui/dist.prod/cssProd/style.css | 32 ++++++++-------- vpp-userdemo/ui/dist.prod/html/main.html | 12 +++--- 9 files changed, 194 insertions(+), 197 deletions(-) create mode 100644 vpp-userdemo/tutorials/Bridging create mode 100644 vpp-userdemo/tutorials/Routing create mode 100644 vpp-userdemo/tutorials/Tracing delete mode 100644 vpp-userdemo/tutorials/bridging delete mode 100644 vpp-userdemo/tutorials/routing delete mode 100644 vpp-userdemo/tutorials/tracing 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 ``` +# 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 ``` +# RUNNING DEMOs VIA THE CLI +- From the Host, where you ran ```vagrant up``` run ```./run tutorials/``` # 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 new file mode 100644 index 0000000..c2fe664 --- /dev/null +++ b/vpp-userdemo/tutorials/Bridging @@ -0,0 +1,57 @@ +#!/usr/bin/env bash + +# Copyright (c) 2016 Cisco and/or its affiliates. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at: +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +C1_IP="172.16.1.2/24" +C1_GW="172.16.1.1" +C2_IP="172.16.1.3/24" +C2_GW="172.16.1.1" + +INSTR=() +CMD=() +INSTR+=("Welcome to the bridging demo. This will show you some simple commands to connect two linux containers to VPP via an L2 bridge.") +CMD+=("") + +INSTR+=("To show interfaces type:") +CMD+=("sudo vppctl show inter") + +INSTR+=("Lets examine our workloads cone and ctwo") +CMD+=("sudo lxc-attach -n cone -- ip -o a") + +INSTR+=("") +CMD+=("sudo lxc-attach -n ctwo -- ip -o a") + +INSTR+=("To add interfaces, we add the host-side of the veth link pair.") +CMD+=("ip link") + +INSTR+=("The links we need to add are link1 and link2 so lets add them with") +CMD+=("sudo vppctl create host-interface name link1; sudo vppctl create host-interface name link2; sudo vppctl show inter") + +INSTR+=("Change the links state to up") +CMD+=("sudo vppctl set interface state host-link1 up; sudo vppctl set interface state host-link2 up; sudo vppctl show inter") + +INSTR+=("Add IP addresses for the other end of each veth link") +CMD+=("sudo vppctl set interface l2 bridge host-link1 1; sudo vppctl set interface l2 bridge host-link2 1") + +INSTR+=("You can also see the bridge-domain") +CMD+=("sudo vppctl show bridge-domain 1 detail") + +INSTR+=("At long last you probably want to see some pings") +CMD+=("sudo lxc-attach -n cone -- ping -c3 172.16.1.3") + +INSTR+=("") +CMD+=("sudo lxc-attach -n ctwo -- ping -c3 172.16.1.2") + +INSTR+=("Thanks for doing the bridging demo. To restart this demo and type these commands yourself. vagrant ssh; sudo /vagrant/netns.sh; cat /vagrant/bridging.cmd") +CMD+=("") diff --git a/vpp-userdemo/tutorials/Routing b/vpp-userdemo/tutorials/Routing new file mode 100644 index 0000000..36e49af --- /dev/null +++ b/vpp-userdemo/tutorials/Routing @@ -0,0 +1,57 @@ +#!/usr/bin/env bash + +# Copyright (c) 2016 Cisco and/or its affiliates. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at: +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +C1_IP="172.16.1.2/24" +C1_GW="172.16.1.1" +C2_IP="172.16.2.2/24" +C2_GW="172.16.2.1" + +INSTR=() +CMD=() +INSTR+=("Welcome to the routing demo. This will show you some simple commands to connect two linux containers to VPP and ping between them.") +CMD+=("") + +INSTR+=("To show interfaces type:") +CMD+=("sudo vppctl show inter") + +INSTR+=("Lets examine our workloads cone and ctwo") +CMD+=("sudo lxc-attach -n cone -- ip -o a") + +INSTR+=("") +CMD+=("sudo lxc-attach -n ctwo -- ip -o a") + +INSTR+=("To add interfaces, we add the host-side of the veth link pair.") +CMD+=("ip link") + +INSTR+=("The links we need to add are link1 and link2 so lets add them with") +CMD+=("sudo vppctl create host-interface name link1; sudo vppctl create host-interface name link2; sudo vppctl show inter") + +INSTR+=("Change the links state to up") +CMD+=("sudo vppctl set interface state host-link1 up; sudo vppctl set interface state host-link2 up; sudo vppctl show inter") + +INSTR+=("Add IP addresses for the other end of each veth link") +CMD+=("sudo vppctl set interface ip address host-link1 172.16.1.1/24; sudo vppctl set interface ip address host-link2 172.16.2.1/24; sudo vppctl show interface address") + +INSTR+=("You can also see the L3 table, or FIB by doing") +CMD+=("sudo vppctl show ip fib") + +INSTR+=("At long last you probably want to see some pings") +CMD+=("sudo lxc-attach -n cone -- ping -c3 172.16.2.2") + +INSTR+=("") +CMD+=("sudo lxc-attach -n ctwo -- ping -c3 172.16.1.2") + +INSTR+=("Thanks for doing the routing demo. To restart this demo and type these commands yourself. vagrant ssh sudo /vagrant/netns.sh; cat /vagrant/routing.cmd") +CMD+=("") diff --git a/vpp-userdemo/tutorials/Tracing b/vpp-userdemo/tutorials/Tracing new file mode 100644 index 0000000..981ec7a --- /dev/null +++ b/vpp-userdemo/tutorials/Tracing @@ -0,0 +1,46 @@ +#!/usr/bin/env bash + +# Copyright (c) 2016 Cisco and/or its affiliates. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at: +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +C1_IP="172.16.1.2/24" +C1_GW="172.16.1.1" +C2_IP="172.16.2.2/24" +C2_GW="172.16.2.1" + +INSTR=() +CMD=() +INSTR+=("Welcome to the tracing demo. This will show you some simple commands to connect two +linux netnamespaces to VPP and show packet tracing.") +CMD+=("") + +INSTR+=("The links we need to add are link1 and link2 so lets add them with") +CMD+=("sudo vppctl create host-interface name link1; sudo vppctl create host-interface name link2; sudo vppctl set interface state host-link1 up; sudo vppctl set interface state host-link2 up; sudo vppctl show inter") + +INSTR+=("Add IP addresses for the other end of each veth link") +CMD+=("sudo vppctl set interface ip address host-link1 172.16.1.1/24; sudo vppctl set interface ip address host-link2 172.16.2.1/24; sudo vppctl show interface address") + +INSTR+=("Lets add the trace command for the graph-node our type of interface af-packet...") +CMD+=("sudo vppctl trace add af-packet-input 50") + +INSTR+=("At long last you probably want to see some pings") +CMD+=("sudo lxc-attach -n cone -- ping -c3 172.16.2.2") + +INSTR+=("") +CMD+=("sudo lxc-attach -n ctwo -- ping -c3 172.16.1.2") + +INSTR+=("Viewing the trace:") +CMD+=("sudo vppctl show trace") + +INSTR+=("Thanks for doing the tracing demo. To restart this demo and type these commands yourself. vagrant ssh; sudo /vagrant/netns.sh; cat /vagrant/tracing.cmd") +CMD+=("") diff --git a/vpp-userdemo/tutorials/bridging b/vpp-userdemo/tutorials/bridging deleted file mode 100644 index c2fe664..0000000 --- a/vpp-userdemo/tutorials/bridging +++ /dev/null @@ -1,57 +0,0 @@ -#!/usr/bin/env bash - -# Copyright (c) 2016 Cisco and/or its affiliates. -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at: -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. - -C1_IP="172.16.1.2/24" -C1_GW="172.16.1.1" -C2_IP="172.16.1.3/24" -C2_GW="172.16.1.1" - -INSTR=() -CMD=() -INSTR+=("Welcome to the bridging demo. This will show you some simple commands to connect two linux containers to VPP via an L2 bridge.") -CMD+=("") - -INSTR+=("To show interfaces type:") -CMD+=("sudo vppctl show inter") - -INSTR+=("Lets examine our workloads cone and ctwo") -CMD+=("sudo lxc-attach -n cone -- ip -o a") - -INSTR+=("") -CMD+=("sudo lxc-attach -n ctwo -- ip -o a") - -INSTR+=("To add interfaces, we add the host-side of the veth link pair.") -CMD+=("ip link") - -INSTR+=("The links we need to add are link1 and link2 so lets add them with") -CMD+=("sudo vppctl create host-interface name link1; sudo vppctl create host-interface name link2; sudo vppctl show inter") - -INSTR+=("Change the links state to up") -CMD+=("sudo vppctl set interface state host-link1 up; sudo vppctl set interface state host-link2 up; sudo vppctl show inter") - -INSTR+=("Add IP addresses for the other end of each veth link") -CMD+=("sudo vppctl set interface l2 bridge host-link1 1; sudo vppctl set interface l2 bridge host-link2 1") - -INSTR+=("You can also see the bridge-domain") -CMD+=("sudo vppctl show bridge-domain 1 detail") - -INSTR+=("At long last you probably want to see some pings") -CMD+=("sudo lxc-attach -n cone -- ping -c3 172.16.1.3") - -INSTR+=("") -CMD+=("sudo lxc-attach -n ctwo -- ping -c3 172.16.1.2") - -INSTR+=("Thanks for doing the bridging demo. To restart this demo and type these commands yourself. vagrant ssh; sudo /vagrant/netns.sh; cat /vagrant/bridging.cmd") -CMD+=("") diff --git a/vpp-userdemo/tutorials/routing b/vpp-userdemo/tutorials/routing deleted file mode 100644 index 36e49af..0000000 --- a/vpp-userdemo/tutorials/routing +++ /dev/null @@ -1,57 +0,0 @@ -#!/usr/bin/env bash - -# Copyright (c) 2016 Cisco and/or its affiliates. -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at: -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. - -C1_IP="172.16.1.2/24" -C1_GW="172.16.1.1" -C2_IP="172.16.2.2/24" -C2_GW="172.16.2.1" - -INSTR=() -CMD=() -INSTR+=("Welcome to the routing demo. This will show you some simple commands to connect two linux containers to VPP and ping between them.") -CMD+=("") - -INSTR+=("To show interfaces type:") -CMD+=("sudo vppctl show inter") - -INSTR+=("Lets examine our workloads cone and ctwo") -CMD+=("sudo lxc-attach -n cone -- ip -o a") - -INSTR+=("") -CMD+=("sudo lxc-attach -n ctwo -- ip -o a") - -INSTR+=("To add interfaces, we add the host-side of the veth link pair.") -CMD+=("ip link") - -INSTR+=("The links we need to add are link1 and link2 so lets add them with") -CMD+=("sudo vppctl create host-interface name link1; sudo vppctl create host-interface name link2; sudo vppctl show inter") - -INSTR+=("Change the links state to up") -CMD+=("sudo vppctl set interface state host-link1 up; sudo vppctl set interface state host-link2 up; sudo vppctl show inter") - -INSTR+=("Add IP addresses for the other end of each veth link") -CMD+=("sudo vppctl set interface ip address host-link1 172.16.1.1/24; sudo vppctl set interface ip address host-link2 172.16.2.1/24; sudo vppctl show interface address") - -INSTR+=("You can also see the L3 table, or FIB by doing") -CMD+=("sudo vppctl show ip fib") - -INSTR+=("At long last you probably want to see some pings") -CMD+=("sudo lxc-attach -n cone -- ping -c3 172.16.2.2") - -INSTR+=("") -CMD+=("sudo lxc-attach -n ctwo -- ping -c3 172.16.1.2") - -INSTR+=("Thanks for doing the routing demo. To restart this demo and type these commands yourself. vagrant ssh sudo /vagrant/netns.sh; cat /vagrant/routing.cmd") -CMD+=("") diff --git a/vpp-userdemo/tutorials/tracing b/vpp-userdemo/tutorials/tracing deleted file mode 100644 index 981ec7a..0000000 --- a/vpp-userdemo/tutorials/tracing +++ /dev/null @@ -1,46 +0,0 @@ -#!/usr/bin/env bash - -# Copyright (c) 2016 Cisco and/or its affiliates. -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at: -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. - -C1_IP="172.16.1.2/24" -C1_GW="172.16.1.1" -C2_IP="172.16.2.2/24" -C2_GW="172.16.2.1" - -INSTR=() -CMD=() -INSTR+=("Welcome to the tracing demo. This will show you some simple commands to connect two -linux netnamespaces to VPP and show packet tracing.") -CMD+=("") - -INSTR+=("The links we need to add are link1 and link2 so lets add them with") -CMD+=("sudo vppctl create host-interface name link1; sudo vppctl create host-interface name link2; sudo vppctl set interface state host-link1 up; sudo vppctl set interface state host-link2 up; sudo vppctl show inter") - -INSTR+=("Add IP addresses for the other end of each veth link") -CMD+=("sudo vppctl set interface ip address host-link1 172.16.1.1/24; sudo vppctl set interface ip address host-link2 172.16.2.1/24; sudo vppctl show interface address") - -INSTR+=("Lets add the trace command for the graph-node our type of interface af-packet...") -CMD+=("sudo vppctl trace add af-packet-input 50") - -INSTR+=("At long last you probably want to see some pings") -CMD+=("sudo lxc-attach -n cone -- ping -c3 172.16.2.2") - -INSTR+=("") -CMD+=("sudo lxc-attach -n ctwo -- ping -c3 172.16.1.2") - -INSTR+=("Viewing the trace:") -CMD+=("sudo vppctl show trace") - -INSTR+=("Thanks for doing the tracing demo. To restart this demo and type these commands yourself. vagrant ssh; sudo /vagrant/netns.sh; cat /vagrant/tracing.cmd") -CMD+=("") 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 @@
- insert_drive_file + label
{{tutorial}}
- playlist_play + playlist_add_check
@@ -26,11 +26,11 @@
- {{selectedTutorial}} + {{selectedTutorial}}
- Copy to clipboard + Copy to Clipboard content_paste
@@ -52,7 +52,7 @@
navigate_next - next + Next
@@ -102,4 +102,4 @@
- \ No newline at end of file + -- cgit 1.2.3-korg