-
-
-
-
-
-
-
-
+
diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss
index 19ed35e11..6daef030f 100644
--- a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss
+++ b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss
@@ -6,6 +6,14 @@ h4 {
line-height: 2rem;
margin-bottom: 1.5rem;
}
+.row {
+ display: flex;
+
+}
+nb-tab {
+ padding: 0 !important;
+ overflow: hidden !important;
+}
nb-card {
border: transparent;
diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts
index 04fffa9ef..21c2e83eb 100644
--- a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts
+++ b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts
@@ -59,6 +59,8 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
lastUpdate: Date | null = null;
+ errorConfigMessage: string;
+
@ViewChild(PolicyDetailsComponent) detailsComponent: PolicyDetailsComponent;
@ViewChild(PolicyInterfaceComponent)
@@ -75,6 +77,7 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
private editor: CodeEditorService,
) {
this.isRequesting = false;
+ this.errorConfigMessage = '';
}
ngOnInit() {
@@ -86,8 +89,7 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
this.isLoading = true;
if (newPolicyId) {
this.policyId = newPolicyId;
- }
- else {
+ } else {
this.policyId = this.route.snapshot.paramMap.get('id');
}
this.retrievePolicy();
@@ -96,10 +98,14 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
isEditMode() {
- return Object.values(this.editMode).reduce(
+ const resp = Object.values(this.editMode).reduce(
(prev, cur) => prev || cur,
false,
);
+ if (!resp) {
+ this.errorConfigMessage = '';
+ }
+ return resp;
}
canSave() {
@@ -107,13 +113,25 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
? this.detailsComponent?.formGroup?.status === 'VALID'
: true;
- let config = this.interfaceComponent?.code
+ const config = this.interfaceComponent?.code;
let interfaceValid = false;
- if (this.editor.isJson(config)) {
- interfaceValid = true;
- } else if (this.editor.isYaml(config)) {
- interfaceValid = true;
+ if (this.policy.format === 'json') {
+ if (this.editor.isJson(config)) {
+ interfaceValid = true;
+ this.errorConfigMessage = '';
+ } else {
+ interfaceValid = false;
+ this.errorConfigMessage = 'Invalid JSON configuration, check syntax errors';
+ }
+ } else if (this.policy.format === 'yaml') {
+ if (this.editor.isYaml(config) && !this.editor.isJson(config)) {
+ interfaceValid = true;
+ this.errorConfigMessage = '';
+ } else {
+ interfaceValid = false;
+ this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors';
+ }
}
return detailsValid && interfaceValid;
}
@@ -142,6 +160,9 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
try {
if (format === 'yaml') {
+ if (this.editor.isJson(policyInterface)) {
+ throw new Error('Invalid YAML format');
+ }
yaml.load(policyInterface);
interfacePartial = {
@@ -165,22 +186,23 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
this.policiesService.editAgentPolicy(payload).subscribe(
(resp) => {
- this.notifications.success('Agent Policy updated successfully', '');
- this.discard();
- this.policy = resp;
- this.orb.refreshNow();
- this.isRequesting = false;
+ this.notifications.success('Agent Policy updated successfully', '');
+ this.discard();
+ this.policy = resp;
+ this.orb.refreshNow();
+ this.isRequesting = false;
},
- (error) => {
+ (err) => {
this.isRequesting = false;
- }
- );
+ },
+ );
} catch (err) {
this.notifications.error(
'Failed to edit Agent Policy',
`Error: Invalid ${format.toUpperCase()}`,
);
+ this.isRequesting = false;
}
}
@@ -207,21 +229,21 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
if (confirm) {
this.duplicatePolicy(this.policy);
}
- })
+ });
}
duplicatePolicy(agentPolicy: any) {
this.policiesService
- .duplicateAgentPolicy(agentPolicy.id)
- .subscribe((newAgentPolicy) => {
- if (newAgentPolicy?.id) {
- this.notifications.success(
- 'Agent Policy Duplicated',
- `New Agent Policy Name: ${newAgentPolicy?.name}`,
- );
- this.router.navigateByUrl(`/pages/datasets/policies/view/${newAgentPolicy?.id}`);
- this.fetchData(newAgentPolicy.id);
- }
- });
+ .duplicateAgentPolicy(agentPolicy.id)
+ .subscribe((newAgentPolicy) => {
+ if (newAgentPolicy?.id) {
+ this.notifications.success(
+ 'Agent Policy Duplicated',
+ `New Agent Policy Name: ${newAgentPolicy?.name}`,
+ );
+ this.router.navigateByUrl(`/pages/datasets/policies/view/${newAgentPolicy?.id}`);
+ this.fetchData(newAgentPolicy.id);
+ }
+ });
}
ngOnDestroy() {
@@ -254,14 +276,14 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
}
hasChanges() {
- let policyDetails = this.detailsComponent.formGroup?.value;
+ const policyDetails = this.detailsComponent.formGroup?.value;
const tags = this.detailsComponent.selectedTags;
- const description = this.policy.description ? this.policy.description : "";
- const formsDescription = policyDetails.description === null ? "" : policyDetails.description
+ const description = this.policy.description ? this.policy.description : '';
+ const formsDescription = policyDetails.description === null ? '' : policyDetails.description;
- let selectedTags = JSON.stringify(tags);
- let orb_tags = JSON.stringify(this.policy.tags);
+ const selectedTags = JSON.stringify(tags);
+ const orb_tags = JSON.stringify(this.policy.tags);
if (policyDetails.name !== this.policy.name || formsDescription !== description || selectedTags !== orb_tags) {
return true;
diff --git a/ui/src/app/pages/fleet/agents/add/agent.add.component.scss b/ui/src/app/pages/fleet/agents/add/agent.add.component.scss
index e6bdcc01c..27c89c7b0 100644
--- a/ui/src/app/pages/fleet/agents/add/agent.add.component.scss
+++ b/ui/src/app/pages/fleet/agents/add/agent.add.component.scss
@@ -110,7 +110,7 @@ nb-card-footer {
.review-label {
font-family: 'Montserrat';
font-size: 13px;
- font-weight: 400 !important;
+ font-weight: 400 !important;
margin: 0;
color: #969fb9 !important;
}
diff --git a/ui/src/app/pages/fleet/agents/delete/agent.delete.component.scss b/ui/src/app/pages/fleet/agents/delete/agent.delete.component.scss
index 8ac634efb..003444e84 100644
--- a/ui/src/app/pages/fleet/agents/delete/agent.delete.component.scss
+++ b/ui/src/app/pages/fleet/agents/delete/agent.delete.component.scss
@@ -1,5 +1,6 @@
nb-card {
max-width: 38rem !important;
+ padding: 0 !important;
nb-card-header {
background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
p {
color: #969fb9 !important;
+ margin-bottom: 1rem !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ line-height: 24px !important;
}
.ns1-red {
diff --git a/ui/src/app/pages/fleet/agents/key/agent.key.component.scss b/ui/src/app/pages/fleet/agents/key/agent.key.component.scss
index c87226b2e..5acf7fd09 100644
--- a/ui/src/app/pages/fleet/agents/key/agent.key.component.scss
+++ b/ui/src/app/pages/fleet/agents/key/agent.key.component.scss
@@ -13,14 +13,14 @@ nb-card {
float: right;
}
nb-icon {
- float: right ;
+ float: right;
}
}
nb-card-body {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
- margin: 0 2rem 2rem 2rem;
+ margin: 0 2rem 2rem;
padding: 0;
p {
diff --git a/ui/src/app/pages/fleet/agents/key/agent.key.component.ts b/ui/src/app/pages/fleet/agents/key/agent.key.component.ts
index 5310006dd..a8202f70d 100644
--- a/ui/src/app/pages/fleet/agents/key/agent.key.component.ts
+++ b/ui/src/app/pages/fleet/agents/key/agent.key.component.ts
@@ -89,7 +89,7 @@ orbcommunity/orb-agent run -c /usr/local/orb/agent.yaml`;
} else if (target === 'command') {
this.copyCommandIcon = 'checkmark-outline';
setTimeout(() => {
- this.copyCommandIcon = "copy-outline";
+ this.copyCommandIcon = 'copy-outline';
}, 2000);
}
}
@@ -106,8 +106,7 @@ orbcommunity/orb-agent run -c /usr/local/orb/agent.yaml`;
a.download = `${this.agent.id}.txt`;
a.click();
window.URL.revokeObjectURL(url);
- }
- else if (commandType === 'fileConfig') {
+ } else if (commandType === 'fileConfig') {
const blob = new Blob([this.fileConfigCommandCopy], { type: 'text/plain' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
index 702b66eaf..7a7e2b886 100644
--- a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
+++ b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
@@ -53,7 +53,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
canResetAgents: boolean;
isResetting: boolean;
-
+
private agentsSubscription: Subscription;
@@ -111,7 +111,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
map(agents => {
return agents.map(agent => {
let version: string;
- if (agent.state !== 'new') {
+ if (agent.state !== AgentStates.new && agent?.agent_metadata?.orb_agent?.version) {
version = agent.agent_metadata.orb_agent.version;
} else {
version = '-';
@@ -121,7 +121,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
version,
};
});
- })
+ }),
);
this.columns = [];
@@ -210,7 +210,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
minWidth: 150,
name: 'Name',
cellTemplate: this.agentNameTemplateCell,
- resizeable: true,
+ resizeable: true,
},
{
prop: 'state',
@@ -219,7 +219,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
canAutoResize: true,
name: 'Status',
cellTemplate: this.agentStateTemplateRef,
- resizeable: true,
+ resizeable: true,
},
{
prop: 'policy_agg_info',
@@ -228,7 +228,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
minWidth: 150,
name: 'Policies',
cellTemplate: this.agentPolicyStateTemplateRef,
- resizeable: true,
+ resizeable: true,
},
{
prop: 'combined_tags',
@@ -245,7 +245,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
.map(([key, value]) => `${key}:${value}`)
.join(','),
),
- resizeable: true,
+ resizeable: true,
},
{
prop: 'version',
@@ -255,7 +255,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
name: 'Version',
sortable: true,
cellTemplate: this.agentVersionTemplateCell,
- resizeable: true,
+ resizeable: true,
},
{
prop: 'ts_last_hb',
@@ -265,7 +265,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
name: 'Last Activity',
sortable: true,
cellTemplate: this.agentLastActivityTemplateCell,
- resizeable: true,
+ resizeable: true,
},
{
name: '',
@@ -275,19 +275,19 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
canAutoResize: true,
sortable: false,
cellTemplate: this.actionsTemplateCell,
- resizeable: true,
+ resizeable: true,
},
];
}
- public onCheckboxChange(event: any, row: any): void {
- let selectedAgent = {
+ public onCheckboxChange(event: any, row: any): void {
+ const selectedAgent = {
id: row.id,
resetable: true,
name: row.name,
state: row.state,
- }
+ };
if (this.getChecked(row) === false) {
let resetable = true;
if (row.state === 'new' || row.state === 'offline') {
@@ -349,7 +349,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
}
onOpenDeleteSelected() {
const selected = this.selected;
- const elementName = "Agents"
+ const elementName = 'Agents';
this.dialogService
.open(DeleteSelectedComponent, {
context: { selected, elementName },
@@ -368,15 +368,15 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
deleteSelectedAgents() {
this.selected.forEach((agent) => {
this.agentService.deleteAgent(agent.id).subscribe();
- })
+ });
this.notificationsService.success('All selected Agents delete requests succeeded', '');
}
onOpenResetAgents() {
- const size = this.selected.length;
+ const selected = this.selected;
this.dialogService
.open(AgentResetComponent, {
- context: { size },
+ context: { selected },
autoFocus: true,
closeOnEsc: true,
})
@@ -385,14 +385,14 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
this.resetAgents();
this.orb.refreshNow();
}
- })
+ });
}
resetAgents() {
if (!this.isResetting) {
this.isResetting = true;
this.selected.forEach((agent) => {
this.agentService.resetAgent(agent.id).subscribe();
- })
+ });
this.notifyResetSuccess();
this.selected = [];
this.isResetting = false;
@@ -409,7 +409,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
name: row.name,
state: row.state,
resetable: row.state === 'new' || row.state === 'offline' ? false : true,
- }
+ };
this.selected.push(policySelected);
});
});
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 21ffc5217..11d10a645 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;
}
@@ -127,29 +132,40 @@ export class AgentMatchComponent implements OnInit, AfterViewInit {
}
onOpenView(agent: any) {
- this.router.navigateByUrl(`pages/fleet/agents/view/${ agent.id }`);
+ this.router.navigateByUrl(`pages/fleet/agents/view/${agent.id}`);
this.dialogRef.close();
}
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(
resp => {
- if(!!this.policy) {
+ if (!!this.policy) {
this.specificPolicy = true;
this.agents = resp.map((agent) => {
- const {policy_state} = agent;
+ const { policy_state } = agent;
const policy_agg_info = !!policy_state && policy_state[this.policy.id]?.state || AgentPolicyStates.failedToApply;
- return {...agent, policy_agg_info };
- })
+ return { ...agent, policy_agg_info };
+ });
} else {
this.agents = resp;
}
},
);
}
-
onClose() {
this.dialogRef.close(false);
}
diff --git a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.html b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.html
index 6a7488242..d2096fcdf 100644
--- a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.html
+++ b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.html
@@ -11,17 +11,27 @@
- Are you sure you want to reset a total of {{ size }} Agents?
- *To confirm, type the amount of agents to be reset.
+ Are you sure you want to reset a total of {{ selected.length }} Agent(s)?
+
+
+
+ {{ item.name }}
+
+
+ {{ item.state | titlecase }}
+
+
+
+ *To confirm, type the amount of agents to be reset.
+ placeholder="{{selected.length}}" [(ngModel)]="validationInput"
+ data-orb-qa-id="input#selected.length">
- {{size}}
+ {{selected.length}}
diff --git a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.scss b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.scss
index 4f28bb2d8..8c53dbf85 100644
--- a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.scss
+++ b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.scss
@@ -1,5 +1,6 @@
nb-card {
max-width: 38rem !important;
+ padding: 0 !important;
nb-card-header {
background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
p {
color: #969fb9 !important;
+ margin-bottom: 1rem !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ line-height: 24px !important;
}
.ns1-red {
@@ -48,4 +53,40 @@ nb-card {
}
.ns1red {
color: #df316f !important;
- }
\ No newline at end of file
+ }
+ .element-list {
+ max-height: 225px;
+ overflow-y: auto;
+ margin-left: 20px;
+ }
+ .span-accent {
+ font-size: 13px;
+ font-weight: 600;
+ float: right;
+ }
+ .item-row {
+ display: flex;
+ align-items: center;
+ border-radius: 6px;
+ width: 300px;
+ padding-left: 3px;
+ font-size: 13px;
+ font-weight: 600;
+ }
+ .item-row:hover {
+ background-color: #1e263d;
+ }
+ .col-8 {
+ flex: 1;
+ padding-left: 0;
+ }
+ .col-3 {
+ flex: 1;
+ padding-right: 0;
+ }
+ .overflow-ellipsis {
+ white-space: nowrap !important;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ max-width: 350px !important;
+ }
diff --git a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts
index 59ec7a923..9fea705bf 100644
--- a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts
+++ b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts
@@ -10,7 +10,7 @@ import { STRINGS } from 'assets/text/strings';
export class AgentResetComponent {
strings = STRINGS.agents;
- @Input() size: Number;
+ @Input() selected: any[] = [];
validationInput: Number;
@@ -28,6 +28,6 @@ export class AgentResetComponent {
}
isEnabled(): boolean {
- return this.validationInput === this.size;
+ return this.validationInput === this.selected.length;
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/pages/fleet/agents/view/agent.view.component.html b/ui/src/app/pages/fleet/agents/view/agent.view.component.html
index 041f6fb04..59da9207e 100644
--- a/ui/src/app/pages/fleet/agents/view/agent.view.component.html
+++ b/ui/src/app/pages/fleet/agents/view/agent.view.component.html
@@ -4,36 +4,41 @@
Agent View
-
-
-
-
-
- {{ agent?.state | ngxCapitalize }}
-
+
+
+
+
-
-
- Last activity
-
- today, at {{ agent?.ts_last_hb | date: 'HH:mm z' }}
+
+
+
+
+
+ {{ agent?.state | ngxCapitalize }}
+
+
+
+
+ Last activity
+
+ today, at {{ agent?.ts_last_hb | date: 'HH:mm z' }}
+
+
+ on {{ agent?.ts_last_hb | date: 'M/d/yy, HH:mm z' }}
+
-
- on {{ agent?.ts_last_hb | date: 'M/d/yy, HH:mm z' }}
+
+ This Agent has been provisioned but never connected.
-
-
- This Agent has been provisioned but never connected.
-
+
@@ -42,21 +47,42 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/ui/src/app/pages/fleet/agents/view/agent.view.component.scss b/ui/src/app/pages/fleet/agents/view/agent.view.component.scss
index 15c572b3b..682b95a3d 100644
--- a/ui/src/app/pages/fleet/agents/view/agent.view.component.scss
+++ b/ui/src/app/pages/fleet/agents/view/agent.view.component.scss
@@ -21,10 +21,14 @@ h4 {
line-height: 2rem;
margin-bottom: 1.5rem;
}
-
+nb-tab {
+ padding: 0 !important;
+ overflow: hidden !important;
+}
nb-card {
border: transparent;
border-radius: 0.5rem;
+ padding: 0 !important;
nb-card-header {
background-color: #232940;
@@ -198,18 +202,31 @@ nb-card {
color: #969fb9;
font-size: 14px;
}
-.state {
- font-size: 15px;
- font-weight: 700;
-}
-.fa.fa-circle {
- font-size: 11px;
+
+.state-circle {
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
}
.offline-circle {
- width: 10px;
- height: 10px;
+ width: 9px;
+ height: 9px;
border: 2px solid #969fb9;
border-radius: 50%;
background-color: transparent;
}
+.state {
+ font-size: 15px;
+ font-weight: 700;
+ font-family: 'Montserrat';
+}
+.state-div {
+ margin-bottom: 23px;
+}
+.date {
+ font-size: 14px;
+ font-weight: 400;
+ margin-top: 23px;
+ line-height: 1.25rem;
+}
diff --git a/ui/src/app/pages/fleet/agents/view/agent.view.component.ts b/ui/src/app/pages/fleet/agents/view/agent.view.component.ts
index ca6091fa6..e0b62d7c6 100644
--- a/ui/src/app/pages/fleet/agents/view/agent.view.component.ts
+++ b/ui/src/app/pages/fleet/agents/view/agent.view.component.ts
@@ -38,6 +38,9 @@ export class AgentViewComponent implements OnInit, OnDestroy {
agentSubscription: Subscription;
+ configFile = 'configFile';
+ default = 'default';
+
constructor(
protected agentsService: AgentsService,
protected route: ActivatedRoute,
diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
index 89db8a024..270143948 100644
--- a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
+++ b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
@@ -136,7 +136,7 @@ mat-chip nb-icon {
color: #969fb9 !important;
}
label {
- color: #969FB9;
+ color: #969fb9;
}
::ng-deep .orb-breadcrumb {
align-items: center;
@@ -279,6 +279,6 @@ mat-chip-list {
.review-label {
font-family: 'Montserrat';
font-size: 13px;
- font-weight: 400 !important;
+ font-weight: 400 !important;
margin: 0;
}
diff --git a/ui/src/app/pages/fleet/groups/delete/agent.group.delete.component.scss b/ui/src/app/pages/fleet/groups/delete/agent.group.delete.component.scss
index 8ac634efb..ab675c0a8 100644
--- a/ui/src/app/pages/fleet/groups/delete/agent.group.delete.component.scss
+++ b/ui/src/app/pages/fleet/groups/delete/agent.group.delete.component.scss
@@ -1,6 +1,6 @@
nb-card {
max-width: 38rem !important;
-
+ padding: 0 !important;
nb-card-header {
background: #232940 !important;
color: #969fb9 !important;
@@ -12,6 +12,10 @@ nb-card {
p {
color: #969fb9 !important;
+ margin-bottom: 1rem !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ line-height: 24px !important;
}
.ns1-red {
diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
index 9009c7a39..8c1c67e64 100644
--- a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
+++ b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
@@ -265,7 +265,7 @@ export class AgentGroupListComponent
}
onOpenDeleteSelected() {
const selected = this.selected;
- const elementName = "Agent Groups"
+ const elementName = 'Agent Groups';
this.dialogService
.open(DeleteSelectedComponent, {
context: { selected, elementName },
@@ -284,7 +284,7 @@ export class AgentGroupListComponent
deleteSelectedAgentGroups() {
this.selected.forEach((group) => {
this.agentGroupsService.deleteAgentGroup(group.id).subscribe();
- })
+ });
this.notificationsService.success('All selected Groups delete requests succeeded', '');
}
openDetailsModal(row: any) {
@@ -308,15 +308,10 @@ export class AgentGroupListComponent
closeOnEsc: true,
});
}
- public onCheckboxChange(event: any, row: any): void {
- let selectedGroup = {
- id: row.id,
- name: row.name,
- }
+ public onCheckboxChange(event: any, row: any): void {
if (this.getChecked(row) === false) {
- this.selected.push(selectedGroup);
- }
- else {
+ this.selected.push(row);
+ } else {
for (let i = 0; i < this.selected.length; i++) {
if (this.selected[i].id === row.id) {
this.selected.splice(i, 1);
@@ -336,11 +331,7 @@ export class AgentGroupListComponent
this.groupsSubscription = this.filteredGroups$.subscribe(rows => {
this.selected = [];
rows.forEach(row => {
- const policySelected = {
- id: row.id,
- name: row.name,
- }
- this.selected.push(policySelected);
+ this.selected.push(row);
});
});
} else {
diff --git a/ui/src/app/pages/pages-menu.ts b/ui/src/app/pages/pages-menu.ts
index be3ab77b0..ca4f376f5 100644
--- a/ui/src/app/pages/pages-menu.ts
+++ b/ui/src/app/pages/pages-menu.ts
@@ -52,5 +52,5 @@ export const MENU_ITEMS = [
export function updateMenuItems(pageName: string) {
MENU_ITEMS.forEach(item => {
item.selected = item.title === pageName;
- })
+ });
}
diff --git a/ui/src/app/pages/profile/profile.component.scss b/ui/src/app/pages/profile/profile.component.scss
index 3e435b593..7112e9ff1 100644
--- a/ui/src/app/pages/profile/profile.component.scss
+++ b/ui/src/app/pages/profile/profile.component.scss
@@ -1,5 +1,6 @@
button {
float: right;
+ font-family: 'Montserrat';
}
.card-row {
@@ -58,58 +59,58 @@ h4 {
}
}
.header-subtitle {
- color: #969FB9;
+ color: #969fb9;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
- font-weight: 400;
+ font-weight: 400;
margin: 0;
}
.account-information-card {
width: 500px !important;
height: fit-content;
}
-.circle {
+.circle {
width: 42px;
- height: 42px;
- border-radius: 50%;
+ height: 42px;
+ border-radius: 50%;
}
-.info-container {
+.info-container {
display: flex;
- align-items: center;
+ align-items: center;
position: relative;
}
.user-name-title {
- color: var(--Lilac-gray, #969FB9);
+ color: var(--Lilac-gray, #969fb9);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px;
- letter-spacing: -0.5px;
+ letter-spacing: -0.5px;
margin-bottom: 5px;
}
.user-name {
- color: var(--White, #FFF);
+ color: var(--White, #fff);
font-size: 14px;
font-weight: 500;
line-height: 18px;
- letter-spacing: -0.5px;
+ letter-spacing: -0.5px;
}
.edit-button {
- color: #3089FC;
+ color: #3089fc;
background-color: transparent;
border: none;
outline: none;
font-size: 14px;
font-style: normal;
- font-weight: 600;
+ font-weight: 600;
transition: background-color 0.3s ease !important;
transition: color 0.3s ease !important;
border-radius: 16px;
padding: 5px 10px;
}
.edit-button:disabled {
- color: #969FB9
+ color: #969fb9;
}
.edit-button-work {
@extend .edit-button;
@@ -135,19 +136,18 @@ nb-card {
border-radius: 8px !important;
color: #969fb9 !important;
padding: 0.5rem 1rem !important;
- font-weight: 600 !important;
- font-size: 15px !important;
-
+ font-weight: 600 !important;
+ font-size: 15px !important;
}
nb-card-body {
margin: 0 !important;
- background-color: #2B3148 !important;
+ background-color: #2b3148 !important;
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
}
label {
- color: #969FB9;
+ color: #969fb9;
}
.float-right {
float: right;
@@ -157,7 +157,7 @@ input {
}
.input-password {
margin-bottom: 20px;
- background-color: #313E5D !important;
+ background-color: #313e5d !important;
border: none;
border-radius: 2px;
}
diff --git a/ui/src/app/pages/profile/profile.component.ts b/ui/src/app/pages/profile/profile.component.ts
index b69e0e366..0516ea4a5 100644
--- a/ui/src/app/pages/profile/profile.component.ts
+++ b/ui/src/app/pages/profile/profile.component.ts
@@ -31,14 +31,14 @@ export class ProfileComponent implements OnInit {
showPassword2 = false;
showPassword3 = false;
- availableTimers = [15, 30, 60]
+ availableTimers = [15, 30, 60];
selectedTimer: Number;
editMode = {
work: false,
profileName: false,
password: false,
- }
+ };
isPasswordValidSize: boolean;
isPasswordValidMatch: boolean;
@@ -49,13 +49,13 @@ export class ProfileComponent implements OnInit {
private usersService: UsersService,
private notificationsService: NotificationsService,
private orb: OrbService,
- ) {
+ ) {
this.oldPasswordInput = '';
this.newPasswordInput = '';
this.confirmPasswordInput = '';
this.selectedTimer = this.getPollInterval();
}
-
+
ngOnInit(): void {
this.retrieveUserInfo();
}
@@ -86,7 +86,7 @@ export class ProfileComponent implements OnInit {
company: company,
},
};
-
+
this.usersService.editUser(userReq).subscribe(
resp => {
this.notificationsService.success('User successfully edited', '');
@@ -96,10 +96,10 @@ export class ProfileComponent implements OnInit {
},
error => {
this.isRequesting = false;
- }
+ },
);
}
-
+
canChangePassword(): boolean {
this.isPasswordValidSize = this.newPasswordInput.length >= this.ngxAdminMinPasswordSize;
this.isPasswordValidMatch = this.newPasswordInput === this.confirmPasswordInput;
@@ -125,7 +125,7 @@ export class ProfileComponent implements OnInit {
},
error => {
this.isRequesting = false;
- }
+ },
);
}
toggleEdit(name: string) {
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..3150d3241 100644
--- a/ui/src/app/pages/sinks/add/sink-add.component.html
+++ b/ui/src/app/pages/sinks/add/sink-add.component.html
@@ -41,8 +41,8 @@
{{ strings.sink.add.header }}
>
-
diff --git a/ui/src/app/pages/sinks/add/sink-add.component.scss b/ui/src/app/pages/sinks/add/sink-add.component.scss
index d988b3e98..74ba37b65 100644
--- a/ui/src/app/pages/sinks/add/sink-add.component.scss
+++ b/ui/src/app/pages/sinks/add/sink-add.component.scss
@@ -3,7 +3,7 @@ button {
margin: 0 3px;
float: left;
color: #fff !important;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
font-weight: 500;
text-transform: none !important;
}
@@ -18,7 +18,7 @@ button {
}
.sink-cancel {
- background-color: #3089fc !important;
+ background-color: #3089fc !important;
}
@@ -64,4 +64,4 @@ button {
}
}
}
-
\ No newline at end of file
+
diff --git a/ui/src/app/pages/sinks/add/sink-add.component.ts b/ui/src/app/pages/sinks/add/sink-add.component.ts
index 82c088f50..66acb9f44 100644
--- a/ui/src/app/pages/sinks/add/sink-add.component.ts
+++ b/ui/src/app/pages/sinks/add/sink-add.component.ts
@@ -27,8 +27,10 @@ export class SinkAddComponent {
sinkBackend: any;
- isRequesting: boolean;
-
+ isRequesting: boolean;
+
+ errorConfigMessage: string;
+
constructor(
private sinksService: SinksService,
private notificationsService: NotificationsService,
@@ -37,25 +39,31 @@ export class SinkAddComponent {
) {
this.createMode = true;
this.isRequesting = false;
+ this.errorConfigMessage = '';
}
canCreate() {
const detailsValid = this.createMode
? this.detailsComponent?.formGroup?.status === 'VALID'
: true;
-
+
const configSink = this.configComponent?.code;
let config;
-
+
if (this.editor.isJson(configSink)) {
config = JSON.parse(configSink);
} else if (this.editor.isYaml(configSink)) {
config = YAML.parse(configSink);
+ this.errorConfigMessage = '';
} else {
+ this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors';
return false;
}
-
- return !this.editor.checkEmpty(config.authentication) && !this.editor.checkEmpty(config.exporter) && detailsValid && !this.checkString(config);
+
+ return !this.editor.checkEmpty(config.authentication)
+ && !this.editor.checkEmpty(config.exporter)
+ && detailsValid
+ && !this.checkString(config);
}
checkString(config: any): boolean {
if (typeof config.authentication.password !== 'string' || typeof config.authentication.username !== 'string') {
@@ -71,7 +79,7 @@ export class SinkAddComponent {
const configSink = this.configComponent.code;
const details = { ...sinkDetails };
-
+
let payload = {};
const config = YAML.parse(configSink);
diff --git a/ui/src/app/pages/sinks/delete/sink.delete.component.scss b/ui/src/app/pages/sinks/delete/sink.delete.component.scss
index 8ac634efb..003444e84 100644
--- a/ui/src/app/pages/sinks/delete/sink.delete.component.scss
+++ b/ui/src/app/pages/sinks/delete/sink.delete.component.scss
@@ -1,5 +1,6 @@
nb-card {
max-width: 38rem !important;
+ padding: 0 !important;
nb-card-header {
background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
p {
color: #969fb9 !important;
+ margin-bottom: 1rem !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ line-height: 24px !important;
}
.ns1-red {
diff --git a/ui/src/app/pages/sinks/details/sink.details.component.html b/ui/src/app/pages/sinks/details/sink.details.component.html
index b545e8b33..d8463242d 100644
--- a/ui/src/app/pages/sinks/details/sink.details.component.html
+++ b/ui/src/app/pages/sinks/details/sink.details.component.html
@@ -18,7 +18,7 @@
{{strings.propNames.description}}
{{ sink.description }}
-
No Description Added
+
No Description Added
diff --git a/ui/src/app/pages/sinks/details/sink.details.component.ts b/ui/src/app/pages/sinks/details/sink.details.component.ts
index 28c66ed29..272a4d159 100644
--- a/ui/src/app/pages/sinks/details/sink.details.component.ts
+++ b/ui/src/app/pages/sinks/details/sink.details.component.ts
@@ -27,7 +27,7 @@ export class SinkDetailsComponent implements OnInit {
protected router: Router,
) {
!this.sink.tags ? this.sink.tags = {} : null;
- this.exporterField = "";
+ this.exporterField = '';
}
onOpenEdit(sink: any) {
@@ -45,6 +45,6 @@ export class SinkDetailsComponent implements OnInit {
}
ngOnInit() {
const exporter = this.sink.config.exporter;
- this.exporterField = exporter.remote_host !== undefined ? "Remote Host URL" : "Endpoint URL";
+ this.exporterField = exporter.remote_host !== undefined ? 'Remote Host URL' : 'Endpoint URL';
}
}
diff --git a/ui/src/app/pages/sinks/list/sink.list.component.scss b/ui/src/app/pages/sinks/list/sink.list.component.scss
index 25a0c8de2..171421572 100644
--- a/ui/src/app/pages/sinks/list/sink.list.component.scss
+++ b/ui/src/app/pages/sinks/list/sink.list.component.scss
@@ -149,7 +149,16 @@ tr div p {
color: #df316f;
}
&idle {
- color: #f2994a;
+ color: #f2994a;
+ }
+ &provisioning {
+ color: #3089fc;
+ }
+ &provioning_error {
+ color: #df316f;
+ }
+ &warning {
+ color: #f2c94c;
}
}
diff --git a/ui/src/app/pages/sinks/list/sink.list.component.ts b/ui/src/app/pages/sinks/list/sink.list.component.ts
index 2d122f679..cb18d5225 100644
--- a/ui/src/app/pages/sinks/list/sink.list.component.ts
+++ b/ui/src/app/pages/sinks/list/sink.list.component.ts
@@ -271,7 +271,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
}
onOpenDeleteSelected() {
const selected = this.selected;
- const elementName = "Sinks"
+ const elementName = 'Sinks';
this.dialogService
.open(DeleteSelectedComponent, {
context: { selected, elementName },
@@ -290,7 +290,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
deleteSelectedSinks() {
this.selected.forEach((sink) => {
this.sinkService.deleteSink(sink.id).subscribe();
- })
+ });
this.notificationsService.success('All selected Sinks delete requests succeeded', '');
}
openDetailsModal(row: any) {
@@ -309,16 +309,15 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
filterByInactive = (sink) => sink.state === 'inactive';
- public onCheckboxChange(event: any, row: any): void {
+ public onCheckboxChange(event: any, row: any): void {
const sinkSelected = {
id: row.id,
name: row.name,
state: row.state,
- }
+ };
if (this.getChecked(row) === false) {
this.selected.push(sinkSelected);
- }
- else {
+ } else {
for (let i = 0; i < this.selected.length; i++) {
if (this.selected[i].id === row.id) {
this.selected.splice(i, 1);
@@ -341,7 +340,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
id: row.id,
name: row.name,
state: row.state,
- }
+ };
this.selected.push(sinkSelected);
});
});
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 51b3822f5..5a43fa250 100644
--- a/ui/src/app/pages/sinks/view/sink.view.component.html
+++ b/ui/src/app/pages/sinks/view/sink.view.component.html
@@ -12,53 +12,51 @@
{{ strings.sink.view.header }}
-
-
-
-
-
-
-
-
-
-
-
- {{ sink?.state | ngxCapitalize }}
-
+
+
+
+
+
-
-
- Created on {{ sink?.ts_created | date: 'M/d/yy, HH:mm z' }}
-
+
+
+
+
+ {{ sink?.state | ngxCapitalize }}
+
+
+
+
+ Created on {{ sink?.ts_created | date: 'M/d/yy, HH:mm z' }}
+
+
-
@@ -70,8 +68,8 @@
{{ strings.sink.view.header }}
-
diff --git a/ui/src/app/pages/sinks/view/sink.view.component.scss b/ui/src/app/pages/sinks/view/sink.view.component.scss
index c4a64214a..6074d883e 100644
--- a/ui/src/app/pages/sinks/view/sink.view.component.scss
+++ b/ui/src/app/pages/sinks/view/sink.view.component.scss
@@ -3,7 +3,7 @@ button {
&.policy-duplicate {
color: #fff !important;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: none !important;
@@ -18,7 +18,7 @@ button {
&.policy-save {
color: #fff !important;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: none !important;
@@ -33,7 +33,7 @@ button {
&.policy-discard {
color: #fff !important;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: none !important;
@@ -96,12 +96,15 @@ h4 {
}
}
}
-.fa.fa-circle {
- font-size: 11px;
+.state-circle {
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
}
.state {
- font-size: 16px;
+ font-size: 15px;
font-weight: 700;
+ font-family: 'Montserrat';
}
.orb-service- {
&active {
@@ -114,7 +117,16 @@ h4 {
color: #df316f;
}
&idle {
- color: #f2994a;
+ color: #f2994a;
+ }
+ &provisioning {
+ color: #3089fc;
+ }
+ &provioning_error {
+ color: #df316f;
+ }
+ &warning {
+ color: #f2c94c;
}
}
@@ -122,4 +134,13 @@ h4 {
color: #969fb9;
font-size: 14px;
}
+.state-div {
+ margin-bottom: 23px;
+}
+.date {
+ font-size: 14px;
+ font-weight: 400;
+ margin-top: 23px;
+ line-height: 1.25rem;
+}
diff --git a/ui/src/app/pages/sinks/view/sink.view.component.spec.ts b/ui/src/app/pages/sinks/view/sink.view.component.spec.ts
index b1b7437e0..e4c6bad9e 100644
--- a/ui/src/app/pages/sinks/view/sink.view.component.spec.ts
+++ b/ui/src/app/pages/sinks/view/sink.view.component.spec.ts
@@ -8,7 +8,7 @@ describe('SinkViewComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ SinkViewComponent ]
+ declarations: [ SinkViewComponent ],
})
.compileComponents();
}));
diff --git a/ui/src/app/pages/sinks/view/sink.view.component.ts b/ui/src/app/pages/sinks/view/sink.view.component.ts
index 490876744..ab8678fe3 100644
--- a/ui/src/app/pages/sinks/view/sink.view.component.ts
+++ b/ui/src/app/pages/sinks/view/sink.view.component.ts
@@ -17,11 +17,11 @@ import { OrbService } from 'app/common/services/orb.service';
@Component({
selector: 'ngx-sink-view',
templateUrl: './sink.view.component.html',
- styleUrls: ['./sink.view.component.scss']
+ styleUrls: ['./sink.view.component.scss'],
})
export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
strings = STRINGS;
-
+
isLoading = false;
sink: Sink;
@@ -33,14 +33,16 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
lastUpdate: Date | null = null;
sinkStates = SinkStates;
-
+
editMode = {
details: false,
config: false,
- }
+ };
isRequesting: boolean;
+ errorConfigMessage: string;
+
@ViewChild(SinkDetailsComponent) detailsComponent: SinkDetailsComponent;
@ViewChild(SinkConfigComponent)
@@ -54,8 +56,9 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
private dialogService: NbDialogService,
private router: Router,
private orb: OrbService,
- ) {
+ ) {
this.isRequesting = false;
+ this.errorConfigMessage = '';
}
ngOnInit(): void {
@@ -74,10 +77,14 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
}
isEditMode() {
- return Object.values(this.editMode).reduce(
+ const resp = Object.values(this.editMode).reduce(
(prev, cur) => prev || cur,
false,
);
+ if (!resp) {
+ this.errorConfigMessage = '';
+ }
+ return resp;
}
canSave() {
@@ -93,7 +100,9 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
config = JSON.parse(configSink);
} else if (this.editor.isYaml(configSink)) {
config = YAML.parse(configSink);
+ this.errorConfigMessage = '';
} else {
+ this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors';
return false;
}
@@ -121,19 +130,24 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
const sinkDetails = this.detailsComponent.formGroup?.value;
const tags = this.detailsComponent.selectedTags;
const configSink = this.configComponent.code;
-
+
const details = { ...sinkDetails, tags };
-
- let payload = { id, backend, config: {}};
-
+
try {
- const config = YAML.parse(configSink);
- payload.config = config;
-
- if (this.editMode.details) {
- payload = { ...payload, ...details };
+ let payload: any;
+ if (this.editMode.config && !this.editMode.details) {
+ payload = { id, backend, config: {}};
+ const config = YAML.parse(configSink);
+ payload.config = config;
+ }
+ if (this.editMode.details && !this.editMode.config) {
+ payload = { id, backend, ...details };
+ }
+ if (this.editMode.details && this.editMode.config) {
+ payload = { id, backend, ...details, config: {}};
+ const config = YAML.parse(configSink);
+ payload.config = config;
}
-
this.sinks.editSink(payload as Sink).subscribe(
(resp) => {
this.discard();
@@ -156,7 +170,7 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
this.isLoading = false;
this.cdr.markForCheck();
this.lastUpdate = new Date();
- })
+ });
}
ngOnDestroy(): void {
@@ -187,8 +201,8 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
hasChanges() {
const sinkDetails = this.detailsComponent.formGroup?.value;
const tags = this.detailsComponent.selectedTags;
- let selectedTags = JSON.stringify(tags);
- let orb_tags = this.sink.tags ? JSON.stringify(this.sink.tags) : "{}";
+ const selectedTags = JSON.stringify(tags);
+ const orb_tags = this.sink.tags ? JSON.stringify(this.sink.tags) : '{}';
if (sinkDetails.name !== this.sink.name || sinkDetails?.description !== this.sink?.description || selectedTags !== orb_tags) {
return true;
diff --git a/ui/src/app/shared/components/delete/delete.selected.component.html b/ui/src/app/shared/components/delete/delete.selected.component.html
index a068e1781..01db8514b 100644
--- a/ui/src/app/shared/components/delete/delete.selected.component.html
+++ b/ui/src/app/shared/components/delete/delete.selected.component.html
@@ -11,19 +11,34 @@
Are you sure you want to delete a total of {{ selected?.length }} {{ elementName }}? This action cannot be undone.
-
- {{ item.name }}
{{ item.state | titlecase }} {{ item.usage | titlecase }}
+
+
+
+ {{ item.name }}
+
+
+ {{ item.state | titlecase }}
+ {{ item.usage | titlecase }}
+
+
+
+
+
+
*To confirm, type the amount of {{ elementName }} to be delete.
+
+
+ {{selected?.length}}
+
-
*To confirm, type the amount of {{ elementName }} to be delete.
-
-
- {{selected?.length}}
-