blueprints/common/eliot-ui/frontend-src/src/app/app.component.html

   1 <div class="main">
   2   <div class="menu">
   3
   4     <mat-toolbar color="primary">
   5
   6         <mat-toolbar-row>
   7
   8           <button mat-icon-button>
   9             <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
  10           </button>
  11
  12           <div class="options">
  13               <button class="home" mat-button [routerLink]="'/home'">ELIOT</button>
  14
  15               <button mat-button [matMenuTriggerFor]="network">Network Management</button>
  16               <button mat-button [matMenuTriggerFor]="application">Application Management</button>
  17               <!-- <button mat-button [matMenuTriggerFor]="demo">Demo</button> -->
  18               <button mat-button [matMenuTriggerFor]="developer">Developer</button>
  19               <button mat-button [matMenuTriggerFor]="appsolution">ELIOT App Solution</button>
  20
  21             <mat-menu #appsolution="matMenu">
  22               <button mat-menu-item [matMenuTriggerFor]="solutions">ELIOT Solutions</button>
  23             </mat-menu>
  24
  25             <mat-menu #solutions="matMenu">
  26               <button mat-menu-item>Video Surveilance</button>
  27               <button mat-menu-item>EdgeX</button>
  28               <button mat-menu-item [routerLink]="'/demo/edge-data-center'">Smart Edge Data Center</button>
  29             </mat-menu>
  30
  31             <mat-menu #developer="matMenu">
  32               <button mat-menu-item [matMenuTriggerFor]="api">ELIOT Application APIs</button>
  33               <button mat-menu-item [matMenuTriggerFor]="sdk">ELIOT SDKs</button>
  34               <button mat-menu-item>Frameworks</button>
  35               <button mat-menu-item [matMenuTriggerFor]="developmentflow">Development flow</button>
  36             </mat-menu>
  37
  38             <mat-menu #api="matMenu">
  39               <button mat-menu-item>Video Surveilance API's</button>
  40             </mat-menu>
  41
  42             <mat-menu #sdk="matMenu">
  43               <button mat-menu-item>EdgeX</button>
  44               <button mat-menu-item>Face Detection</button>
  45               <button mat-menu-item>Model Building</button>
  46             </mat-menu>
  47
  48             <mat-menu #developmentflow="matMenu">
  49               <button mat-menu-item>Model / Graph</button>
  50             </mat-menu>
  51
  52             <mat-menu #demo="matMenu">
  53               <button mat-menu-item [routerLink]="'/demo/edge-data-center'">Smart Edge Data Center</button>
  54             </mat-menu>
  55
  56             <mat-menu #network="matMenu">
  57               <button mat-menu-item [matMenuTriggerFor]="eliotcluster">ELIOT Cluster</button>
  58               <button mat-menu-item [matMenuTriggerFor]="eliotnamespace">ELIOT Namespace</button>
  59             </mat-menu>
  60
  61             <mat-menu #application="matMenu">
  62               <button mat-menu-item>Deployment</button>
  63               <button mat-menu-item>Uninstallation</button>
  64               <button mat-menu-item [matMenuTriggerFor]="monitoring">Monitoring</button>
  65             </mat-menu>
  66
  67             <mat-menu #monitoring="matMenu">
  68               <button mat-menu-item>Application Info</button>
  69             </mat-menu>
  70
  71             <mat-menu #eliotcluster="matMenu">
  72               <button mat-menu-item [routerLink]="'/nodes'">Nodes</button>
  73               <button mat-menu-item [routerLink]="'/deployments'">Deployments</button>
  74               <button mat-menu-item [routerLink]="'/pods'">Pods</button>
  75               <button mat-menu-item [routerLink]="'/services'">Services</button>
  76               <button mat-menu-item [routerLink]="'/replica'">Replication</button>
  77             </mat-menu>
  78
  79             <mat-menu #eliotnamespace="matMenu">
  80               <button mat-menu-item>Namespace 1</button>
  81             </mat-menu>
  82
  83
  84           </div>
  85         </mat-toolbar-row>
  86     </mat-toolbar>
  87
  88   </div>
  89
  90   <div class="sidemenu">
  91
  92     <mat-sidenav-container >
  93
  94       <mat-sidenav #sidenav>
  95
  96         <mat-nav-list>
  97
  98           <a mat-list-item [matMenuTriggerFor]="network"> Network Management </a>
  99           <a mat-list-item [matMenuTriggerFor]="application"> Application Management</a>
 100           <a mat-list-item [matMenuTriggerFor]="demo">Demo</a>
 101           <a mat-list-item [matMenuTriggerFor]="developer"> Developer </a>
 102
 103           <a mat-list-item [matMenuTriggerFor]="appsolution">ELIOT App solution</a>
 104         </mat-nav-list>
 105
 106       </mat-sidenav>
 107
 108       <mat-sidenav-content>
 109         <router-outlet></router-outlet>
 110       </mat-sidenav-content>
 111
 112     </mat-sidenav-container>
 113
 114   </div>
 115 </div>