improvements(orb-ui): Dataset Windows

ui/src/app/pages/datasets/dataset-from/dataset-from.component.html

@@ -1,6 +1,4 @@
-<nb-card
-        class="nb-card-medium"
-        size="large">
+<nb-card>
     <nb-card-header>
         Dataset Details
         <button
@@ -13,16 +11,27 @@
         </button>
     </nb-card-header>
     <nb-card-body>
+        <div *ngIf="!fetchedData">
+            <div class="loading-spinner" style="top: 40% !important; left: 46% !important;"></div>
+          </div>
         <form [formGroup]="form" [hidden]="isLoading()">
             <!--      GROUP-->
-            <div [hidden]="!!group">
+            <div [hidden]="!!group" *ngIf="fetchedData">
                 <nb-form-field *ngIf="isEdit">
                     <div>
                         <label class="input-label">Agent Group</label>
                         <span class="required">*</span>
                     </div>
-                    <input class="input-agent-group" nbInput disabled [value]="groupName"/>
+                    <input *ngIf="groupName" class="input-agent-group" nbInput disabled [value]="groupName"/>
+                    <input *ngIf="!groupName" class="input-agent-group" style="color: #df316f !important;" nbInput disabled [value]="'Agent Group has been deleted'"/>
+                    <button 
+                        *ngIf="isGroupSelected"
+                        class="match-agents-button"
+                        (click)="onMatchingAgentsModal()">
+                        See Matching Agents
+                    </button>
                 </nb-form-field>
+
                 <nb-form-field *ngIf="!isEdit">
                     <div>
                         <label class="input-label">Agent Group</label>
@@ -31,7 +40,7 @@
 
                     <input
                             (input)="onChangeGroupName($event)"
-                            class="dataset-agent-group-input input-agent-group"
+                            class="input-agent-group"
                             [readonly]="fetchedData && !(availableAgentGroups.length > 0)"
                             [nbAutocomplete]="autoControl"
                             formControlName="agent_group_name"
@@ -62,11 +71,17 @@
                     <div class="required" *ngIf="fetchedData && !(availableAgentGroups.length > 0)"> 
                         There are no agent groups available
                     </div>
+                    <button 
+                        *ngIf="isGroupSelected"
+                        class="match-agents-button"
+                        (click)="onMatchingAgentsModal()">
+                        See Matching Agents
+                    </button>
                 </nb-form-field>
                 <br>
             </div>
             <!--      POLICY-->
-            <div [hidden]="!!policy || isEdit">
+            <div [hidden]="!!policy || isEdit" *ngIf="fetchedData">
                 <nb-form-field>
                     <div>
                         <label class="input-label">Collection Policy</label>
@@ -101,18 +116,18 @@
             </div>
             <!--      SINK-->
 
-            <div>
+            <div *ngIf="fetchedData">
                 <label class="input-label">Sinks</label>
                 <span class="required">*</span>
             </div>
-            <div>
+            <div *ngIf="fetchedData">
                 <ngx-sink-display [(selectedSinks)]="selectedSinks"></ngx-sink-display>
                 <ngx-sink-control
                   [(selectedSinks)]="selectedSinks"
                   [sinksList]="unselectedSinks"
                 ></ngx-sink-control>
                 <div
-                  *ngIf="sinkIDs.length === 0 && form.controls?.sink_ids.dirty"
+                  *ngIf="sinkIDs.length === 0 && (form.controls?.agent_group_name.dirty || isEdit)"
                   class="required"
                 >
                   At least one Sink is required.
@@ -125,31 +140,29 @@
                 </div>
             </div>
         </form>
+        <br>
     </nb-card-body>
     <nb-card-footer>
         <button
                 (click)="onFormSubmit()"
                 [disabled]="form.invalid || sinkIDs.length === 0 || isRequesting"
-                class="dataset-save-button"
-                nbButton
-                shape="round"
-                status="primary">Save
+                class="next-button"
+                status="primary"
+                style="padding: 6px 16px !important;">
+                {{isEdit ? 'Save' : 'Create'}}
         </button>
         <button
                 (click)="onClose()"
-                ghost
-                nbButton
-                shape="round"
+                class="cancel-back-button"
                 status="primary"
+                style="padding: 6px 14px !important; margin-right: 3px !important;"
                 type="button">Cancel
         </button>
         <button
                 (click)="onDelete()"
                 *ngIf="isEdit"
-                class="dataset-delete-button"
-                ghost
-                nbButton
-                shape="round"
-                type="button"><span>Delete Dataset</span></button>
+                class="dataset-delete-button">
+                Delete Dataset
+        </button>
     </nb-card-footer>
 </nb-card>

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;
 }

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;

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 {

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<AgentMatchComponent>,
     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);
   }

ui/src/app/pages/sinks/add/sink-add.component.html

@@ -41,7 +41,7 @@ <h4>{{ strings.sink.add.header }}</h4>
     >
     </ngx-sink-details>
   </div>
-  <div class="card-col col-8">
+  <div class="card-col col-8" style="padding-left: 0;">
     <ngx-sink-config [(createMode)]="createMode" [(sinkBackend)]="sinkBackend">
     </ngx-sink-config>
   </div>

ui/src/app/pages/sinks/view/sink.view.component.html

@@ -29,7 +29,8 @@ <h4>{{ strings.sink.view.header }}</h4>
         class="policy-save"
         nbButton
         *ngIf="isEditMode()"
-        shape="round">
+        shape="round"
+        style="margin-left: 20px;">
         <nb-icon icon="save-outline"></nb-icon>
         Save
       </button>

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,