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

refactor: 💡 rename div around ordered-series-diagram (#1633)

Browse Source 
* refactor: 💡 rename div around ordered-series-diagram

* refactor: 💡 remove margin top and add to min-height

* refactor: 💡 simplify diagrams

---------

Co-authored-by: Randall Morey <randall@randallmorey.com>
This commit is contained in:
Cameron PereraandRandall Morey authored and GitHub committed 2023-02-14 15:32:19 -06:00
1 parent e1432c2750
commit 2d1ed7b8bd
6 files changed
+82 -88
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/admin/app/components/ordered-series-diagram/index.hbs
+8 -10
View File
@@ -1,10 +1,8 @@
<div class='worker-wrapper'> <ol class='ordered-series-diagram' ...attributes>
<ol ...attributes class='ordered-series-diagram'> {{yield
{{yield (hash
(hash Item=(component 'ordered-series-diagram/item')
Item=(component 'ordered-series-diagram/item') Group=(component 'ordered-series-diagram/group')
Group=(component 'ordered-series-diagram/group') )
) }}
}} </ol>
</ol>
</div>
ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs
+20 -22
View File
@@ -18,13 +18,11 @@
</D.Item> </D.Item>
</D.Group> </D.Group>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t >
'resources.target.workers.filter-explainer.dual-egress-on-ingress-on' {{t 'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'}}
}} </p>
</Hds::Form::HelperText>
</div>
{{else if @ingressWorkerFilterEnabled}} {{else if @ingressWorkerFilterEnabled}}
<OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-on as |D|> <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-on as |D|>
<D.Item @icon='user'> <D.Item @icon='user'>
@@ -37,11 +35,11 @@
{{t 'resources.target.workers.diagram.host'}} {{t 'resources.target.workers.diagram.host'}}
</D.Item> </D.Item>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.ingress-worker'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
</div> </p>
{{else if @egressWorkerFilterEnabled}} {{else if @egressWorkerFilterEnabled}}
<OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-off as |D|> <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-off as |D|>
<D.Item @icon='user'> <D.Item @icon='user'>
@@ -66,11 +64,11 @@
</D.Item> </D.Item>
</D.Group> </D.Group>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}}
</div> </p>
{{else}} {{else}}
<OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-off as |D|> <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-off as |D|>
<D.Item @icon='user'> <D.Item @icon='user'>
@@ -83,9 +81,9 @@
{{t 'resources.target.workers.diagram.host'}} {{t 'resources.target.workers.diagram.host'}}
</D.Item> </D.Item>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.hcp-worker'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.hcp-worker'}}
</div> </p>
{{/if}} {{/if}}
ui/admin/app/components/worker-diagram/dual-filter/index.hbs
+20 -22
View File
@@ -18,13 +18,11 @@
</D.Item> </D.Item>
</D.Group> </D.Group>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t >
'resources.target.workers.filter-explainer.dual-egress-on-ingress-on' {{t 'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'}}
}} </p>
</Hds::Form::HelperText>
</div>
{{else if @ingressWorkerFilterEnabled}} {{else if @ingressWorkerFilterEnabled}}
<OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-on as |D|> <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-on as |D|>
<D.Item @icon='user'> <D.Item @icon='user'>
@@ -37,11 +35,11 @@
{{t 'resources.target.workers.diagram.host'}} {{t 'resources.target.workers.diagram.host'}}
</D.Item> </D.Item>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.ingress-worker'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
</div> </p>
{{else if @egressWorkerFilterEnabled}} {{else if @egressWorkerFilterEnabled}}
<OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|> <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|>
<D.Item @icon='user'> <D.Item @icon='user'>
@@ -62,11 +60,11 @@
</D.Item> </D.Item>
</D.Group> </D.Group>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.dual-egress-on'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.dual-egress-on'}}
</div> </p>
{{else}} {{else}}
<OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|> <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|>
<D.Item @icon='user'> <D.Item @icon='user'>
@@ -79,9 +77,9 @@
{{t 'resources.target.workers.diagram.host'}} {{t 'resources.target.workers.diagram.host'}}
</D.Item> </D.Item>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.any-worker'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.any-worker'}}
</div> </p>
{{/if}} {{/if}}
ui/admin/app/components/worker-diagram/index.hbs
+15 -13
View File
@@ -1,17 +1,19 @@
{{#if (feature-flag 'target-worker-filters-v2-ingress')}} <div class='worker-diagram'>
{{#if (feature-flag 'target-worker-filters-v2-hcp')}} {{#if (feature-flag 'target-worker-filters-v2-ingress')}}
<WorkerDiagram::DualFilter::Hcp {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
@egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}} <WorkerDiagram::DualFilter::Hcp
@ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}} @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
/> @ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
/>
{{else}}
<WorkerDiagram::DualFilter
@egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
@ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
/>
{{/if}}
{{else}} {{else}}
<WorkerDiagram::DualFilter <WorkerDiagram::SingleFilter
@egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}} @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
@ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
/> />
{{/if}} {{/if}}
{{else}} </div>
<WorkerDiagram::SingleFilter
@egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
/>
{{/if}}
ui/admin/app/components/worker-diagram/single-filter/index.hbs
+10 -10
View File
@@ -15,11 +15,11 @@
</D.Item> </D.Item>
</D.Group> </D.Group>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.egress-worker'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.egress-worker'}}
</div> </p>
{{else}} {{else}}
<OrderedSeriesDiagram data-test-single-filter-egress-off as |D|> <OrderedSeriesDiagram data-test-single-filter-egress-off as |D|>
<D.Item @icon='user'> <D.Item @icon='user'>
@@ -32,9 +32,9 @@
{{t 'resources.target.workers.diagram.host'}} {{t 'resources.target.workers.diagram.host'}}
</D.Item> </D.Item>
</OrderedSeriesDiagram> </OrderedSeriesDiagram>
<div class='worker-diagram-explainer'> <p
<Hds::Form::HelperText> class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
{{t 'resources.target.workers.filter-explainer.any-worker'}} >
</Hds::Form::HelperText> {{t 'resources.target.workers.filter-explainer.any-worker'}}
</div> </p>
{{/if}} {{/if}}
ui/admin/app/styles/app.scss
+9 -11
View File
@@ -559,8 +559,6 @@
} }
&-group { &-group {
display: flex;
&-content { &-content {
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0 0.75rem 0.75rem; padding: 0 0.75rem 0.75rem;
@@ -600,6 +598,10 @@
.hds-form-legend { .hds-form-legend {
font-size: sizing.rems(l) - sizing.rems(xxs); // 20 font-size: sizing.rems(l) - sizing.rems(xxs); // 20
+ .hds-form-helper-text {
margin-bottom: 1rem;
}
} }
.hds-alert { .hds-alert {
@@ -626,16 +628,12 @@
} }
} }
.worker-diagram-explainer { .worker-diagram {
min-height: 4rem; // 1 min-height: 15rem;
}
.worker-wrapper { .ordered-series-diagram {
display: flex; min-height: 10rem;
align-items: center; }
min-height: 11rem;
margin-top: sizing.rems(xs) - sizing.rems(xxxxs); // 10
width: 100%;
} }
} }