-
-
-
-
-
-
-
-
+
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 6daef030f..19ed35e11 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,14 +6,6 @@ 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 21c2e83eb..04fffa9ef 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,8 +59,6 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
lastUpdate: Date | null = null;
- errorConfigMessage: string;
-
@ViewChild(PolicyDetailsComponent) detailsComponent: PolicyDetailsComponent;
@ViewChild(PolicyInterfaceComponent)
@@ -77,7 +75,6 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
private editor: CodeEditorService,
) {
this.isRequesting = false;
- this.errorConfigMessage = '';
}
ngOnInit() {
@@ -89,7 +86,8 @@ 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();
@@ -98,14 +96,10 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
isEditMode() {
- const resp = Object.values(this.editMode).reduce(
+ return Object.values(this.editMode).reduce(
(prev, cur) => prev || cur,
false,
);
- if (!resp) {
- this.errorConfigMessage = '';
- }
- return resp;
}
canSave() {
@@ -113,25 +107,13 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
? this.detailsComponent?.formGroup?.status === 'VALID'
: true;
- const config = this.interfaceComponent?.code;
+ let config = this.interfaceComponent?.code
let interfaceValid = false;
- 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';
- }
+ if (this.editor.isJson(config)) {
+ interfaceValid = true;
+ } else if (this.editor.isYaml(config)) {
+ interfaceValid = true;
}
return detailsValid && interfaceValid;
}
@@ -160,9 +142,6 @@ 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 = {
@@ -186,23 +165,22 @@ 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;
},
- (err) => {
+ (error) => {
this.isRequesting = false;
- },
- );
+ }
+ );
} catch (err) {
this.notifications.error(
'Failed to edit Agent Policy',
`Error: Invalid ${format.toUpperCase()}`,
);
- this.isRequesting = false;
}
}
@@ -229,21 +207,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() {
@@ -276,14 +254,14 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
}
hasChanges() {
- const policyDetails = this.detailsComponent.formGroup?.value;
+ let 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
- const selectedTags = JSON.stringify(tags);
- const orb_tags = JSON.stringify(this.policy.tags);
+ let selectedTags = JSON.stringify(tags);
+ let 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 27c89c7b0..e6bdcc01c 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 003444e84..8ac634efb 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,6 +1,5 @@
nb-card {
max-width: 38rem !important;
- padding: 0 !important;
nb-card-header {
background: #232940 !important;
@@ -13,10 +12,6 @@ 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 5acf7fd09..c87226b2e 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;
+ margin: 0 2rem 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 a8202f70d..5310006dd 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,7 +106,8 @@ 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 7a7e2b886..702b66eaf 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 !== AgentStates.new && agent?.agent_metadata?.orb_agent?.version) {
+ if (agent.state !== 'new') {
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 {
- const selectedAgent = {
+ public onCheckboxChange(event: any, row: any): void {
+ let 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 selected = this.selected;
+ const size = this.selected.length;
this.dialogService
.open(AgentResetComponent, {
- context: { selected },
+ context: { size },
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 11d10a645..21ffc5217 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,7 +8,6 @@ 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',
@@ -22,9 +21,6 @@ export class AgentMatchComponent implements OnInit, AfterViewInit {
@Input()
agentGroup: AgentGroup;
- @Input()
- agentGroupId: string;
-
@Input()
policy!: AgentPolicy;
@@ -68,7 +64,6 @@ export class AgentMatchComponent implements OnInit, AfterViewInit {
protected dialogRef: NbDialogRef
,
protected agentsService: AgentsService,
protected router: Router,
- protected groupsService: AgentGroupsService,
) {
this.specificPolicy = false;
}
@@ -132,40 +127,29 @@ 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 d2096fcdf..6a7488242 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,27 +11,17 @@
- 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.
+ Are you sure you want to reset a total of {{ size }} Agents?
+ *To confirm, type the amount of agents to be reset.
+ placeholder="{{size}}" [(ngModel)]="validationInput"
+ data-orb-qa-id="input#size">
- {{selected.length}}
+ {{size}}
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 8c53dbf85..4f28bb2d8 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,6 +1,5 @@
nb-card {
max-width: 38rem !important;
- padding: 0 !important;
nb-card-header {
background: #232940 !important;
@@ -13,10 +12,6 @@ nb-card {
p {
color: #969fb9 !important;
- margin-bottom: 1rem !important;
- font-weight: 500 !important;
- font-size: 14px !important;
- line-height: 24px !important;
}
.ns1-red {
@@ -53,40 +48,4 @@ nb-card {
}
.ns1red {
color: #df316f !important;
- }
- .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;
- }
+ }
\ No newline at end of file
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 9fea705bf..59ec7a923 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() selected: any[] = [];
+ @Input() size: Number;
validationInput: Number;
@@ -28,6 +28,6 @@ export class AgentResetComponent {
}
isEnabled(): boolean {
- return this.validationInput === this.selected.length;
+ return this.validationInput === this.size;
}
-}
+}
\ 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 59da9207e..041f6fb04 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,41 +4,36 @@
Agent View
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {{ agent?.state | ngxCapitalize }}
+
-
-
-
-
-
- {{ 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' }}
-
+
+
+ Last activity
+
+ today, at {{ agent?.ts_last_hb | date: 'HH:mm z' }}
-
- This Agent has been provisioned but never connected.
+
+ on {{ agent?.ts_last_hb | date: 'M/d/yy, HH:mm z' }}
-
+
+
+ This Agent has been provisioned but never connected.
+
@@ -47,42 +42,21 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
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 682b95a3d..15c572b3b 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,14 +21,10 @@ 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;
@@ -202,31 +198,18 @@ nb-card {
color: #969fb9;
font-size: 14px;
}
-
-.state-circle {
- width: 9px;
- height: 9px;
- border-radius: 50%;
+.state {
+ font-size: 15px;
+ font-weight: 700;
+}
+.fa.fa-circle {
+ font-size: 11px;
}
.offline-circle {
- width: 9px;
- height: 9px;
+ width: 10px;
+ height: 10px;
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 e0b62d7c6..ca6091fa6 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,9 +38,6 @@ 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 270143948..89db8a024 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 ab675c0a8..8ac634efb 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,10 +12,6 @@ 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 8c1c67e64..9009c7a39 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,10 +308,15 @@ export class AgentGroupListComponent
closeOnEsc: true,
});
}
- public onCheckboxChange(event: any, row: any): void {
+ public onCheckboxChange(event: any, row: any): void {
+ let selectedGroup = {
+ id: row.id,
+ name: row.name,
+ }
if (this.getChecked(row) === false) {
- this.selected.push(row);
- } else {
+ this.selected.push(selectedGroup);
+ }
+ else {
for (let i = 0; i < this.selected.length; i++) {
if (this.selected[i].id === row.id) {
this.selected.splice(i, 1);
@@ -331,7 +336,11 @@ export class AgentGroupListComponent
this.groupsSubscription = this.filteredGroups$.subscribe(rows => {
this.selected = [];
rows.forEach(row => {
- this.selected.push(row);
+ const policySelected = {
+ id: row.id,
+ name: row.name,
+ }
+ this.selected.push(policySelected);
});
});
} else {
diff --git a/ui/src/app/pages/pages-menu.ts b/ui/src/app/pages/pages-menu.ts
index ca4f376f5..be3ab77b0 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 7112e9ff1..3e435b593 100644
--- a/ui/src/app/pages/profile/profile.component.scss
+++ b/ui/src/app/pages/profile/profile.component.scss
@@ -1,6 +1,5 @@
button {
float: right;
- font-family: 'Montserrat';
}
.card-row {
@@ -59,58 +58,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;
@@ -136,18 +135,19 @@ 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 0516ea4a5..b69e0e366 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 3150d3241..8ce2016f7 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 74ba37b65..d988b3e98 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 66acb9f44..82c088f50 100644
--- a/ui/src/app/pages/sinks/add/sink-add.component.ts
+++ b/ui/src/app/pages/sinks/add/sink-add.component.ts
@@ -27,10 +27,8 @@ export class SinkAddComponent {
sinkBackend: any;
- isRequesting: boolean;
-
- errorConfigMessage: string;
-
+ isRequesting: boolean;
+
constructor(
private sinksService: SinksService,
private notificationsService: NotificationsService,
@@ -39,31 +37,25 @@ 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') {
@@ -79,7 +71,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 003444e84..8ac634efb 100644
--- a/ui/src/app/pages/sinks/delete/sink.delete.component.scss
+++ b/ui/src/app/pages/sinks/delete/sink.delete.component.scss
@@ -1,6 +1,5 @@
nb-card {
max-width: 38rem !important;
- padding: 0 !important;
nb-card-header {
background: #232940 !important;
@@ -13,10 +12,6 @@ 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 d8463242d..b545e8b33 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 272a4d159..28c66ed29 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 171421572..25a0c8de2 100644
--- a/ui/src/app/pages/sinks/list/sink.list.component.scss
+++ b/ui/src/app/pages/sinks/list/sink.list.component.scss
@@ -149,16 +149,7 @@ tr div p {
color: #df316f;
}
&idle {
- color: #f2994a;
- }
- &provisioning {
- color: #3089fc;
- }
- &provioning_error {
- color: #df316f;
- }
- &warning {
- color: #f2c94c;
+ color: #f2994a;
}
}
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 cb18d5225..2d122f679 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,15 +309,16 @@ 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);
@@ -340,7 +341,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 5a43fa250..51b3822f5 100644
--- a/ui/src/app/pages/sinks/view/sink.view.component.html
+++ b/ui/src/app/pages/sinks/view/sink.view.component.html
@@ -12,51 +12,53 @@
{{ strings.sink.view.header }}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {{ sink?.state | ngxCapitalize }}
+
-
-
-
-
- {{ sink?.state | ngxCapitalize }}
-
-
-
-
- Created on {{ sink?.ts_created | date: 'M/d/yy, HH:mm z' }}
-
-
+
+
+ Created on {{ sink?.ts_created | date: 'M/d/yy, HH:mm z' }}
+
+
@@ -68,8 +70,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 6074d883e..c4a64214a 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,15 +96,12 @@ h4 {
}
}
}
-.state-circle {
- width: 9px;
- height: 9px;
- border-radius: 50%;
+.fa.fa-circle {
+ font-size: 11px;
}
.state {
- font-size: 15px;
+ font-size: 16px;
font-weight: 700;
- font-family: 'Montserrat';
}
.orb-service- {
&active {
@@ -117,16 +114,7 @@ h4 {
color: #df316f;
}
&idle {
- color: #f2994a;
- }
- &provisioning {
- color: #3089fc;
- }
- &provioning_error {
- color: #df316f;
- }
- &warning {
- color: #f2c94c;
+ color: #f2994a;
}
}
@@ -134,13 +122,4 @@ 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 e4c6bad9e..b1b7437e0 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 ab8678fe3..490876744 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,16 +33,14 @@ 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)
@@ -56,9 +54,8 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
private dialogService: NbDialogService,
private router: Router,
private orb: OrbService,
- ) {
+ ) {
this.isRequesting = false;
- this.errorConfigMessage = '';
}
ngOnInit(): void {
@@ -77,14 +74,10 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
}
isEditMode() {
- const resp = Object.values(this.editMode).reduce(
+ return Object.values(this.editMode).reduce(
(prev, cur) => prev || cur,
false,
);
- if (!resp) {
- this.errorConfigMessage = '';
- }
- return resp;
}
canSave() {
@@ -100,9 +93,7 @@ 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;
}
@@ -130,24 +121,19 @@ 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 {
- 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;
+ const config = YAML.parse(configSink);
+ payload.config = config;
+
+ if (this.editMode.details) {
+ payload = { ...payload, ...details };
}
+
this.sinks.editSink(payload as Sink).subscribe(
(resp) => {
this.discard();
@@ -170,7 +156,7 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
this.isLoading = false;
this.cdr.markForCheck();
this.lastUpdate = new Date();
- });
+ })
}
ngOnDestroy(): void {
@@ -201,8 +187,8 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
hasChanges() {
const sinkDetails = this.detailsComponent.formGroup?.value;
const tags = this.detailsComponent.selectedTags;
- const selectedTags = JSON.stringify(tags);
- const orb_tags = this.sink.tags ? JSON.stringify(this.sink.tags) : '{}';
+ let selectedTags = JSON.stringify(tags);
+ let 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 01db8514b..a068e1781 100644
--- a/ui/src/app/shared/components/delete/delete.selected.component.html
+++ b/ui/src/app/shared/components/delete/delete.selected.component.html
@@ -11,34 +11,19 @@
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 }}
-
-
-
-
-
*To confirm, type the amount of {{ elementName }} to be delete.
-
-
- {{selected?.length}}
-
+
+ {{ item.name }} {{ item.state | titlecase }} {{ item.usage | titlecase }}
+
*To confirm, type the amount of {{ elementName }} to be delete.
+
+
+ {{selected?.length}}
+