CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Icu 7301 UI target oss workflow (#1589)

Browse Source 
Icu 7301 UI target OSS workflow (#1589)
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2023-01-23 14:28:37 -08:00
1 parent da59684f25
commit b41b6ee3e3
8 files changed
+172 -100
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/admin/app/components/form/target/details/index.hbs
+107 -67
View File
@@ -1,6 +1,6 @@
<Rose::Form
@onSubmit={{@submit}}
@cancel={{@cancel}}
@cancel={{this.cancel}}
@disabled={{@model.isSaving}}
@showEditToggle={{if @model.isNew false true}}
as |form|
@@ -67,7 +67,6 @@
</G.RadioCard>
{{/each}}
</Hds::Form::RadioCard::Group>
{{else}}
<InfoField
@value={{t (concat 'resources.target.types.' @model.type)}}
@@ -181,80 +180,121 @@
class='target-workers'
@layout='horizontal'
@isRequired={{false}}
@isOptional={{true}}
as |F|
>
<F.Legend>{{t 'resources.target.workers.title'}}</F.Legend>
<F.HelperText>{{t 'resources.target.workers.description'}}</F.HelperText>
{{#unless this.migrateWorkerFilter}}
{{#if this.showDeprecationMessage}}
{{#if this.showDeprecationMessage}}
<F.Control>
<Hds::Alert @color='highlight' @type='inline' as |A|>
<A.Title>{{t
'resources.target.workers.deprecation_message.title'
}}</A.Title>
<A.Description>{{t
'resources.target.workers.deprecation_message.description'
}}</A.Description>
</Hds::Alert>
</F.Control>
<F.Control>
<Hds::Form::TextInput::Field
@value={{@model.worker_filter}}
@isInvalid={{@model.errors.worker_filter}}
@type='text'
name='worker_filter'
disabled={{true}}
{{on 'input' (set-from-event @model 'worker_filter')}}
as |F|
>
<F.Label>{{t 'form.worker_filter.label'}}</F.Label>
<F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
</Hds::Form::TextInput::Field>
</F.Control>
{{/if}}
{{#if form.isEditable}}
{{#if this.showUpdateWorkerFilterButton}}
<F.Control>
<Hds::Alert @color='highlight' @type='inline' as |A|>
<A.Title>{{t
'resources.target.workers.deprecation_message.title'
}}</A.Title>
<A.Description>{{t
'resources.target.workers.deprecation_message.description'
}}</A.Description>
</Hds::Alert>
</F.Control>
<F.Control>
<Hds::Form::TextInput::Field
@isRequired={{false}}
@isOptional={{true}}
@value={{@model.worker_filter}}
@isInvalid={{@model.errors.worker_filter}}
@type='text'
name='worker_filter'
disabled={{true}}
{{on 'input' (set-from-event @model 'worker_filter')}}
as |F|
>
<F.Label>{{t 'form.worker_filter.label'}}</F.Label>
<F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
</Hds::Form::TextInput::Field>
<Hds::Button
class='update-filter-button'
@text={{t
'resources.target.workers.egress_worker_filter.filter.update_filter'
}}
@color='secondary'
disabled={{form.disabled}}
{{on 'click' this.migrateWorkerFilters}}
/>
</F.Control>
{{/if}}
{{/unless}}
{{/if}}
{{#if this.showEgressFilter}}
<F.Control>
<WorkerDiagram::SingleFilter
@egressFilter={{this.egressWorkerFilterEnabled}}
/>
</F.Control>
<F.Control>
<Form::Target::WorkerFilter
@name='egress_worker_filter'
@type='text'
@disabled={{form.disabled}}
@value={{@model.egress_worker_filter}}
@toggleAction={{this.toggleEgressWorkerFilter}}
@checked={{this.egressWorkerFilterEnabled}}
@toggleEnabled={{this.egressWorkerFilterEnabled}}
@errors={{@model.errors.egress_worker_filter}}
@onChange={{set-from-event @model 'egress_worker_filter'}}
@isInvalid={{@model.errors.egress_worker_filter}}
as |F|
>
{{#if @model.errors.egress_worker_filter}}
<F.Error as |E|>
{{#each @model.errors.egress_worker_filter as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</Form::Target::WorkerFilter>
</F.Control>
{{/if}}
{{#if @model.isNew}}
<F.Control>
<WorkerDiagram::SingleFilter
@egressFilter={{this.egressWorkerFilterEnabled}}
/>
</F.Control>
<F.Control>
<Form::Target::WorkerFilter
@name='egress_worker_filter'
@type='text'
@disabled={{form.disabled}}
@value={{@model.egress_worker_filter}}
@toggleAction={{this.toggleEgressWorkerFilter}}
@checked={{this.egressWorkerFilterEnabled}}
@toggleEnabled={{this.egressWorkerFilterEnabled}}
@errors={{@model.errors.egress_worker_filter}}
@onChange={{set-from-event @model 'egress_worker_filter'}}
@isInvalid={{@model.errors.egress_worker_filter}}
as |F|
>
{{#if @model.errors.egress_worker_filter}}
<F.Error as |E|>
{{#each @model.errors.egress_worker_filter as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</Form::Target::WorkerFilter>
</F.Control>
{{/if}}
</Hds::Form::Fieldset>
{{#if this.showUpdateWorkerFilterButton}}
{{#if form.isEditable}}
<Hds::Button
class='update-filter-button'
@text={{t
'resources.target.workers.egress_worker_filter.filter.update_filter'
}}
@color='secondary'
disabled={{form.disabled}}
{{on 'click' this.migrateWorkerFilters}}
/>
{{/if}}
{{else}}
<WorkerDiagram::SingleFilter
@egressFilter={{this.egressWorkerFilterEnabled}}
/>
<Form::Target::WorkerFilter
@name='egress_worker_filter'
@type='text'
@disabled={{form.disabled}}
@value={{@model.egress_worker_filter}}
@toggleAction={{this.toggleEgressWorkerFilter}}
@checked={{this.egressWorkerFilterEnabled}}
@toggleEnabled={{this.egressWorkerFilterEnabled}}
@errors={{@model.errors.egress_worker_filter}}
@onChange={{set-from-event @model 'egress_worker_filter'}}
@isInvalid={{@model.errors.egress_worker_filter}}
as |F|
>
{{#if @model.errors.egress_worker_filter}}
<F.Error as |E|>
{{#each @model.errors.egress_worker_filter as |error|}}
<E.Message>{{error.message}}</E.Message>
{{/each}}
</F.Error>
{{/if}}
</Form::Target::WorkerFilter>
{{/if}}
{{else}}
<Hds::Form::TextInput::Field
@isRequired={{false}}
ui/admin/app/components/form/target/details/index.js
+22 -9
View File
@@ -15,8 +15,6 @@ export default class FormTargetComponent extends Component {
@tracked egressWorkerFilterEnabled =
this.args.model.egress_worker_filter?.length;
@tracked migrateWorkerFilter = false;
// =properties
/**
* maps resource type with icon
@@ -51,25 +49,40 @@ export default class FormTargetComponent extends Component {
* @type {boolean}
*/
get showUpdateWorkerFilterButton() {
return (
!this.args.model.isNew &&
this.args.model.worker_filter &&
!this.migrateWorkerFilter
);
return this.args.model.worker_filter?.length;
}
get showEgressFilter() {
return !this.args.model.worker_filter?.length && !this.args.model.isNew;
}
//actions
@action
toggleEgressWorkerFilter() {
this.egressWorkerFilterEnabled = !this.egressWorkerFilterEnabled;
if (!this.egressWorkerFilterEnabled) {
this.args.model.egress_worker_filter = '';
}
}
// =actions
@action
migrateWorkerFilters() {
this.migrateWorkerFilter = true;
this.egressWorkerFilterEnabled = true;
// When update is clicked, copy worker filter value into egress filter.
// When update is clicked, copy worker filter value into egress filter and clear the worker_filter
this.args.model.egress_worker_filter = this.args.model.worker_filter;
this.args.model.worker_filter = '';
}
/**
* Call passed cancel function.
* Unset selected filters.
*/
@action
cancel() {
this.args.cancel();
// Reset the tracked variable for toggles after rollback
this.egressWorkerFilterEnabled =
this.args.model.egress_worker_filter?.length;
}
}
ui/admin/app/components/form/target/worker-filter/index.hbs
+7 -1
View File
@@ -1,8 +1,11 @@
<div class='target-worker-filter'>
<Hds::Form::Toggle::Field
name='target-worker-filter-toggle'
checked={{@checked}}
disabled={{@disabled}}
@isRequired={{false}}
@isOptional={{true}}
{{on 'change' @toggleAction}}
as |F|
>
@@ -14,10 +17,13 @@
{{#if @toggleEnabled}}
<Hds::Form::TextInput::Field
@isRequired={{false}}
@isOptional={{true}}
@value={{@value}}
disabled={{@disabled}}
@isInvalid={{@isInvalid}}
@type={{@type}}
name={{@name}}
disabled={{@disabled}}
{{on 'input' @onChange}}
as |F|
>
ui/admin/app/styles/app.scss
+19 -14
View File
@@ -493,20 +493,6 @@
}
}
// target worker filters
// note re Button margin: this is a temp solution,
// when we migrate buttons to HDS, we will analyze the spacing
// issue in all scenarios to come up with an efficient solution
.update-filter-button {
margin-bottom: 1.5rem;
}
.target-worker-filter {
.hds-form-field--layout-vertical {
margin-left: 2.5rem;
}
}
// json secret editor
.secret-editor {
// Secret Editor body and gutter colors are based on the Monokai color template
@@ -615,6 +601,7 @@
.ordered-series-diagram {
--group-title-line-height: 2.25rem;
width: 100%;
display: flex;
margin-bottom: 1rem;
@@ -677,8 +664,10 @@
}
}
// target worker filters
.target-workers {
margin-top: sizing.rems(xxl);
margin-bottom: sizing.rems(xxl) + sizing.rems(l);
.hds-form-legend {
font-size: sizing.rems(l) - sizing.rems(xxs); // 20
@@ -687,6 +676,22 @@
.hds-alert {
margin-bottom: sizing.rems(l);
}
// note re Button margin: this is a temp solution,
// when we migrate buttons to HDS, we will analyze the spacing
// issue in all scenarios to come up with an efficient solution
.target-worker-filter {
width: 100%;
.hds-form-field--layout-vertical {
margin-left: 2.5rem;
width: 50%;
}
.hds-form-field--layout-flag {
margin-bottom: 1rem;
}
}
}
.target-worker-filter-explainer {
ui/admin/tests/acceptance/targets/update-test.js
+6 -6
View File
@@ -66,7 +66,7 @@ module('Acceptance | targets | update', function (hooks) {
assert.notEqual(instances.target.worker_filter, 'random filter');
await click(`[href="${urls.target}"]`);
await click('form [type="button"]', 'Activate edit mode');
await click('.rose-form-actions [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
await fillIn('[name="worker_filter"]', 'random filter');
await click('.rose-form-actions [type="submit"]');
@@ -111,7 +111,7 @@ module('Acceptance | targets | update', function (hooks) {
await visit(urls.targets);
await click(`[href="${urls.target}"]`);
await click('form [type="button"]', 'Activate edit mode');
await click('.rose-form-actions [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
await click('.rose-form-actions [type="button"]');
@@ -143,7 +143,7 @@ module('Acceptance | targets | update', function (hooks) {
});
await click(`[href="${urls.target}"]`);
await click('form [type="button"]', 'Activate edit mode');
await click('.rose-form-actions [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
await click('[type="submit"]');
@@ -159,7 +159,7 @@ module('Acceptance | targets | update', function (hooks) {
await visit(urls.targets);
await click(`[href="${urls.target}"]`);
await click('form [type="button"]', 'Activate edit mode');
await click('.rose-form-actions [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
assert.strictEqual(currentURL(), urls.target);
await click(`[href="${urls.targets}"]`);
@@ -178,7 +178,7 @@ module('Acceptance | targets | update', function (hooks) {
await visit(urls.targets);
await click(`[href="${urls.target}"]`);
await click('form [type="button"]', 'Activate edit mode');
await click('.rose-form-actions [type="button"]', 'Activate edit mode');
await fillIn('[name="name"]', 'random string');
assert.strictEqual(currentURL(), urls.target);
await click(`[href="${urls.targets}"]`);
@@ -197,7 +197,7 @@ module('Acceptance | targets | update', function (hooks) {
await click(`[href="${urls.target}"]`);
assert.dom('form [type="button"]').doesNotExist();
assert.dom('.rose-form-actions [type="button"]').doesNotExist();
});
test('saving address with existing host sources brings up confirmation modal and removes host sources', async function (assert) {