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

fix

parent 161492eb
Pipeline #519947 passed with stages
in 3 minutes and 21 seconds
......@@ -12,98 +12,76 @@
<h1>No MAS selected, select one...</h1>
</div>
<div *ngIf="selectedMAS !== null" class="content-container justify-content-center align-items-center">
<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>
<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 *ngIf="selectedMAS !== null" class="content-container justify-content-center align-items-center" style="width: 80%;">
<div class="title my-4">Config</div>
<table class="table table-striped mb-5 default-fontsize" style="width: 50rem;">
<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 class="containers">
<div class="title">Containers</div>
<div class="d-flex flex-wrap">
<div *ngFor="let image of selectedMAS.imagegroups.instances">
<div class="card mr-auto">
<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>
</div>
</div>
<div class="containers">
<div class="title">Agents</div>
<div class="d-flex flex-wrap">
<div class="mr-auto" *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>
</div>
</div>
<div class="d-flex justify-content-center align-items-center">
<div class="title mb-4">Containers</div>
<table class="table mb-5 default-fontsize">
<thead>
<th>#</th>
<th>Image</th>
<th>Agencies</th>
</thead>
<tbody>
<tr *ngFor="let image of selectedMAS.imagegroups.instances, index as i" >
<th>{{image.id}}</th>
<td>{{image.config.image}}</td>
<td>{{image.agencies.counter}}</td>
</tr>
</tbody>
</table>
<div class="title mb-4">Agents</div>
<table class="table mb-5 default-fontsize">
<thead>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th>Agency</th>
</thead>
<tbody>
<tr *ngFor="let agent of selectedMAS.agents.instances | paginate: { itemsPerPage: 12, currentPage: q };">
<th> {{agent.id}}</th>
<td>{{agent.spec.name}}</td>
<td>{{agent.spec.type}}</td>
<td>{{agent.address.agency}}</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-end align-items-center">
<pagination-controls class="pagination" (pageChange)="q = $event"></pagination-controls>
</div>
</div>
......
.content-container {
width: 90% ;
padding-left: 5%;
}
.containers {
border-radius: 1rem;
margin-top:5rem;
}
.config {
width: 40rem;
}
td {
text-align: center;
}
/* .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: var(--background-primary-color);
......@@ -29,30 +11,11 @@ h1 {
}
.title {
padding-bottom: 3rem;
padding-top: 2rem;
color: var(--secondary);
font-size:3rem;
font-weight: bold;
}
.card {
width: 40rem;
margin-bottom: 5rem;
padding: 0rem;
}
.card-body {
padding: 0rem;
}
table {
margin-bottom: 0rem;
}
.pagination ::ng-deep .ngx-pagination .current {
background: var(--secondary);
}
......
......@@ -52,7 +52,7 @@
</thead>
<tbody>
<tr *ngFor="let res of searched_results | paginate: { itemsPerPage: 20, currentPage: q }; index as i ">
<td>{{i+1}}</td>
<th>{{i+1}}</th>
<td>{{res.masid}}</td>
<td>{{res.agentid}}</td>
<td>{{res.nodeid}}</td>
......
......@@ -3,6 +3,7 @@
// override the primary-color in bootstrap
$primary: rgb(102,102,255);
$secondary: #9696f3;
$spacer: 1.6rem;
/* primary colors used */
......@@ -36,11 +37,12 @@ app-root {
display: inline-block;
}
/* style of sidebar */
/* sidebar */
.sidebar {
position: fixed;
height: 100%;
margin-top: 8rem;
margin-top: 9rem;
width: 12rem;
overflow:scroll;
padding-bottom: 3rem;
......@@ -70,8 +72,9 @@ app-root {
}
.content-container {
margin-left: 12rem;
margin-top: 8rem;
margin-left: 14rem;
margin-top: 9rem;
padding-top: 1rem;
z-index: -1;
}
......@@ -80,8 +83,9 @@ app-root {
}
.btn-primary:hover {
background-color: var(--primary);
background-color: var(--secondary);
color: white;
border: none;
font: bold;
}
......@@ -89,7 +93,7 @@ mat-form-field {
width: 14rem;
}
/* style of the nav tabs */
/* nav tabs */
.nav-tabs .nav-item>.active>a, .nav-item>.active>a:hover, .nav-item>.active>a:focus {
border-color: var(--background-primary-color);
border-bottom-color: transparent;
......@@ -97,6 +101,7 @@ mat-form-field {
.nav-tabs {
border-bottom: 1px solid var(--background-primary-color);
font-size: 1.6rem;
margin-left: 3rem;
}
.nav-tabs .nav-link {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment