88 < meta name ="author " content ="Lykon, Lollo, Neeja, Pastello " />
99 < title > Netkit Lab Generator</ title >
1010 < link rel ="stylesheet " href ="src/static/vendor/css/bootstrap.min.css " />
11+ < link rel ="stylesheet " href ="src/style/main.css " />
1112 < script src ="src/lab-generator/helper.js "> </ script >
1213</ head >
1314
2021
2122 <!-- MAIN-->
2223 < div data-ng-app ="napp " data-ng-controller ="nc ">
23- < link rel ="stylesheet " href ="src/style/main.css " />
2424 < script src ="src/static/vendor/js/angular.min.js "> </ script >
2525 < script src ="src/lab-generator/controller.js "> </ script >
26-
2726 <!-- NAVBAR-->
2827 < div >
2928 < nav id ="main-nav " style ="-webkit-app-region: drag "
@@ -402,7 +401,14 @@ <h4>
402401 </ div >
403402
404403 < div data-ng-show ="machine.type=='router' ">
405- < label > Dynamic routing: </ label >
404+ < label > Dynamic routing </ label > < br >
405+ < span > Routing software:</ span >
406+ < select id ="daemonDropDown " data-ng-model ="machine.routingSoftware ">
407+ < option value ="frr "> FRR</ option >
408+ < option value ="quagga "> Quagga</ option >
409+ </ select >
410+ < br > < br >
411+ < span > Routing protocols:</ span >
406412 < p >
407413 < input title ="en " type ="checkbox " value ="router "
408414 data-ng-model ="machine.routing.rip.en " /> rip
@@ -444,10 +450,13 @@ <h4>
444450 < input title ="redistributec " type ="checkbox " value ="1 "
445451 data-ng-model ="machine.routing.rip.connected " /> redistribute connected
446452 </ div >
447- < label > Directly in ripd.conf:</ label >
453+ < div >
454+ < label data-ng-show ="machine.routingSoftware == 'quagga' "> Directly in ripd.conf:</ label >
455+ < label data-ng-show ="machine.routingSoftware == 'frr' "> Directly after rip config in frr.conf:</ label >
448456 < textarea title ="free " rows ="3 " class ="form-control "
449457 data-ng-model ="machine.routing.rip.free "> </ textarea >
450458 < hr >
459+ </ div >
451460 </ div >
452461 < p >
453462 < input title ="en " type ="checkbox " value ="ns "
458467 Network</ span >
459468 < span class ="btn btn-danger " data-ng-click ="removeOspfNetwork(machine) "
460469 data-ng-disabled ="machine.routing.ospf.network.length<=1 "> Remove
461- Newtork </ span >
470+ Network </ span >
462471 < div data-ng-repeat ="onet in machine.routing.ospf.network track by $index ">
463472 < div >
464473 < label > Network: </ label >
@@ -503,10 +512,13 @@ <h4>
503512 value ="{{i.eth.number}} "> eth{{i.eth.number}}</ option >
504513 </ select >
505514 </ div >
506- < label > Directly in ospfd.conf:</ label >
515+ < div >
516+ < label data-ng-show ="machine.routingSoftware == 'quagga' "> Directly in ospfd.conf:</ label >
517+ < label data-ng-show ="machine.routingSoftware == 'frr' "> Directly after ospf config in frr.conf:</ label >
507518 < textarea title ="free " rows ="3 " class ="form-control "
508519 data-ng-model ="machine.routing.ospf.free "> </ textarea >
509520 < hr >
521+ </ div >
510522 </ div >
511523 < p >
512524 < input title ="en " type ="checkbox " value ="router "
@@ -547,11 +559,18 @@ <h4>
547559 data-ng-model ="machine.routing.bgp.remote[$index].description " />
548560 </ div >
549561 < div >
550- < label > Directly in bgpd.conf:</ label >
562+ < label data-ng-show ="machine.routingSoftware == 'quagga' "> Directly in bgpd.conf:</ label >
563+ < label data-ng-show ="machine.routingSoftware == 'frr' "> Directly after bgp config in frr.conf:</ label >
551564 < textarea title ="free " rows ="3 " class ="form-control "
552565 data-ng-model ="machine.routing.bgp.free "> </ textarea >
566+ < hr >
553567 </ div >
554568 </ div >
569+ < div data-ng-show ="machine.routingSoftware == 'frr' ">
570+ < label > Directly in frr.conf:</ label >
571+ < textarea title ="free " rows ="3 " class ="form-control "
572+ data-ng-model ="machine.routing.frr.free "> </ textarea >
573+ </ div >
555574 </ div >
556575 </ td >
557576 </ tr >
@@ -593,15 +612,16 @@ <h3>Bash file preview:</h3>
593612 </ div >
594613
595614 <!-- GRAPH -->
596- < div id ="graph " class ="tab-pane ">
615+ < div id ="graph " class ="tab-pane " style =" height: 100%; margin-bottom: 0; " >
597616 < script src ="src/static/vendor/js/vis.js "> </ script >
598617 < script src ="src/lab-generator/models/draw.js "> </ script >
599618 < script src ="src/lab-generator/make_draw_model.js "> </ script >
600- < div id ="mynetwork " style ="height: 75vh ; border: 1px solid lightgray; "> </ div >
619+ < div id ="mynetwork " style ="height: calc(100% - 280px) ; border: 1px solid lightgray; "> </ div >
601620
602- < div id ="controls " style ="border: 1px solid lightgray; width: 100%; margin-top: 1em; ">
621+ < div id ="controls "
622+ style ="border: 1px solid lightgray; width: 100%; margin-top: 1em; height: 244px; ">
603623 < div class ="row " style ="margin: 0 !important; ">
604- < div class ="col-md-offset-4 col-md-2 ">
624+ < div class ="col-md-offset-2 col-md-3 ">
605625 < h3 class ="margin-bottom: 5px; "> Edges smoothness</ h3 >
606626
607627 < div class ="form-group ">
@@ -628,31 +648,56 @@ <h3 class="margin-bottom: 5px;">Edges smoothness</h3>
628648 </ select >
629649 </ div >
630650 </ div >
631- < div class ="col-md-2 ">
651+ < div class ="col-md-3 ">
632652 < h3 class ="margin-bottom: 5px; "> Physics</ h3 >
633653
634654 < div class ="form-group ">
635655 < input class ="form-check-input " type ="checkbox " value ="" id ="physicsEnabled "
636656 onclick ="setNetworkOptions() ">
637- < label class ="form-check-label " for ="smoothEnabled ">
657+ < label class ="form-check-label " for ="physicsEnabled ">
638658 Enabled
639659 </ label >
640660 </ div >
641661
642662 < div class ="form-group ">
643663 < label for ='physicsGravitationalConstant '> Gravitational Constant:</ label >
644- < input style ="max-width: 300px; " type ='range ' min ='-30000 ' max ='0 ' value ='-1200 ' step =' 50 '
645- id ='physicsGravitationalConstant ' onchange ='setNetworkOptions() '>
664+ < input style ="max-width: 300px; " type ='range ' min ='-30000 ' max ='0 ' value ='-1200 '
665+ step =' 50 ' id ='physicsGravitationalConstant ' onchange ='setNetworkOptions() '>
646666 < input style ="max-width: 300px; margin-top: 10px; " class ="form-control " type ='text '
647667 value ='-1200 ' id ='physicsGravitationalConstantValue ' readonly ='true '>
648668 </ div >
649669 </ div >
670+ < div class ="col-md-3 ">
671+ < h3 class ="margin-bottom: 5px; "> Miscellaneous</ h3 >
672+
673+ < div class ="form-group ">
674+ < input class ="form-check-input " type ="checkbox " value ="" id ="ifNameAt ">
675+ < label class ="form-check-label " for ="ifNameAt ">
676+ Replace interface name with "@"
677+ </ label >
678+ </ div >
679+
680+ < div class ="form-group ">
681+ < input class ="form-check-input " type ="checkbox " value ="" id ="ifOspfCost ">
682+ < label class ="form-check-label " for ="ifOspfCost ">
683+ Show OSPF interface cost
684+ </ label >
685+ </ div >
686+
687+ < div class ="form-group ">
688+ < input class ="form-check-input " type ="checkbox " value ="" id ="routingLabel ">
689+ < label class ="form-check-label " for ="routingLabel ">
690+ Show OSPF/RIP/BGP label on router
691+ </ label >
692+ </ div >
693+ </ div >
650694 </ div >
651695
652696 < div class ="row " style ="margin: 0 !important; margin-top: 10px; ">
653- < div class ="col-md-offset-4 col-md-4 ">
697+ < div class ="col-md-offset-3 col-md-6 ">
654698 < div class ="form-group ">
655- < button class ="btn btn-danger btn-block " data-ng-click ="makeGraph(netkit) "> Reset</ button >
699+ < button class ="btn btn-danger btn-block "
700+ data-ng-click ="makeGraph(netkit) "> Reset</ button >
656701 </ div >
657702 </ div >
658703 </ div >
@@ -695,6 +740,7 @@ <h4 class="modal-title">Running Commands</h4>
695740 }
696741 }
697742 </ script >
743+ </ div >
698744</ body >
699745
700- </ html >
746+ </ html >
0 commit comments