From a408cab9f4ebd39ac22a204f300f8335256e028a Mon Sep 17 00:00:00 2001 From: joaoguilherme2003 Date: Thu, 5 Oct 2023 16:36:46 -0300 Subject: [PATCH] improvements(orb-ui): Dataset Windows (#2721) * improvements(orb-ui): Dataset Windows * console.log --- .../dataset-from/dataset-from.component.html | 57 ++++++++------ .../dataset-from/dataset-from.component.scss | 78 +++++++++++++++---- .../dataset-from/dataset-from.component.ts | 30 ++++++- .../delete/dataset.delete.component.scss | 1 - .../agents/match/agent.match.component.ts | 21 ++++- .../pages/sinks/add/sink-add.component.html | 2 +- .../pages/sinks/view/sink.view.component.html | 3 +- .../policy-datasets.component.ts | 1 + .../sink-control/sink-control.component.scss | 2 +- .../sink-config/sink-config.component.html | 4 +- .../sink-config/sink-config.component.scss | 10 ++- .../sink/sink-config/sink-config.component.ts | 4 +- 12 files changed, 162 insertions(+), 51 deletions(-) diff --git a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.html b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.html index 952635bfd..d879673ae 100644 --- a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.html +++ b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.html @@ -1,6 +1,4 @@ - + Dataset Details +
@@ -31,7 +40,7 @@ There are no agent groups available
+
-
+
@@ -101,18 +116,18 @@
-
+
*
-
+
At least one Sink is required. @@ -125,31 +140,29 @@
+
+ class="dataset-delete-button"> + Delete Dataset + diff --git a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss index e52cebafa..d35129a97 100644 --- a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss +++ b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.scss @@ -1,3 +1,27 @@ +nb-card { + padding: 0 !important; + width: 600px; + height: fit-content; + min-height: 400px; + nb-card-header { + background: #232940 !important; + color: #969fb9 !important; + } + + nb-card-body { + overflow: hidden !important; + margin: 2rem 3rem !important; + padding: 0 !important; + } + +} +.info-icon { + font-size: 14px; + color: #ffffff; + margin-left: 3px; +} + + nb-icon { vertical-align: middle; } @@ -15,10 +39,6 @@ nb-icon { color: #df316f; } -nb-select { - width: 100%; -} - button { float: right; } @@ -34,14 +54,37 @@ nb-tabset { } .dataset-save-button { - margin-top: 6px; - background-color: blue; + margin-top: 3px; + background-color: #3089fc; + &.btn-disabled { + background: #232940 !important; + } } .dataset-delete-button { color: #df316f !important; float: left; + font-size: 13px !important; + font-weight: 600 !important; + padding: 6px 16px !important; + border-radius: 16px !important; + background-color: transparent; + outline: none; + border: none; + font-family: 'Montserrat'; + transition: background-color 0.3s ease !important; } +.dataset-delete-button:hover { + background-color: rgba(255, 255, 255, 0.05) !important; + } + .label-name { + color: #969fb9; + font-size: 13px; + margin-bottom: 0 !important; + } + .group-name { + margin-bottom: 0 !important; + } .orb-close-dialog { background-color: #23294000; @@ -209,14 +252,19 @@ nb-accordion { overflow-y: inherit !important; } -.dataset-agent-group-input { - &:read-only { - background-color: #232940 !important; - cursor: default; - opacity: 0.5; - } -} - .input-agent-group { - width: 560px; + width: 100%; +} +.match-agents-button { + background-color: transparent; + border: none; + outline: none; + color: #3089fc; + font-size: 12px; + float: left; + font-weight: 600; + margin-top: 2px; +} +.match-agents-button:hover { + color: #81b8ff; } diff --git a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.ts b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.ts index 829ac94f3..36ca86544 100644 --- a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.ts +++ b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges } from '@angular/core'; import { AbstractControl, FormBuilder, @@ -17,6 +17,7 @@ import { DatasetPoliciesService } from 'app/common/services/dataset/dataset.poli import { NotificationsService } from 'app/common/services/notifications/notifications.service'; import { SinksService } from 'app/common/services/sinks/sinks.service'; import { DatasetDeleteComponent } from 'app/pages/datasets/delete/dataset.delete.component'; +import { AgentMatchComponent } from 'app/pages/fleet/agents/match/agent.match.component'; import { Observable, of } from 'rxjs'; export const DATASET_RESPONSE = { @@ -38,7 +39,7 @@ const CONFIG = { templateUrl: './dataset-from.component.html', styleUrls: ['./dataset-from.component.scss'], }) -export class DatasetFromComponent implements OnInit { +export class DatasetFromComponent implements OnInit, OnChanges { @Input() dataset: Dataset; @@ -50,6 +51,8 @@ export class DatasetFromComponent implements OnInit { isEdit: boolean; + isGroupSelected: boolean = false; + selectedGroup: string; groupName: string; selectedPolicy: string; @@ -94,6 +97,10 @@ export class DatasetFromComponent implements OnInit { this.getDatasetAvailableConfigList(); this.readyForms(); + + this.form.get('agent_group_id').valueChanges.subscribe(value => { + this.ngOnChanges({ agent_group_id: new SimpleChange(null, value, true) }); + }); } private _selectedSinks: Sink[]; @@ -173,6 +180,25 @@ export class DatasetFromComponent implements OnInit { this.filteredAgentGroups$ = of(this.filter(value)); } + onMatchingAgentsModal() { + this.dialogService.open(AgentMatchComponent, { + context: { + agentGroupId: this.form.controls.agent_group_id.value, + policy: this.policy, + }, + autoFocus: true, + closeOnEsc: true, + }); + } + ngOnChanges(changes: SimpleChanges): void { + if (changes.agent_group_id.currentValue) { + this.isGroupSelected = true; + } + else { + this.isGroupSelected = false; + } + } + ngOnInit(): void { if (!!this.group) { this.selectedGroup = this.group.id; diff --git a/ui/src/app/pages/datasets/delete/dataset.delete.component.scss b/ui/src/app/pages/datasets/delete/dataset.delete.component.scss index 6bf6eb96a..812be145b 100644 --- a/ui/src/app/pages/datasets/delete/dataset.delete.component.scss +++ b/ui/src/app/pages/datasets/delete/dataset.delete.component.scss @@ -1,5 +1,4 @@ nb-card { - max-width: 38rem !important; padding: 0 !important; nb-card-header { diff --git a/ui/src/app/pages/fleet/agents/match/agent.match.component.ts b/ui/src/app/pages/fleet/agents/match/agent.match.component.ts index 5fe48b5b5..8d6d68373 100644 --- a/ui/src/app/pages/fleet/agents/match/agent.match.component.ts +++ b/ui/src/app/pages/fleet/agents/match/agent.match.component.ts @@ -8,6 +8,7 @@ import { AgentGroup } from 'app/common/interfaces/orb/agent.group.interface'; import { AgentsService } from 'app/common/services/agents/agents.service'; import { Router } from '@angular/router'; import { AgentPolicy, AgentPolicyStates } from 'app/common/interfaces/orb/agent.policy.interface'; +import { AgentGroupsService } from 'app/common/services/agents/agent.groups.service'; @Component({ selector: 'ngx-agent-match-component', @@ -21,6 +22,9 @@ export class AgentMatchComponent implements OnInit, AfterViewInit { @Input() agentGroup: AgentGroup; + @Input() + agentGroupId: string; + @Input() policy!: AgentPolicy; @@ -64,6 +68,7 @@ export class AgentMatchComponent implements OnInit, AfterViewInit { protected dialogRef: NbDialogRef, protected agentsService: AgentsService, protected router: Router, + protected groupsService: AgentGroupsService, ) { this.specificPolicy = false; } @@ -132,6 +137,19 @@ export class AgentMatchComponent implements OnInit, AfterViewInit { } updateMatchingAgents() { + if (!!this.agentGroupId) { + this.groupsService.getAgentGroupById(this.agentGroupId).subscribe( + (resp) => { + this.agentGroup = resp; + this.getMatchingAgentsInfo(); + } + ) + } + else { + this.getMatchingAgentsInfo(); + } + } + getMatchingAgentsInfo() { const { tags } = this.agentGroup; const tagsList = Object.keys(tags).map(key => ({ [key]: tags[key] })); this.agentsService.getAllAgents(tagsList).subscribe( @@ -147,9 +165,8 @@ export class AgentMatchComponent implements OnInit, AfterViewInit { this.agents = resp; } }, - ); + ); } - onClose() { this.dialogRef.close(false); } diff --git a/ui/src/app/pages/sinks/add/sink-add.component.html b/ui/src/app/pages/sinks/add/sink-add.component.html index 8ce2016f7..bb6811513 100644 --- a/ui/src/app/pages/sinks/add/sink-add.component.html +++ b/ui/src/app/pages/sinks/add/sink-add.component.html @@ -41,7 +41,7 @@

{{ strings.sink.add.header }}

>
-
+
diff --git a/ui/src/app/pages/sinks/view/sink.view.component.html b/ui/src/app/pages/sinks/view/sink.view.component.html index 8143a2a78..cd837f44d 100644 --- a/ui/src/app/pages/sinks/view/sink.view.component.html +++ b/ui/src/app/pages/sinks/view/sink.view.component.html @@ -29,7 +29,8 @@

{{ strings.sink.view.header }}

class="policy-save" nbButton *ngIf="isEditMode()" - shape="round"> + shape="round" + style="margin-left: 20px;"> Save diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts index d534d5de6..5d7fccaae 100644 --- a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts +++ b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts @@ -177,6 +177,7 @@ export class PolicyDatasetsComponent closeOnEsc: false, context: { dataset, + policy: this.policy, }, hasScroll: false, closeOnBackdropClick: true, diff --git a/ui/src/app/shared/components/orb/sink-control/sink-control.component.scss b/ui/src/app/shared/components/orb/sink-control/sink-control.component.scss index 37944713e..d86b6561e 100644 --- a/ui/src/app/shared/components/orb/sink-control/sink-control.component.scss +++ b/ui/src/app/shared/components/orb/sink-control/sink-control.component.scss @@ -1,3 +1,3 @@ .sink-selector { - width: 560px; + width: 100%; } diff --git a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.html b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.html index 05d4d1e02..d85ed06fd 100644 --- a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.html +++ b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.html @@ -33,14 +33,14 @@ #editorComponent [(ngModel)]="code" [options]="editorOptions" - class="code-editor" + class="code-editor editor-height-{{createMode}}" ngDefaultControl *ngIf="!isYaml">
diff --git a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.scss b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.scss index cdd48cfd7..b9f41d684 100644 --- a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.scss +++ b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.scss @@ -1,5 +1,11 @@ -ngx-monaco-editor { - height: 25rem; + +.editor-height- { + &true { + height: 25.5rem; + } + &false { + height: 22.5rem; + } } .summary-accent { color: #969fb9 !important; diff --git a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts index 77dd6beda..7ce98d7df 100644 --- a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts +++ b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts @@ -16,10 +16,10 @@ export class SinkConfigComponent implements OnInit, OnChanges { sink: Sink; @Input() - editMode: boolean; + editMode: boolean = false; @Input() - createMode: boolean; + createMode: boolean = false; @Input() sinkBackend: string;