Skip to content

Commit bde1081

Browse files
elmilan06elmilan06
committed
feat: refactor compliance query form and related components for improved layout and usability
1 parent e14c2a6 commit bde1081

12 files changed

Lines changed: 230 additions & 224 deletions

‎frontend/src/app/compliance/shared/compliance-shared.module.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ import {
2121
} from '../compliance-reports-view/components/compliance-time-window/compliance-time-windows.component';
2222
import {ReportApplyNoteComponent} from './components/report-apply-note/report-apply-note.component';
2323
import {
24-
UtmComplianceQueryFormComponent
25-
} from './components/utm-compliance-control-config-create/query-config/utm-compliance-query-form.component';
24+
UtmComplianceQueryComponent
25+
} from './components/utm-compliance-control-config-create/query-config/utm-compliance-query.component';
2626
import {
2727
UtmComplianceQueryListComponent
2828
} from './components/utm-compliance-control-config-create/query-config/utm-compliance-query-list.component';
@@ -65,7 +65,7 @@ import {GraphicBuilderSharedModule} from "../../graphic-builder/shared/graphic-b
6565
ComplianceTimeWindowsComponent,
6666
CompliancePrintViewComponent,
6767
UtmComplianceControlConfigCreateComponent,
68-
UtmComplianceQueryFormComponent,
68+
UtmComplianceQueryComponent,
6969
UtmComplianceQueryListComponent
7070
],
7171
imports: [

‎frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query-form.component.html‎

Lines changed: 0 additions & 103 deletions
This file was deleted.

‎frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query-list.component.html‎

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,63 @@
1-
<div class="query-container">
2-
<app-utm-compliance-query-form *ngIf="editingIndex === null"
3-
(add)="onQueryAdd($event)"
4-
[indexPatterns]="patterns"
5-
[indexPatternNames]="indexPatternNames">
6-
</app-utm-compliance-query-form>
1+
<app-utm-compliance-query *ngIf="editingIndex === null"
2+
(add)="onQueryAdd($event)"
3+
[indexPatterns]="patterns"
4+
[indexPatternNames]="indexPatternNames">
5+
</app-utm-compliance-query>
76

8-
<app-utm-compliance-query-form *ngIf="editingIndex !== null"
9-
[query]="queries[editingIndex]"
10-
(add)="onQueryAdd($event)"
11-
[indexPatterns]="patterns"
12-
[indexPatternNames]="indexPatternNames"
13-
(cancel)="cancelEdit()">
14-
</app-utm-compliance-query-form>
7+
<app-utm-compliance-query *ngIf="editingIndex !== null"
8+
[query]="queries[editingIndex]"
9+
(add)="onQueryAdd($event)"
10+
[indexPatterns]="patterns"
11+
[indexPatternNames]="indexPatternNames"
12+
(cancel)="cancelEdit()">
13+
</app-utm-compliance-query>
1514

16-
<div class="table-responsive w-100">
17-
<table class="table text-nowrap">
18-
<thead>
19-
<tr>
20-
<th class="text-center font-weight-semibold">Query Name</th>
21-
<th class="text-center font-weight-semibold">SQL Query</th>
22-
<th class="text-center font-weight-semibold">Evaluation Rule</th>
23-
<th class="text-center font-weight-semibold">Index Pattern</th>
24-
<th class="text-center font-weight-semibold text-right">Actions</th>
25-
</tr>
26-
</thead>
15+
<div class="table-responsive w-100">
16+
<table class="table text-nowrap">
17+
<thead>
18+
<tr>
19+
<th class="text-center font-weight-semibold">Query Name</th>
20+
<th class="text-center font-weight-semibold">SQL Query</th>
21+
<th class="text-center font-weight-semibold">Evaluation Rule</th>
22+
<th class="text-center font-weight-semibold">Index Pattern</th>
23+
<th class="text-center font-weight-semibold text-right">Actions</th>
24+
</tr>
25+
</thead>
2726

28-
<tbody>
29-
<ng-container *ngIf="queries && queries.length > 0; else noData">
30-
<tr *ngFor="let q of queries; let i = index">
31-
<td class="text-center pr-0 pl-0">
32-
{{ q.queryName | slice:0:30 }}{{ q.queryName.length > 30 ? '…' : '' }}
33-
</td>
34-
<td class="text-center pr-0 pl-0">
35-
{{ q.sqlQuery | slice:0:30 }}{{ q.sqlQuery.length > 30 ? '…' : '' }}
36-
</td>
37-
<td class="text-center pr-0 pl-0">{{ q.evaluationRule }}</td>
38-
<td class="text-center pr-0 pl-0">{{ getIndexPatternName(q.indexPatternId) }}</td>
39-
40-
<td class="td-action">
41-
<div class="d-flex justify-content-end align-items-center medium-icon">
42-
<i (click)="startEdit(i)"
43-
class="icon-pencil3 cursor-pointer mr-3"
44-
ngbTooltip="Edit visualization"
45-
tooltipClass="utm-tooltip-top"></i>
27+
<tbody>
28+
<ng-container *ngIf="queries && queries.length > 0; else noData">
29+
<tr *ngFor="let q of queries; let i = index">
30+
<td class="text-center pr-0 pl-0">
31+
{{ q.queryName | slice:0:30 }}{{ q.queryName.length > 30 ? '…' : '' }}
32+
</td>
33+
<td class="text-center pr-0 pl-0">
34+
{{ q.sqlQuery | slice:0:30 }}{{ q.sqlQuery.length > 30 ? '…' : '' }}
35+
</td>
36+
<td class="text-center pr-0 pl-0">{{ q.evaluationRule }}</td>
37+
<td class="text-center pr-0 pl-0">{{ getIndexPatternName(q.indexPatternId) }}</td>
4638

47-
<i (click)="onRemove(i)"
48-
class="icon-cross2 cursor-pointer"
49-
ngbTooltip="Delete visualization"
50-
placement="left"
51-
tooltipClass="utm-tooltip"></i>
52-
</div>
53-
</td>
54-
</tr>
55-
</ng-container>
39+
<td class="td-action">
40+
<div class="d-flex justify-content-end align-items-center medium-icon">
41+
<i (click)="startEdit(i)"
42+
class="icon-pencil3 cursor-pointer mr-3"
43+
ngbTooltip="Edit visualization"
44+
tooltipClass="utm-tooltip-top"></i>
5645

57-
<ng-template #noData>
58-
<td colspan="5">
59-
<app-no-data-found></app-no-data-found>
46+
<i (click)="onRemove(i)"
47+
class="icon-cross2 cursor-pointer"
48+
ngbTooltip="Delete visualization"
49+
placement="left"
50+
tooltipClass="utm-tooltip"></i>
51+
</div>
6052
</td>
61-
</ng-template>
62-
</tbody>
63-
</table>
64-
</div>
53+
</tr>
54+
</ng-container>
55+
56+
<ng-template #noData>
57+
<td colspan="5">
58+
<app-no-data-found></app-no-data-found>
59+
</td>
60+
</ng-template>
61+
</tbody>
62+
</table>
6563
</div>

‎frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query-list.component.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,3 @@
55
.table td {
66
vertical-align: middle;
77
}
8-
9-
.query-container {
10-
overflow: auto;
11-
}

frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query-form.component.css renamed to frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query.component.css

File renamed without changes.

‎frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query.component.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<form [formGroup]="form" (ngSubmit)="submit()">
2+
<div class="d-flex gap-3 row">
3+
<div class="form-group col-6">
4+
<label for="queryName">Query Name</label>
5+
<input formControlName="queryName" class="form-control" id="queryName">
6+
<div *ngIf="form.get('queryName').dirty && form.get('queryName').invalid">
7+
<small *ngIf="form.get('queryName').hasError('required')" class="form-text text-danger">
8+
Query name is required.
9+
</small>
10+
<small *ngIf="form.get('queryName').hasError('minlength')" class="form-text text-danger">
11+
Query name must be at least 10 characters long.
12+
</small>
13+
<small *ngIf="form.get('queryName').hasError('maxlength')" class="form-text text-danger">
14+
Query name must not exceed 200 characters.
15+
</small>
16+
</div>
17+
</div>
18+
19+
<div class="col-6">
20+
<label for="evalRule">Evaluation Rule</label>
21+
<ng-select
22+
formControlName="evaluationRule"
23+
[items]="evaluationRules"
24+
[closeOnSelect]="true"
25+
[clearable]="true"
26+
bindLabel="evaluationRule"
27+
bindValue="id"
28+
[loadingText]="'Loading Evaluation Rules...'"
29+
id="evalRule">
30+
</ng-select>
31+
32+
<div *ngIf="form.get('evaluationRule').dirty && form.get('evaluationRule').invalid">
33+
<small *ngIf="form.get('evaluationRule').hasError('required')" class="form-text text-danger">
34+
Evaluation Rule is required.
35+
</small>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div class="d-flex gap-3 row">
41+
<div class="form-group col-6">
42+
<label for="queryDesc">Description ({{ 2000 - ((form.get('queryDescription').value || '').length) }}) </label>
43+
<textarea formControlName="queryDescription" class="form-control" id="queryDesc"></textarea>
44+
<div *ngIf="form.get('queryDescription').dirty && form.get('queryDescription').invalid">
45+
<small *ngIf="form.get('queryDescription').hasError('required')" class="form-text text-danger">
46+
Query description is required.
47+
</small>
48+
<small *ngIf="form.get('queryDescription').hasError('maxlength')" class="form-text text-danger">
49+
Query description must not exceed 2000 characters.
50+
</small>
51+
</div>
52+
</div>
53+
54+
<div class="col-6" *ngIf="form.get('evaluationRule') && form.get('evaluationRule').value !== null && form.get('evaluationRule').value !== 'NO_HITS_ALLOWED'">
55+
<label for="ruleValue">Rule Value</label>
56+
<input
57+
type="number"
58+
formControlName="ruleValue"
59+
class="form-control"
60+
id="ruleValue"
61+
min="1">
62+
<div *ngIf="form.get('ruleValue').dirty && form.get('ruleValue').invalid">
63+
<small *ngIf="form.get('ruleValue').hasError('required')" class="form-text text-danger">
64+
Rule value is required.
65+
</small>
66+
<small *ngIf="form.get('ruleValue').hasError('min')" class="form-text text-danger">
67+
Rule value must be greater than 0.
68+
</small>
69+
<small *ngIf="form.get('ruleValue').hasError('pattern')" class="form-text text-danger">
70+
Rule value must be a positive integer.
71+
</small>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<div class="form-group">
77+
<label>SQL Query</label>
78+
<div class="editor-container">
79+
<app-code-editor
80+
[showFullEditor]="false"
81+
formControlName="sqlQuery"
82+
[consoleOptions]="codeEditorOptions"
83+
[customKeywords]="loadFieldNames().concat(indexPatternNames)"
84+
(indexPatternChange)="indexPatternSelected($event)">
85+
</app-code-editor>
86+
</div>
87+
<div *ngIf="errorMessage || (form.get('sqlQuery').invalid && form.get('sqlQuery').touched)">
88+
<small class="form-text text-danger">
89+
{{ errorMessage || 'SQL Query is required.'}}
90+
</small>
91+
</div>
92+
</div>
93+
94+
<div class="d-flex justify-content-end">
95+
<button *ngIf="query"
96+
type="button"
97+
class="btn utm-button utm-button-primary"
98+
(click)="cancelEdit()">
99+
Cancel
100+
</button>
101+
<button
102+
type="submit"
103+
class="btn utm-button utm-button-primary ml-2"
104+
[disabled]="form.invalid">
105+
{{ query ? 'Save changes' : 'Add query' }}
106+
</button>
107+
</div>
108+
</form>

frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query-form.component.ts renamed to frontend/src/app/compliance/shared/components/utm-compliance-control-config-create/query-config/utm-compliance-query.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import {ComplianceEvaluationRuleEnum} from '../../../enums/compliance-evaluation
99
import {UtmComplianceQueryConfigType} from '../../../type/compliance-query-config.type';
1010

1111
@Component({
12-
selector: 'app-utm-compliance-query-form',
13-
templateUrl: './utm-compliance-query-form.component.html',
14-
styleUrls: ['./utm-compliance-query-form.component.css']
12+
selector: 'app-utm-compliance-query',
13+
templateUrl: './utm-compliance-query.component.html',
14+
styleUrls: ['./utm-compliance-query.component.css']
1515
})
16-
export class UtmComplianceQueryFormComponent implements OnInit {
16+
export class UtmComplianceQueryComponent implements OnInit {
1717

1818
@Input() query: UtmComplianceQueryConfigType = null;
1919
@Input() indexPatterns: UtmIndexPattern[] = [];

0 commit comments

Comments
 (0)