Skip to content

Commit a6c770e

Browse files
mjabascal10mjabascal10
committed
feat: Add import rule
1 parent 1209fa6 commit a6c770e

12 files changed

Lines changed: 522 additions & 38 deletions

File tree

‎frontend/src/app/rule-management/app-rule/components/add-rule/add-rule.component.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,8 @@
4040
</div>
4141
</div>
4242
<app-utm-file-upload (fileEmit)="onFileChange($event)"
43-
(errorEmit)="onLoadError()"
44-
[acceptTypes]="'.yml'"
45-
[shoPreview]="true"
46-
[multiple]="false"></app-utm-file-upload>
43+
[acceptTypes]="'.yml'">
44+
</app-utm-file-upload>
4745
</div>
4846
<form *ngIf="currentStep != RULE_FORM.STEP0" [formGroup]="ruleForm">
4947
<div [hidden]="currentStep != RULE_FORM.STEP1">

‎frontend/src/app/rule-management/app-rule/components/add-rule/add-rule.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ export class AddRuleComponent implements OnInit, OnDestroy {
4747

4848
this.types$ = this.dataTypeService.type$;
4949
this.loadDataTypes();
50-
console.log(this.ruleForm);
5150
}
5251

5352
onDataTypeChange(selectedDataTypes: DataType[]) {

‎frontend/src/app/rule-management/app-rule/components/add-variable/add-variable.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class AddVariableComponent implements OnInit {
3434
}
3535

3636
getFields(indexPattern: string) {
37-
return this.fieldDataService.getFields(indexPattern);
37+
return this.fieldDataService.getFields(indexPattern, true);
3838
}
3939

4040
get variables() {
@@ -52,7 +52,7 @@ export class AddVariableComponent implements OnInit {
5252
onFieldChange(selectField: string) {
5353
const variable = this.variables.at(0);
5454
const varFormGroup = variable.get('as');
55-
if(!!variable.get('get').value){
55+
if (!!variable.get('get').value) {
5656
varFormGroup.setValidators([Validators.required, singleTermValidator()]);
5757
varFormGroup.updateValueAndValidity();
5858
} else {

‎frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.component.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<app-utm-modal-header [name]="(rule ?'Edit':'Create') + ' rule'"></app-utm-modal-header>
2+
<div class="modal-content d-flex flex-column p-3">
3+
<div class="form-body w-100">
4+
<div class="d-flex justify-content-center">
5+
<div class="step-container d-flex justify-content-between mt-2 mb-4 w-75">
6+
7+
<div class="step">
8+
<span class="text-blue-800 font-weight-bold">Import</span>
9+
<div
10+
[ngClass]="isCompleted(RULE_FORM.STEP0) ? 'step-success': currentStep == RULE_FORM.STEP0 ? 'step-active' : 'step-inactive'"
11+
class="round-indicator">
12+
<i class="text-white font-size-sm"
13+
[ngClass]="isCompleted(RULE_FORM.STEP0) ? 'icon-checkmark3' : 'icon-file-upload'"></i>
14+
</div>
15+
</div>
16+
<div class="step-link"></div>
17+
18+
19+
<div class="step">
20+
<span class="text-blue-800 font-weight-bold">Review</span>
21+
<div
22+
[ngClass]="isCompleted(RULE_FORM.STEP1) ? 'step-success': currentStep == RULE_FORM.STEP1 ? 'step-active' : 'step-inactive'"
23+
class="round-indicator">
24+
<i class="text-white font-size-sm top-0"
25+
[ngClass]="isCompleted(RULE_FORM.STEP1) ? 'icon-checkmark3' : 'icon-shield-check'"></i>
26+
</div>
27+
</div>
28+
<div class="step-link"></div>
29+
30+
<div class="step">
31+
<span class="text-blue-800 font-weight-bold">Import</span>
32+
<div
33+
[ngClass]="isCompleted(RULE_FORM.STEP2) ? 'step-success' : currentStep == RULE_FORM.STEP2 ? 'step-active' : 'step-inactive'"
34+
class="round-indicator">
35+
<i class="text-white font-size-sm top-0"
36+
[ngClass]="isCompleted(RULE_FORM.STEP2) ? 'icon-checkmark3' : 'icon-upload10'"></i>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div [hidden]="currentStep != RULE_FORM.STEP0">
43+
<div class="d-flex mt-3 flex-column">
44+
<div class="alert alert-info alert-styled-right mb-2 info-dismissible w-100">
45+
<span class="font-weight-semibold">Info! </span>
46+
The rule import process requires a valid file with a <strong>.yml</strong> extension.
47+
</div>
48+
</div>
49+
<app-utm-file-upload (fileEmit)="onFileChange($event)"
50+
[acceptTypes]="'.yml'">
51+
</app-utm-file-upload>
52+
</div>
53+
54+
<div [hidden]="currentStep === RULE_FORM.STEP0">
55+
<div class="rule-items wm-200px">
56+
<div style="background: #f8f8f8" *ngFor="let rule of rules; let i = index"
57+
class="p-2 border rounded mb-2 d-flex flex-column">
58+
59+
<div (click)="showRule(rule)" class="d-flex align-items-center justify-content-between w-100 cursor-pointer">
60+
<div [ngClass]="{'text-success': rule.valid, 'text-danger': !rule.valid}" class="rule-filename">
61+
<span (click)="showRule(rule)" class="cursor-pointer opacity-75">
62+
<i [ngClass]="{'icon-arrow-down32' : !rule.showDetail, 'icon-arrow-up32' : rule.showDetail}"
63+
class="font-size-sm"></i>
64+
</span>
65+
<span class="ml-2">
66+
<strong>{{ rule.name + ' ' }}</strong>
67+
<small>({{ rule.valid ? 'valid' : 'invalid' }} )</small>
68+
</span>
69+
</div>
70+
71+
<div *ngIf="!loading rule" class="d-flex">
72+
<div (click)="deleteRule(i)" class="cursor-pointer opacity-75 ml-2">
73+
<i class="icon-cross2 font-size-sm"></i>
74+
</div>
75+
</div>
76+
77+
<div *ngIf="loading" class="d-flex">
78+
<div class="cursor-pointer opacity-75 ml-2">
79+
<i class="icon-spinner spinner"></i>
80+
</div>
81+
</div>
82+
83+
</div>
84+
85+
<div *ngIf="rule.showDetail" [ngClass]="{'alert-danger' : !rule.valid, 'alert-success': rule.valid}" class="alert mt-2 py-2 pl-3 w-100">
86+
<app-utm-json-detail-view [rowDocument]="rule"></app-utm-json-detail-view>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
</div>
93+
<div *ngIf="files.length > 0" class="button-container d-flex justify-content-end pr-3 w-100">
94+
<button *ngIf="currentStep != RULE_FORM.STEP2" (click)="activeModal.close()"
95+
class="btn utm-button utm-button-grey mr-2">
96+
<i class="icon-cancel-circle2 top-0"></i>&nbsp; Cancel
97+
</button>
98+
99+
<button *ngIf="currentStep == RULE_FORM.STEP1" (click)="back()" class="btn utm-button utm-button-primary mr-2">
100+
<i class="icon-arrow-left32 top-0"></i>
101+
Back
102+
</button>
103+
104+
<button *ngIf="currentStep != RULE_FORM.STEP2" (click)="next()"
105+
class="btn utm-button utm-button-primary">
106+
Next
107+
<i class="icon-arrow-right32"></i>&nbsp;
108+
</button>
109+
110+
<button *ngIf="currentStep == RULE_FORM.STEP2" (click)="saveRule()"
111+
class="btn utm-button utm-button-primary">
112+
<i [ngClass]="loading ? 'icon-spinner spinner' : 'icon-grid-alt top-0'"></i>&nbsp; Import rules
113+
</button>
114+
</div>
115+
</div>

‎frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.component.scss‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
@import "../../../../../assets/styles/theme.scss";
2+
@import "../../../../../assets/styles/var.scss";
3+
4+
.btn-close {
5+
height: 36px;
6+
}
7+
8+
.btn-danger .icon-trash,
9+
.btn-close .icon-trash:before {
10+
font-size: 14px;
11+
color: white;
12+
}
13+
14+
legend {
15+
width: auto;
16+
border-bottom: 0;
17+
font-size: .75rem;
18+
font-weight: 400;
19+
}
20+
21+
fieldset {
22+
margin-bottom: 1rem;
23+
}
24+
25+
.container-fluid {
26+
padding: 0.5rem 1rem;
27+
}
28+
29+
.d-flex {
30+
display: flex;
31+
justify-content: space-between;
32+
align-items: center;
33+
}
34+
35+
.flex-nowrap {
36+
flex-wrap: nowrap;
37+
}
38+
39+
.alert-filter-container {
40+
min-width: 300px;
41+
max-width: 400px;
42+
resize: horizontal;
43+
overflow: auto;
44+
}
45+
46+
.card {
47+
display: flex;
48+
flex-direction: column;
49+
}
50+
51+
.card-header {
52+
flex-shrink: 0;
53+
}
54+
55+
56+
.utm-button-back {
57+
left: 250px;
58+
}
59+
60+
.modal-content {
61+
display: flex;
62+
flex-direction: column;
63+
height: 100%;
64+
}
65+
66+
.form-body {
67+
min-height: 590px;
68+
max-height: 700px;
69+
overflow-y: auto!important;
70+
overflow-x: hidden!important;
71+
flex-grow: 1;
72+
}
73+
74+
.type-select .ng-select-container {
75+
height: 36px!important;
76+
}
77+
78+
79+
@media (max-width: 4000px) {
80+
.alert-filter-container {
81+
width: 350px;
82+
}
83+
}
84+
85+
@media (min-width: 4001px) {
86+
.alert-filter-container {
87+
width: 400px;
88+
}
89+
90+
.utm-button-back {
91+
left: 350px;
92+
}
93+
}
94+
95+
.utm-button-grey{
96+
height: 30px;
97+
}
98+
99+
.font-size-sm {
100+
font-size: .85rem!important;
101+
}
102+
103+
.utm-box {
104+
z-index: auto!important;
105+
}
106+
107+
.step {
108+
display: flex;
109+
flex-direction: column;
110+
align-items: center;
111+
position: relative;
112+
}
113+
114+
.round-indicator {
115+
width: 40px;
116+
height: 40px;
117+
border-radius: 50%;
118+
display: flex;
119+
align-items: center;
120+
justify-content: center;
121+
background-color: #ccc;
122+
position: relative;
123+
z-index: 1;
124+
}
125+
126+
.step-link {
127+
flex: 1;
128+
height: 1px;
129+
background-color: #ccc;
130+
position: relative;
131+
top: 10px;
132+
}
133+
134+
.step-active {
135+
background-color: $blue-scroll;
136+
}
137+
138+
.step-inactive {
139+
background-color: $grey-color;
140+
}
141+
142+
.step-success {
143+
background-color: $success-color !important;
144+
}
145+

0 commit comments

Comments
 (0)