Create Worker Diagram for egress and ingress filters (#1584)

* feat: 🎸 create Worker Diagram for OSS

✅ Closes: ICU-7579

* refactor: 💡 change ordered series icon to have white background

* feat: 🎸 Create Worker Diagram for egress and ingress filters

✅ Closes: ICU-7592

* refactor: 💡 remove wrapping divs and update data-test attrs

* refactor: 💡 revert HDS icon background color change

* refactor: 💡 make data-test attr more verbose

ui/admin/app/components/worker-diagram/dual-filter/index.hbs

@@ -0,0 +1,67 @@
+<div data-test-dual-filters>
+  {{#if (and @egressFilter @ingressFilter)}}
+    <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-on as |D|>
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.ingress-worker'}}
+      </D.Item>
+      <D.Group
+        @title={{t 'resources.target.workers.diagram.network'}}
+        @color='highlight'
+      >
+        <D.Item @icon='settings'>
+          {{t 'resources.target.workers.diagram.egress-worker'}}
+        </D.Item>
+        <D.Item @icon='server'>
+          {{t 'resources.target.workers.diagram.host'}}
+        </D.Item>
+      </D.Group>
+    </OrderedSeriesDiagram>
+  {{else if @ingressFilter}}
+    <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-on as |D|>
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.ingress-worker'}}
+      </D.Item>
+      <D.Item @icon='server'>
+        {{t 'resources.target.workers.diagram.host'}}
+      </D.Item>
+    </OrderedSeriesDiagram>
+  {{else if @egressFilter}}
+    <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|>
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.front-line-worker'}}
+      </D.Item>
+      <D.Group
+        @title={{t 'resources.target.workers.diagram.network'}}
+        @color='highlight'
+      >
+        <D.Item @icon='settings'>
+          {{t 'resources.target.workers.diagram.egress-worker'}}
+        </D.Item>
+        <D.Item @icon='server'>
+          {{t 'resources.target.workers.diagram.host'}}
+        </D.Item>
+      </D.Group>
+    </OrderedSeriesDiagram>
+  {{else}}
+    <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|>
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.any-worker'}}
+      </D.Item>
+      <D.Item @icon='server'>
+        {{t 'resources.target.workers.diagram.host'}}
+      </D.Item>
+    </OrderedSeriesDiagram>
+  {{/if}}
+</div>

ui/admin/app/components/worker-diagram/index.hbs

@@ -1 +1,6 @@
-{{yield (hash SingleFilter=(component 'worker-diagram/single-filter'))}}
+{{yield
+  (hash
+    SingleFilter=(component 'worker-diagram/single-filter')
+    DualFilter=(component 'worker-diagram/dual-filter')
+  )
+}}