Skip to content

Commit

Permalink
wip (#6241)
Browse files Browse the repository at this point in the history 
Signed-off-by: vlo-rte <valerie.longa@rte-france.com>
  • Loading branch information
@vlo-rte
vlo-rte committed Apr 10, 2024
1 parent 583b570 commit 64ffc58
Show file tree
Hide file tree
Showing 4 changed files with 198 additions and 64 deletions.
39 changes: 39 additions & 0 deletions ui/main/src/app/business/view/processmonitoring/processmonitoring.view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {ProcessGroups, ProcessToMonitor, StatePerProcessToMonitor} from './proce
import {UserService} from 'app/business/services/users/user.service';
import {Utilities} from 'app/business/common/utilities';
import {Process} from '@ofModel/processes.model';
import moment from "moment";

export class ProcessMonitoringView {
private processesToMonitor: ProcessToMonitor[] = null;
Expand Down Expand Up @@ -94,4 +95,42 @@ export class ProcessMonitoringView {
});
return processes;
}

public getDatesAfterPeriodClick(
periodClicked: string,
activeMinDate: any,
activeMaxDate: any
): {activeFrom: string; activeTo: string} {

if (periodClicked === 'year') {
const ret = {
activeFrom: new Date().getFullYear() + '-01-01T00:00',
activeTo: new Date().getFullYear() + '-12-31T23:59'
};
return ret;
}
if (periodClicked === 'month') {
const ret = {
activeFrom:
new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0') + '-01T00:00',
activeTo:
new Date().getFullYear() +
'-' +
String(new Date().getMonth() + 1).padStart(2, '0') +
'-' +
moment().daysInMonth() +
'T23:59'
};
return ret;
}
if (periodClicked === 'week') {
const ret = {
activeFrom: new Date().getFullYear() + '-01-01T00:00',
activeTo: new Date().getFullYear() + '-12-31T23:59'
};
console.log('------------------------------ret = ', ret);
return ret;
}
return null;
}
}
155 changes: 91 additions & 64 deletions ui/main/src/app/modules/processmonitoring/processmonitoring.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,80 +18,107 @@
</div>
</ng-template>

<div class="opfab-processmonitoring-header" *ngIf="isThereProcessStateToDisplay(); else noProcessStateToDisplay">
<div class="opfab-processmonitoring-header" style="padding-right: 60px" *ngIf="isThereProcessStateToDisplay(); else noProcessStateToDisplay">
<div id="opfab-processmonitoring-date-navigation-links">
<ul>
<li>
<a id="opfab-processmonitoring-left-arrow" (click)="moveDomain(false)" style="cursor: pointer"> &lt;&lt;
</a>
</li>
<li>
<a id="opfab-processmonitoring-period-year" [ngClass]="yearButtonSelected ? 'link-selected' : 'link-unselect'"
(click)="changeDateBounds('year')" translate>
timeline.buttonTitle.Y
</a>
</li>
<li>
<a id="opfab-processmonitoring-period-month" [ngClass]="monthButtonSelected ? 'link-selected' : 'link-unselect'"
(click)="changeDateBounds('month')" translate>
timeline.buttonTitle.M
</a>
</li>
<li>
<a id="opfab-processmonitoring-period-week" [ngClass]="weekButtonSelected ? 'link-selected' : 'link-unselect'"
(click)="changeDateBounds('week')" translate>
timeline.buttonTitle.W
</a>
</li>
<li>
<a id="opfab-processmonitoring-right-arrow" (click)="moveDomain(true)" style="cursor: pointer">
&gt;&gt;
</a>
</li>
</ul>
</div>

<div style="display: flex;">
<div style="display: flex;">
<!--2 columns in this case-->
<!--First column-->
<div *ngIf="isProcessGroupFilterVisible || tags" style="margin-right:40px">
<div style="min-width:300px;max-width:400px;margin-top: 28px;margin-bottom: 54px;max-height: 48px">

<of-multi-select *ngIf="isProcessGroupFilterVisible" id="opfab-processGroup" multiSelectId="processGroup"
[parentForm]="processMonitoringForm" [config]="processGroupMultiSelectConfig"
[options]="processGroupMultiSelectOptions" [selectedOptions]="processGroupSelected">
</of-multi-select>

<of-multi-select *ngIf="!isProcessGroupFilterVisible && tags" id="opfab-tags" multiSelectId="tags"
[parentForm]="processMonitoringForm" [config]="tagsMultiSelectConfig" [options]="tagsMultiSelectOptions"
[selectedOptions]="tagsSelected">
</of-multi-select>
</div>
<div *ngIf="isProcessGroupFilterVisible && tags" style="min-width:300px;max-width:400px;max-height: 48px">
<of-multi-select id="opfab-tags" multiSelectId="tags" [parentForm]="processMonitoringForm"
[config]="tagsMultiSelectConfig" [options]="tagsMultiSelectOptions" [selectedOptions]="tagsSelected">
</of-multi-select>
</div>

<!--2 columns in this case-->
<!--First column-->
<div *ngIf="isProcessGroupFilterVisible || tags" style="margin-right:40px">
<div style="min-width:300px;max-width:400px;margin-top: 28px;margin-bottom: 54px;max-height: 48px">
<of-multi-select *ngIf="isProcessGroupFilterVisible" id="opfab-processGroup" multiSelectId="processGroup"
[parentForm]="processMonitoringForm" [config]="processGroupMultiSelectConfig"
[options]="processGroupMultiSelectOptions" [selectedOptions]="processGroupSelected">
</of-multi-select>

<of-multi-select *ngIf="!isProcessGroupFilterVisible && tags" id="opfab-tags" multiSelectId="tags"
[parentForm]="processMonitoringForm" [config]="tagsMultiSelectConfig" [options]="tagsMultiSelectOptions"
[selectedOptions]="tagsSelected">
</of-multi-select>
</div>
<div *ngIf="isProcessGroupFilterVisible && tags" style="min-width:300px;max-width:400px;max-height: 48px">
<of-multi-select id="opfab-tags" multiSelectId="tags" [parentForm]="processMonitoringForm"
[config]="tagsMultiSelectConfig" [options]="tagsMultiSelectOptions" [selectedOptions]="tagsSelected">
</of-multi-select>
</div>
<!--Second column-->
<div *ngIf="isProcessGroupFilterVisible || tags" style="margin-right:40px">
<div style="min-width:300px;max-width:400px;margin-top:28px;margin-bottom: 54px;max-height: 48px">
</div>
<!--Second column-->
<div *ngIf="isProcessGroupFilterVisible || tags" style="margin-right:40px">
<div style="min-width:300px;max-width:400px;margin-top:28px;margin-bottom: 54px;max-height: 48px">

<of-multi-select id="opfab-process" multiSelectId="process"
[parentForm]="processMonitoringForm" [config]="processMultiSelectConfig" [options]="processMultiSelectOptions"
[selectedOptions]="processSelected">
</of-multi-select>
<of-multi-select id="opfab-process" multiSelectId="process"
[parentForm]="processMonitoringForm" [config]="processMultiSelectConfig" [options]="processMultiSelectOptions"
[selectedOptions]="processSelected">
</of-multi-select>

</div>
<div style="min-width:300px;max-width:400px;max-height: 48px">
<of-multi-select id="opfab-state" multiSelectId="state" [parentForm]="processMonitoringForm"
[config]="stateMultiSelectConfig" [options]="stateMultiSelectOptions" [selectedOptions]="stateSelected">
</of-multi-select>
</div>
</div>

<div class="opfab-vertical-bar"></div>
<div style="margin-left:40px;width:230px;min-width:230px;margin-bottom:30px" [formGroup]="processMonitoringForm">
<div class="nopaddingrow opfab-input" style="margin-top: 30px; margin-bottom: 54px;">
<label for="opfab-active-from" translate>shared.filters.activeFrom</label>
<input
type="datetime-local"
id="opfab-active-from"
formControlName="activeFrom"
(change)="onDateTimeChange()"
[max]="activeMaxDate">
</div>
<div class="nopaddingrow opfab-input">
<label for="opfab-active-to" translate>shared.filters.activeTo</label>
<input
type="datetime-local"
id="opfab-active-to"
formControlName="activeTo"
(change)="onDateTimeChange()"
[min]="activeMinDate">
</div>
<div style="min-width:300px;max-width:400px;max-height: 48px">
<of-multi-select id="opfab-state" multiSelectId="state" [parentForm]="processMonitoringForm"
[config]="stateMultiSelectConfig" [options]="stateMultiSelectOptions" [selectedOptions]="stateSelected">
</of-multi-select>
</div>
</div>

<div class="opfab-buttons">
<button id="opfab-archives-logging-btn-search" class="opfab-btn" (click)='search()' translate>button.search</button>
<button id="opfab-archives-logging-btn-reset" class="opfab-btn-cancel" style="margin-top:50px" (click)='resetForm()' translate>button.reset</button>
</div>

<div class="opfab-vertical-bar"></div>
<div style="margin-left:40px;width:230px;min-width:230px;margin-bottom:30px" [formGroup]="processMonitoringForm">
<div class="nopaddingrow opfab-input" style="margin-top: 30px; margin-bottom: 54px;">
<label for="opfab-active-from" translate>shared.filters.activeFrom</label>
<input
type="datetime-local"
id="opfab-active-from"
formControlName="activeFrom"
(change)="onDateTimeChange()"
[max]="activeMaxDate">
</div>
<div class="nopaddingrow opfab-input">
<label for="opfab-active-to" translate>shared.filters.activeTo</label>
<input
type="datetime-local"
id="opfab-active-to"
formControlName="activeTo"
(change)="onDateTimeChange()"
[min]="activeMinDate">
</div>
</div>

<div class="opfab-buttons">
<button id="opfab-archives-logging-btn-search" class="opfab-btn" (click)='search()' translate>button.search</button>
<button id="opfab-archives-logging-btn-reset" class="opfab-btn-cancel" style="margin-top:50px" (click)='resetForm()' translate>button.reset</button>
</div>

</div>
</div>



</div>

<!-- Display spinner if loading cards is taking more than 1s -->
Expand Down
55 changes: 55 additions & 0 deletions ui/main/src/app/modules/processmonitoring/processmonitoring.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,61 @@
padding-left: 5%;
}

#opfab-processmonitoring-date-navigation-links {
position: relative;
float: right;
flex-grow: 1;
font-size: 13px;
color: var(--opfab-navbar-color);
background-color: var(--opfab-bgcolor);
text-decoration: none;
border-radius: 5px;
padding-bottom: 5px;
margin-top: -5px;
height: 2em;

ul {
margin: 0;
list-style: none;
display: flex;
justify-content: flex-end;

li {
padding-left: 0px;
padding-right: 25px;
// The following 3 lines avoid having the text go an a new line
// Arise only on chrome (OC-1563)
text-overflow: clip;
white-space: nowrap;
overflow: hidden;

.link-selected {
color: var(--opfab-navbar-color-active);
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}

.link-unselect {
background-color: var(--opfab-bgcolor);
color: var(--opfab-navbar-color);
text-decoration: none;
cursor: pointer;
}

.circle-btn {
border-radius: 50%;
border: none;
}
}

li:hover {
color: var(--opfab-navbar-color-active);
font-weight: bold;
}
}
}

td {
max-width: 350px;
padding-left: 5px;
Expand Down
13 changes: 13 additions & 0 deletions ui/main/src/app/modules/processmonitoring/processmonitoring.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,9 @@ export class ProcessMonitoringComponent implements OnDestroy, OnInit, AfterViewI
isProcessGroupFilterVisible: boolean;
isAdminModeChecked: boolean;
filters;
yearButtonSelected = false;
monthButtonSelected = false;
weekButtonSelected = false;

private mapSeverity = new Map([
['alarm', 1],
Expand Down Expand Up @@ -182,6 +185,16 @@ export class ProcessMonitoringComponent implements OnDestroy, OnInit, AfterViewI
return this.processList.length > 0;
}

moveDomain(moveForward: boolean): void {}

changeDateBounds(periodClicked: string): void {
this.yearButtonSelected = periodClicked === 'year';
this.monthButtonSelected = periodClicked === 'month';
this.weekButtonSelected = periodClicked === 'week';

this.processMonitoringView.getDatesAfterPeriodClick(periodClicked, this.activeMinDate, this.activeMaxDate);
}

ngOnInit() {
this.isProcessGroupFilterVisible = this.processMonitoringView.getProcessGroups().length > 1;

Expand Down

0 comments on commit 64ffc58

Please sign in to comment.