Commit 161492eb authored by Qianwen Yuan's avatar Qianwen Yuan
Browse files

fix

parent 7e42f2e1
Pipeline #519930 passed with stages
in 3 minutes and 20 seconds
......@@ -36,46 +36,34 @@
<div class="empty-service" *ngIf="searched_results === null">
<h1>No services found</h1>
</div>
<div class="services d-flex flex-wrap justify-content-around" *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">
<div class="services" *ngIf="searched_results !== null && searched_results.length !== 0">
<table class="table table-striped default-fontsize">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">MAS ID</th>
<th scope="col">Agent ID</th>
<th scope="col">Node ID</th>
<th scope="col">Description</th>
<th scope="col">Create Date</th>
<th scope="col">Change Date</th>
<th scope="col">Dist</th>
</tr>
</thead>
<tbody>
<tr>
<th>MAS ID</th>
<tr *ngFor="let res of searched_results | paginate: { itemsPerPage: 20, currentPage: q }; index as i ">
<td>{{i+1}}</td>
<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 class="pagination mt-4 d-flex justify-content-center align-items-center">
<pagination-controls (pageChange)="q = $event"></pagination-controls>
</div>
</div>
</div>
......
......@@ -4,7 +4,6 @@
flex-direction: column;
align-items: center;
justify-content: center;
}
.alive {
......@@ -45,36 +44,8 @@
}
.services {
padding-left: 5rem;
padding-right: 5rem;
}
.service {
width: 40rem;
border: 2px solid var(--background-primary-color);
border-radius: 1rem;
margin-top:5rem;
}
.service-header {
color: var(--secondary);
font-size: 3rem;
height:7rem;
}
.service-header h2 {
padding-top: 2rem;
padding-left: 2rem;
}
.service-header i {
padding-top: 2rem;
padding-right: 4rem;
}
.table {
margin-bottom: 0rem;
padding-left: 5%;
padding-right: 5%;
}
.pagination {
......@@ -92,23 +63,6 @@
}
.nav-item>.active>a, .nav-item>.active>a:hover, .nav-item>.active>a:focus {
border-color: var(--background-primary-color);
border-bottom-color: transparent;
}
.nav-tabs {
border-bottom: 1px solid var(--background-primary-color);
}
.nav-link {
color: gray;
}
.nav-link.active {
color: var(--primary);
font-weight: bold;
}
#graph {
width: 100%;
height: 80rem;
......@@ -116,6 +70,12 @@
}
td, th {
padding-top: 2rem;
padding-bottom: 2rem;
}
.notShow{
z-index: -1;
}
......
......@@ -54,10 +54,10 @@ export class DFComponent implements OnInit {
if (params.masid) {
this.selectedMASID = params.masid;
this.dfService.getAllSvcs(this.selectedMASID.toString()).subscribe( (res: Service[]) => {
this.searched_results = res;
for (let i = 0; i < this.searched_results.length; i++) {
this.searched_results[i].id = i;
}
this.searched_results = res.map((ele, idx) => {
ele.id = idx;
return ele;
});
});
} else {
console.log("No masid");
......
......@@ -17,7 +17,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body default-fontsize">
<div class="d-flex flex-wrap">
<div *ngFor="let id of notSelectedID">
<div class="agent-not-selected" [ngValue]="id" (click)="onAddID(id)">
......@@ -27,7 +27,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="onConfirm()">OK</button>
<button type="button" class="btn btn-primary default-fontsize" (click)="onConfirm()">OK</button>
</div>
</ng-template>
......@@ -51,11 +51,11 @@
<a class="nav-link" [class.active]="currState==='heatmap'" (click)="onClickHeatmap()">heatmap</a>
</li>
</ul>
<div class="selectionBoard d-flex justify-content-center">
<!-- agent selection for statistic condition -->
<!--selection board -->
<div class="my-5 d-flex justify-content-center">
<!--exclusive for statistic condition -->
<div *ngIf="currState==='statistics'">
<mat-form-field appearance="fill" class="between">
<mat-form-field appearance="fill" class="mr-4">
<mat-label>agent</mat-label>
<mat-select (selectionChange)="updateSelectedAgent($event.value)">
<mat-option *ngFor="let agent of agentID" [value]="agent">
......@@ -63,7 +63,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="between">
<mat-form-field appearance="fill" class="mr-4">
<mat-label>type
</mat-label>
<mat-select (selectionChange)="updateSelectedBehType($event.value)">
......@@ -73,7 +73,7 @@
</mat-select>
</mat-form-field>
</div>
<!--start date -->
<mat-form-field appearance="fill" class="example-form-field">
<mat-label>Start date</mat-label>
<input matInput
......@@ -88,8 +88,8 @@
</mat-datepicker-actions>
</mat-datepicker>
</mat-form-field>
<mat-form-field appearance="fill" class="example-form-field between">
<!--start time -->
<mat-form-field appearance="fill" class="example-form-field mr-4">
<mat-label>Start time</mat-label>
<input matInput
name="selected_start_time"
......@@ -103,7 +103,7 @@
</mat-icon>
</mat-form-field>
<ngx-mat-timepicker #pickerA></ngx-mat-timepicker>
<!--end date -->
<mat-form-field appearance="fill" class="example-form-field">
<mat-label>End date</mat-label>
<input matInput
......@@ -118,8 +118,8 @@
</mat-datepicker-actions>
</mat-datepicker>
</mat-form-field>
<mat-form-field appearance="fill" class="between">
<!--end time -->
<mat-form-field appearance="fill" class="mr-4">
<mat-label>End time</mat-label>
<input matInput
name="selected_end_time"
......@@ -134,7 +134,7 @@
</mat-icon>
</mat-form-field>
<ngx-mat-timepicker #pickerB></ngx-mat-timepicker>
<!--exclusive for logSeries condition -->
<div *ngIf="currState==='logSeries'">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
......@@ -145,9 +145,9 @@
</mat-select>
</mat-form-field>
</div>
<!--exclusive for heatmap condition -->
<div *ngIf="currState==='heatmap'">
<mat-form-field appearance="fill" class="between" style="width: 20rem;">
<mat-form-field appearance="fill" class="mr-4" style="width: 20rem;">
<mat-label>Automatic partition?</mat-label>
<mat-select (selectionChange)="updatePartition($event.value)">
<mat-option value="Yes">Yes</mat-option>
......@@ -164,22 +164,22 @@
<i class="fas fa-search fa-2x" (click)="onClickSearchButton()"></i>
</div>
<!-- agent selection for log and logSeries conditions -->
<!--agent selection for log anpopContentd logSeries conditions -->
<div *ngIf="currState ==='log' || currState ==='logSeries'" class= "d-flex align-content-end">
<div class="agent-title">agents</div>
<div class="agent-title ml-5">agents</div>
<div class="agents">
<div class="d-flex flex-wrap">
<div *ngFor="let id of selectedID" class="agent-selected is-agent-active" (click)="onDeleteID(id)" [ngValue]="id" >
<div *ngFor="let id of selectedID" class="agent-selected" (click)="onDeleteID(id)" [ngValue]="id" >
<p>agent {{id}} </p>
<div class="delete"><i class="fas fa-trash"></i></div>
<div class="hidden"><i class="fas fa-trash"></i></div>
</div>
<div *ngIf="selectedID.length<9" class="more col-lg-1" (click)="openLg(content)">+ </div>
</div>
</div>
</div>
<ng-template #popContent>
<div *ngFor="let content of popoverContent">
<ng-template #popContent >
<div class="default-fontsize" *ngFor="let content of popoverContent">
{{content}}
</div>
</ng-template>
......@@ -214,11 +214,11 @@
<div *ngIf="currState==='log'" class="topics d-flex-column">
<div class="topic-title"> Topic </div>
<div [class.selected]="isTopicSelected[0]" class="error-tag tag" (click)="onToggleTopic(0)">error</div>
<div [class.selected]="isTopicSelected[1]" class="debug-tag tag" (click)="onToggleTopic(1)" >debug</div>
<div [class.selected]="isTopicSelected[2]"class="msg-tag tag" (click)="onToggleTopic(2)">msg</div>
<div [class.selected]="isTopicSelected[3]" class="status-tag tag" (click)="onToggleTopic(3)">status</div>
<div [class.selected]="isTopicSelected[4]" class="app-tag tag" (click)="onToggleTopic(4)">app</div>
<div [class.selected]="isTopicSelected[0]" class="error-tag tag mb-4" (click)="onToggleTopic(0)">error</div>
<div [class.selected]="isTopicSelected[1]" class="debug-tag tag mb-4" (click)="onToggleTopic(1)" >debug</div>
<div [class.selected]="isTopicSelected[2]"class="msg-tag tag mb-4" (click)="onToggleTopic(2)">msg</div>
<div [class.selected]="isTopicSelected[3]" class="status-tag tag mb-4" (click)="onToggleTopic(3)">status</div>
<div [class.selected]="isTopicSelected[4]" class="app-tag tag mb-4" (click)="onToggleTopic(4)">app</div>
<div [class.selected]="isTopicSelected[5]" class="beh-tag tag" (click)="onToggleTopic(5)">beh</div>
</div>
......
......@@ -12,53 +12,26 @@
padding-bottom: 5rem;
}
/* style of the search bar */
.inputs {
padding-top: 3rem;
padding-bottom: 4rem;
display: flex;
justify-content: center;
align-items: center;
}
/*style of the selection board */
.selectionBoard {
margin-top:5rem;
margin-left: 5rem;
margin-bottom: 5rem;
.fa-search {
margin-top: 1.5rem;
margin-left: 2rem;
cursor: pointer;
}
/* agent selection board */
.agent-title {
color: rgb(85, 81, 81);
font-size: 3rem;
margin-left: 3rem;
margin-top: 0rem;
width: 12rem;
}
.topic-title {
color: rgb(85, 81, 81);
font-size: 3rem;
width: 10rem;
margin-bottom: 4rem;
}
.row {
margin-top: 5px;
}
.agents {
width:80%;
margin-left:15px;
margin-top: -1rem;
width:80%;
margin-left:1.5rem;
margin-top: -1rem;
}
.agent-selected {
height: 4rem;
width: 12rem;
......@@ -94,6 +67,20 @@
padding-top:1rem;
}
.agent-selected:hover .hidden {
display: initial;
color: var(--secondary);
}
.agent-selected:hover {
color: var(--background-primary-color);
background-color: var(--background-primary-color);
}
.agent-selected:hover p {
display: none;
}
.more {
height: 4rem;
width: 8rem;
......@@ -110,93 +97,67 @@
}
.agent-selected:hover {
color: var(--background-primary-color);
background-color: var(--background-primary-color);
}
.agent-selected:hover p {
display: none;
}
/*topic selection board */
.delete {
display: none;
}
.hidden {
display: none;
.topics {
position: fixed;
right: 10rem;
top: 30rem;
}
.agent-selected:hover .delete {
display: initial;
color: var(--secondary);
.topic-title {
color: rgb(85, 81, 81);
font-size: 3rem;
width: 10rem;
margin-bottom: 4rem;
}
.tag{
height: 4rem;
width: 8rem;
text-align: center;
border: solid rgb(235, 229, 229);
border-radius: 4rem;
margin-right: 3rem;
margin-bottom: 1rem;
padding-top: 8px;
color: gray;
font-size: 2rem;
cursor: pointer;
}
.is-agent-active {
background-color: var(--secondary);
.topics .selected {
color: white;
border: none;
padding-top: 1rem;
}
.between {
margin-right: 2rem;
.topics .error-tag.selected {
background-color: var(--error);
}
.fa-search {
margin-top: 15px;
margin-left: 2rem;
cursor: pointer;
.topics .debug-tag.selected {
background-color: var(--debug);
}
/* style of the nav tab */
.content-container .nav {
margin-left: 3rem;
.topics .msg-tag.selected {
background-color: var(--secondary);
}
.nav-item>.active>a, .nav-item>.active>a:hover, .nav-item>.active>a:focus {
border-color: var(--background-primary-color);
border-bottom-color: transparent;
}
.nav-tabs {
border-bottom: 1px solid var(--background-primary-color);
.topics .status-tag.selected {
background-color: rgb(126, 235, 149);
}
.nav-link {
color: gray;
.topics .app-tag.selected {
background-color: rgb(56, 202, 221) ;
}
.nav-link.active {
color: var(--primary);
font-weight: bold;
.topics .beh-tag.selected {
background-color: rgb(223, 170, 72) ;
}
/* svg graph */
/* log graph */
svg {
/* border: 1px solid orange; */
position: absolute;
}
......@@ -217,8 +178,6 @@ svg {
font: bold 3rem;
}
.error {
fill: var(--error);
}
......@@ -244,43 +203,7 @@ svg {
}
.topics .selected {
color: white;
border: none;
}
.topics {
position: fixed;
right: 10rem;
top: 30rem;
}
.topics .error-tag.selected {
background-color: var(--error);
}
.topics .debug-tag.selected {
background-color: var(--debug);
}
.topics .msg-tag.selected {
background-color: var(--secondary);
}
.topics .status-tag.selected {
background-color: rgb(126, 235, 149);
}
.topics .app-tag.selected {
background-color: rgb(56, 202, 221) ;
}
.topics .beh-tag.selected {
background-color: rgb(223, 170, 72) ;
}
/* log series */
.log-series-graph {
margin-top: 5rem;
......@@ -309,8 +232,7 @@ ngx-charts-bubble-chart {
}
/* css for statistics */
/* statistics */
.stats-dashboard {
margin-top: 5rem;
......@@ -327,7 +249,6 @@ ngx-charts-bubble-chart {
height: 15rem;
}
.pagination .ngx-pagination .current {
background:var(--secondary);
}
......@@ -346,10 +267,7 @@ ngx-charts-bubble-chart {
}
/* .heatmap{
border: var(--secondary) solid;
}
*/
/* heatmap */
.heatmap-legend{
background-color: red;
}
......@@ -368,16 +286,6 @@ ngx-charts-bubble-chart {
transform: rotate(-90deg);
}
.heatmap-popover {
background-color: red ;
color: red;
}
......
......@@ -17,7 +17,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">