Commit c586f894 authored by Qianwen Yuan's avatar Qianwen Yuan
Browse files

refine

parent 5821d982
Pipeline #507977 passed with stages
in 3 minutes and 22 seconds
<div>
<app-top-bar></app-top-bar>
<router-outlet></router-outlet>
</div>
\ No newline at end of file
.maincontainer {
height: 92%;
width:100%;
position: relative;
display:flex;
top:8%;
.content-container {
width: 90% ;
padding-left: 5%;
}
/* style of sidebar */
.sidebar {
position: fixed;
display: flex;
flex-direction: column;
width: 7.3%;
height: 100%;
padding-right: 1%;
overflow:scroll;
}
.sidebar .nav .nav-item{
padding-top:10px;
border-radius: 10px;
width: 110px;
text-align: center;
}
.sidebar .nav .nav-item a {
color: var(--primary-color);
text-decoration: none;
}
.sidebar .nav .nav-item:hover {
background: rgb(240, 240, 240);
}
.sidebar > .nav > .nav-item.is-active{
background: var(--background-primary-color)!important;
color:var(--primary-color);
font-weight: bold;
}
.contentcontainer {
margin-left: 8%;
border-radius: 5px;
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.config{
.containers {
border-radius: 10px;
width: 600px;
margin-top:50px;
margin-left: 100px;;
}
.containers {
/* border: 2px solid var(--background-primary-color); */
border-radius: 10px;
width: 1500px;
margin-top:50px;
margin-left: 100px;;
td {
text-align: center;
}
.pagination {
margin: 0px 0px 50px 1200px;
width: 100%;
}
.pagination /deep/ .ngx-pagination .current {
background:var(--light-primary-color);
}
/* .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: var(--background-primary-color);
}
......@@ -92,17 +35,14 @@ h1 {
.title {
padding-bottom: 30px;
padding-top: 20px;
padding-left: 20px;
color: var(--light-primary-color);
font-size:30px;
font-weight: bold;
}
.card {
width: 400px;
margin-bottom: 50px;
padding: 0px;
}
......@@ -115,9 +55,6 @@ table {
margin-bottom: 0px;
}
table th {
width: 100px;
}
......
<div class="maincontainer">
<div class="sidebar">
<div class="nav">
<div class="nav-item" *ngFor="let id of MASID, index as i" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/ams', id]" >
<p > MAS {{ id }}</p>
</a>
</div>
<div class="sidebar">
<div class="nav">
<div class="nav-item" *ngFor="let id of MASID, index as i" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/ams', id]" >
<p > MAS {{ id }}</p>
</a>
</div>
</div>
<div class="contentcontainer">
<div *ngIf="selectedMAS === null">
<h1>No MAS selected, select one...</h1>
</div>
<div *ngIf="selectedMAS !== null">
<div class="config">
<div class="title">Config</div>
<table class="table table-striped">
<tbody>
<tr>
<th>Id</th>
<td>{{selectedMAS.id}}</td>
</tr>
<tr>
<th>Name</th>
<td>{{ selectedMAS.config.name }}</td>
</tr>
<tr>
<th>Agents per agency</th>
<td>{{ selectedMAS.config.agentsperagency}}</td>
</tr>
<tr>
<th>DF</th>
<td>{{selectedMAS.config.df.active}}</td>
</tr>
</div>
<div *ngIf="selectedMAS === null" class="content-container d-flex justify-content-center align-items-center">
<h1>No MAS selected, select one...</h1>
</div>
<div *ngIf="selectedMAS !== null" class="content-container justify-content-center align-items-center">
<div class="config justify-content-center">
<div class="title">Config</div>
<table class="table table-striped">
<tbody>
<tr>
<th>Id</th>
<td>{{selectedMAS.id}}</td>
</tr>
<tr>
<th>Name</th>
<td>{{ selectedMAS.config.name }}</td>
</tr>
<tr>
<th>Agents per agency</th>
<td>{{ selectedMAS.config.agentsperagency}}</td>
</tr>
<tr>
<th>DF</th>
<td>{{selectedMAS.config.df.active}}</td>
</tr>
<tr>
<th>Logging</th>
<td>{{selectedMAS.config.logger.active}}</td>
</tr>
<tr>
<th>MQTT</th>
<td>{{ selectedMAS.config.mqtt.active}}</td>
</tr>
</tbody>
</table>
</div>
<div class="containers">
<div class="title">Containers</div>
<div class="row">
<div class="col-xl-4 col-md-6 col-sm-12 my-row" *ngFor="let image of selectedMAS.imagegroups.instances">
<div class="card">
<div class="card-header">Image {{image.id}}</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th>Logging</th>
<td>{{selectedMAS.config.logger.active}}</td>
<th>Image</th>
<td>{{image.config.image}}</td>
</tr>
<tr>
<th>MQTT</th>
<td>{{ selectedMAS.config.mqtt.active}}</td>
<th>Agencies</th>
<td>{{image.agencies.counter}}</td>
</tr>
</tbody>
</table>
</div>
<div class="containers">
<div class="title">Containers</div>
<div class="row">
<div class="col-md-4 my-row" *ngFor="let image of selectedMAS.imagegroups.instances">
<div class="card">
<div class="card-header">Image {{image.id}}</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th>Image</th>
<td>{{image.config.image}}</td>
</tr>
<tr>
<th>Agencies</th>
<td>{{image.agencies.counter}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="containers">
<div class="title">Agents</div>
<div class="row">
<div class="col-md-4 my-row" *ngFor="let agent of selectedMAS.agents.instances | paginate: { itemsPerPage: 6, currentPage: q };">
<div class="card">
<div class="card-header">Agent {{agent.id}}</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th>Name</th>
<td>{{agent.spec.name}}</td>
</tr>
<tr>
<th>Type</th>
<td>{{agent.spec.type}}</td>
</tr>
<tr>
<th>Agency</th>
<td>{{agent.address.agency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="containers">
<div class="title">Agents</div>
<div class="row">
<div class="col-xl-4 col-md-6 col-xs-12 my-row" *ngFor="let agent of selectedMAS.agents.instances | paginate: { itemsPerPage: 12, currentPage: q };">
<div class="card">
<div class="card-header">Agent {{agent.id}}</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th>Name</th>
<td>{{agent.spec.name}}</td>
</tr>
<tr>
<th>Type</th>
<td>{{agent.spec.type}}</td>
</tr>
<tr>
<th>Agency</th>
<td>{{agent.address.agency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<pagination-controls class="pagination" (pageChange)="q = $event"></pagination-controls>
</div>
</div>
<div class="pagination d-flex justify-content-center align-items-center">
<pagination-controls (pageChange)="q = $event"></pagination-controls>
</div>
</div>
.maincontainer {
height: 92%;
width:100%;
position: relative;
display:flex;
top:8%;
}
/* style of sidebar */
.sidebar {
position: fixed;
display: flex;
flex-direction: column;
width: 7.3%;
height: 100%;
padding-right: 1%;
overflow:scroll;
}
.sidebar .nav .nav-item{
padding-top:10px;
border-radius: 10px;
width: 110px;
text-align: center;
}
.sidebar .nav .nav-item a {
color: var(--primary-color);
text-decoration: none;
}
.sidebar .nav .nav-item:hover {
background: rgb(240, 240, 240);
}
.sidebar > .nav > .nav-item.is-active{
background: var(--background-primary-color)!important;
color:var(--primary-color);
font-weight: bold;
}
.contentcontainer {
margin-left: 8%;
border-radius: 5px;
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
.content-container {
width: 80% ;
padding-left: 10%;
}
.notalive {
......@@ -94,10 +47,8 @@
.service {
border: 2px solid var(--background-primary-color);
width: 1200px;
border-radius: 10px;
margin-top:50px;
margin-left: 200px;
}
......@@ -118,18 +69,19 @@
}
.pagination {
margin: 50px 0px 50px 1200px;
width: 100%;
}
.pagination /deep/ .ngx-pagination .current {
background:var(--light-primary-color);
}
/* style of the nav tab */
.contentcontainer .nav {
.content-container .nav {
margin-left: 30px;
}
......
<div class="maincontainer">
<!--sidebar-->
<div class="sidebar" *ngIf="MASID.length !== 0">
<div class="nav">
<div class="nav-item" *ngFor="let id of MASID, index as i" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/df', id]" >
<p > MAS {{ id }}</p>
</a>
</div>
</div>
</div>
<div class="contentcontainer">
<div class="notalive" *ngIf="!alive" >
<h1>DF is not alive......</h1>
<!--sidebar-->
<div class="sidebar" *ngIf="MASID.length !== 0">
<div class="nav">
<div class="nav-item" *ngFor="let id of MASID, index as i" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/df', id]" >
<p > MAS {{ id }}</p>
</a>
</div>
<div class="alive" *ngIf="alive">
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item" >
<a class="nav-link" [class.active]="curr_state==='list'" (click)="onClickList()" >list</a>
</li>
<li class="nav-item" style="padding-right:100px;">
<a class="nav-link" [class.active]="curr_state==='graph'" (click)="onClickGraph()">graph</a>
</li>
</ul>
<div class="content" *ngIf="curr_state === 'list'">
<div class="inputs d-flex justify-content-center align-items-center">
<input #desc type="text" class="input" id="searchDesc" placeholder="Enter the description"/>
<input #nodeid type="text" class="input" id="searchNode" placeholder="Enter the node ID"/>
<input #dist type="text" class="input" id="searchDist" placeholder="Enter the distance"/>
<button class="my-btn btn-search" type="submit" (click)="onSearchSvcs(desc.value, nodeid.value, dist.value)">
<i class="fas fa-search"></i>
</button>
</div>
<div class="empty-service" *ngIf="searched_results === null">
<h1>No services found</h1>
</div>
<div *ngIf="searched_results !== null && searched_results.length !== 0">
<div class="service" *ngFor="let res of searched_results | paginate: { itemsPerPage: 5, currentPage: q }; index as i ">
<div class="service-header d-flex justify-content-between">
<h2>Service {{res.id}}</h2>
</div>
<table class="table table-striped">
<tbody>
<tr>
<th>MAS ID</th>
<td>{{res.masid}}</td>
</tr>
<tr>
<th>Agent ID</th>
<td>{{res.agentid}}</td>
</tr>
<tr>
<th>Node ID</th>
<td>{{res.nodeid}}</td>
</tr>
<tr>
<th>Description</th>
<td>{{res.desc}}</td>
</tr>
<tr>
<th>Create Date</th>
<td>{{res.createdat}}</td>
</tr>
<tr>
<th>Change Date</th>
<td>{{res.changedat}}</td>
</tr>
<tr>
<th>Dist</th>
<td>{{res.dist}}</td>
</tr>
</tbody>
</table>
</div>
<pagination-controls class="pagination" (pageChange)="q = $event"></pagination-controls>
</div>
</div>
<div class="content" [hidden]="curr_state === 'list'">
<div id="graph">
</div>
</div>
</div>
</div>
</div>
<div class="content-container">
<div class="notalive" *ngIf="!alive" >
<h1>DF is not alive......</h1>
</div>
<div class="alive" *ngIf="alive">
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item" >
<a class="nav-link" [class.active]="curr_state==='list'" (click)="onClickList()" >list</a>
</li>
<li class="nav-item" style="padding-right:100px;">
<a class="nav-link" [class.active]="curr_state==='graph'" (click)="onClickGraph()">graph</a>
</li>
</ul>
<div class="content" *ngIf="curr_state === 'list'">
<div class="inputs d-flex justify-content-center align-items-center">
<input #desc type="text" class="input" id="searchDesc" placeholder="Enter the description"/>
<input #nodeid type="text" class="input" id="searchNode" placeholder="Enter the node ID"/>
<input #dist type="text" class="input" id="searchDist" placeholder="Enter the distance"/>
<button class="my-btn btn-search" type="submit" (click)="onSearchSvcs(desc.value, nodeid.value, dist.value)">
<i class="fas fa-search"></i>
</button>
</div>
<div class="empty-service" *ngIf="searched_results === null">
<h1>No services found</h1>
</div>
<div *ngIf="searched_results !== null && searched_results.length !== 0">
<div class="service" *ngFor="let res of searched_results | paginate: { itemsPerPage: 5, currentPage: q }; index as i ">
<div class="service-header d-flex justify-content-between">
<h2>Service {{res.id}}</h2>
</div>
<table class="table table-striped">
<tbody>
<tr>
<th>MAS ID</th>
<td>{{res.masid}}</td>
</tr>
<tr>
<th>Agent ID</th>
<td>{{res.agentid}}</td>
</tr>
<tr>
<th>Node ID</th>
<td>{{res.nodeid}}</td>
</tr>
<tr>
<th>Description</th>
<td>{{res.desc}}</td>
</tr>
<tr>
<th>Create Date</th>
<td>{{res.createdat}}</td>
</tr>
<tr>
<th>Change Date</th>
<td>{{res.changedat}}</td>
</tr>
<tr>
<th>Dist</th>
<td>{{res.dist}}</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination mt-4 d-flex justify-content-center align-items-center">
<pagination-controls (pageChange)="q = $event"></pagination-controls>
</div>
</div>
</div>
<div class="content" [hidden]="curr_state === 'list'">
<div id="graph">
</div>
</div>
</div>
</div>
.maincontainer {
height: 92%;
width:100%;
position: relative;
display:flex;
top:8%;
}
/* style of sidebar */
.sidebar {
position: fixed;