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

   1 <div class="main" *ngIf="(toolbarService.visible|async)">
   2   <div class="toolbar">
   3     <app-toolbar></app-toolbar>
   4   </div>
   5   <div class="carousel">
   6     <ngb-carousel *ngIf="images">
   7       <ng-template ngbSlide>
   8         <div class="picsum-img-wrapper">
   9           <img [src]="images[0]" alt="Random first slide">
  10
  11         </div>
  12         <div class="carousel-caption">
  13         </div>
  14       </ng-template>
  15       <ng-template ngbSlide>
  16         <div class="picsum-img-wrapper">
  17           <img [src]="images[1]" alt="Random second slide">
  18         </div>
  19
  20         <div class="carousel-caption">
  21         </div>
  22
  23       </ng-template>
  24       <ng-template ngbSlide>
  25
  26         <div class="picsum-img-wrapper">
  27           <img [src]="images[2]" alt="Random third slide">
  28         </div>
  29
  30         <div class="carousel-caption">
  31         </div>
  32       </ng-template>
  33     </ngb-carousel>
  34   </div>
  35 </div>
  36
  37 <section id="services" class="services section-bg">
  38   <div class="container">
  39
  40     <div class="section-title text-center" data-aos="fade-up">
  41       <h2>Features</h2>
  42       <p>Features provided by the ELIOT includes Deploy the new Edge Application on ELIOT Cluster, Monitoring the
  43         existing ELIOT Cluster tablewise data as well as graphical manner and providing some predefined app deployment
  44         packages</p>
  45     </div>
  46     <div style="padding:30px;">
  47     <div class="row mat-elevation-z8" style="padding:20px;">
  48       <div class="col-lg-3 col-md-6">
  49         <div class="icon-box">
  50           <div class="icon"><i class="fas fa-cloud"></i></div>
  51           <h4 class="title"><a href="" [routerLink]="'/nodes'">ELIOT Cluster-Nodes</a></h4>
  52           <p class="description">Monitoring the existing ELIOT Cluster Nodes with tablewise data management</p>
  53         </div>
  54       </div>
  55       <div class="col-lg-3 col-md-6">
  56         <div class="icon-box">
  57           <div class="icon"><i class="fas fa-cloud"></i></div>
  58           <h4 class="title"><a href="" [routerLink]="'/pods'">ELIOT Cluster-Pods</a></h4>
  59           <p class="description">Detailed Information on ELIOT Cluster Pods with tablewise structured data</p>
  60         </div>
  61       </div>
  62       <div class="col-lg-3 col-md-6">
  63         <div class="icon-box">
  64           <div class="icon"><i class="material-icons">dashboard</i></div>
  65           <h4 class="title"><a href="" [routerLink]="'/dashboard'">Cluster Monitoring</a></h4>
  66           <p class="description">Monitoring the existing ELIOT Cluster with graphical data view
  67           </p>
  68         </div>
  69       </div>
  70       <div class="col-lg-3 col-md-6">
  71         <div class="icon-box">
  72           <div class="icon"><i class="fas fa-cloud"></i></div>
  73           <h4 class="title"><a href="" [routerLink]="'/services'">ELIOT Cluster-Services</a></h4>
  74           <p class="description">Detailed Information on ELIOT Cluster Services with tablewise structured data</p>
  75         </div>
  76       </div>
  77     </div>
  78     </div>
  79
  80     <!-- graphana App Managment, Deployment History & App solution -->
  81
  82     <div style="padding:30px;">
  83       <div class="row mat-elevation-z8" style="padding:20px;">
  84         <div class="col-lg-3 col-md-6">
  85           <div class="icon-box">
  86             <div class="icon"><i class="material-icons">dashboard</i></div>
  87             <h4 class="title"><a href="" [routerLink]="'/graphana'">Graphana</a></h4>
  88             <p class="description">Monitoring the system availability and existing cluster and information about the
  89               nodes,pods
  90             </p>
  91           </div>
  92         </div>
  93         <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
  94           <div class="icon-box">
  95             <div class="icon"><i class="material-icons">card_travel</i></div>
  96             <h4 class="title"><a href="" [routerLink]="'/deployments'">Application Management</a></h4>
  97             <p class="description">Deployment of custom app .csar package, uninstallation and Monitoring the app</p>
  98           </div>
  99         </div>
 100         <div class="col-lg-3 col-md-6">
 101           <div class="icon-box">
 102             <div class="icon"><i class="material-icons">date_range</i></div>
 103             <h4 class="title"><a href="" [routerLink]="'/history'">Deployment History</a></h4>
 104             <p class="description">App csar package (Current as well as Past) history Deployment data can be viewed
 105             </p>
 106           </div>
 107         </div>
 108         <div class="col-lg-3 col-md-6">
 109           <div class="icon-box">
 110             <div class="icon"><i class="material-icons">offline_pin</i></div>
 111             <h4 class="title"><a href="">App Solution</a></h4>
 112             <p class="description">Provides predefined app solution for some of the applications through deploy ready csar
 113               packages</p>
 114           </div>
 115         </div>
 116       </div>
 117     </div>
 118
 119   </div>
 120 </section>
 121
 122 <section id="about" class="about section-bg">
 123   <div class="container">
 124
 125     <div class="row">
 126       <div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center align-items-stretch">
 127         <a href="https://www.youtube.com/watch?v=t2pRRwCRr_k" class="venobox play-btn mb-4" data-vbtype="video"
 128           data-autoplay="true"></a>
 129       </div>
 130
 131       <div
 132         class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5 mat-elevation-z8">
 133         <h4 data-aos="fade-up">About us</h4>
 134         <h3 data-aos="fade-up">Edge Lightweight IOT</h3>
 135         <p data-aos="fade-up">ELIOT is "Enterprise Edge Lightweight and IOT" project under Akraino approved blueprint
 136           family
 137           and part of Akraino Edge Stack, which intends to provide an platform for a fully integrated edge network
 138           infrastructure and running edge computing applications, on lightweight Edge Nodes. ELIOT targets on making the
 139           edge node a
 140           lightweight software stack which can be deployed on edge nodes which have limited hardware capacity by
 141           leveraging lightweight OS, a container running environment and container orchestration applications.</p>
 142
 143         <div class="icon-box" data-aos="fade-up">
 144           <div class="icon"><i class="fas fa-cloud"></i></div>
 145           <h4 class="title"><a href="" [routerLink]="'/describe'">ELIOT IOT Gateway</a></h4>
 146           <p class="description">IoT Gateway Blueprint will provide an infrastructure platform for an edge node
 147             to provide features of an IoT Gateway. This is achieved by leveraging the upstream opensource
 148             application like Dockers, Kubernetes , Prometheus , cAdvisor, KubeEdge and EdgeX. Companies having
 149             applications to be deployed on edge nodes related to IoT application , can use the IoT Gateway
 150             platform to have a functional end to end to ecosystem of IoT.
 151           </p>
 152         </div>
 153
 154         <div class="icon-box" data-aos="fade-up" data-aos-delay="200">
 155           <div class="icon"><i class="fas fa-cloud"></i></div>
 156           <h4 class="title"><a href="" [routerLink]="'/describe'">ELIOT SD-WAN</a></h4>
 157           <p class="description">Enterprise WAN edge use of SD-WAN solutions or universal CPE (uCPE)</p>
 158         </div>
 159
 160       </div>
 161     </div>
 162
 163   </div>
 164 </section><!-- End About Section -->
 165
 166 <footer id="footer">
 167
 168   <div class="container d-lg-flex py-4">
 169
 170     <div class="mr-lg-auto text-center text-lg-left">
 171       <div class="copyright">
 172         &copy; Copyright <strong><span>ELIOT Akraino</span></strong>. All Rights Reserved
 173       </div>
 174     </div>
 175   </div>
 176 </footer><!-- End Footer -->