- {{partition}}
+ {{if isManaging 'Manage Partition' partition}}
- {{#each (reject-by 'DeletedAt' @partitions) as |item|}}
+ {{#each menu.items as |item|}}
{{item.Name}}
{{/each}}
- {{#if (can 'manage partitions')}}
-
-
-
- Manage Partitions
-
-
- {{/if}}
diff --git a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
index e5b1021e37..3f910bbfa1 100644
--- a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
@@ -4,6 +4,7 @@
>
- {{#each (sort-by 'Name' @dcs) as |item|}}
+ {{#each menu.items as |item|}}
{{if disclosure.expanded 'Close' 'Open'}}
@@ -62,11 +60,53 @@ common usecase of having a floating menu.
```
+`DisclosureMenu` also supports virtually scrolling its menu items for when you have 1000s of items to display in the menu whilst avoiding DOM stuttering. The set up is a tinsy bit more involved. but eesnetially you provide the data items for the menu using the `@items` argument, and then you can loop through these in the menu to make/use your menu items. The `menu.items` property is automatically paged for you depending on the scroll position of the menu panel. Importantly, right now, you should provide a height value for each menu.item using the `--paged-row-height` CSS property, you can do this inline or within your CSS (preferred). If you don't do this the component is unable to calculate the size of the scroll track/thumb. In the future (when needed) we will provide a callback for each item so you can specify a function to calculate the size of each individual item to give us a little more flexibility on what we can do with this component.
+
+```hbs preview-template
+
+
+
+ {{if disclosure.expanded 'Close' 'Open'}}
+
+
+
+ {{#each menu.items as |item|}}
+
+ {{item.Node}}
+
+ {{/each}}
+
+
+
+
+```
+
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `expanded` | `Boolean` | false | The _initial_ state of the disclosure. Please note: this is the _initial_ state only, please use the `disclosure.open` and `disclosure.close` for controling the state. |
+| `items` | `object[]` | | When using a paginated menu you should add all possible items to this arguments and then uses the disclosure.Panel.Menu.items property for `each`ing through, see above example |
## Exported API
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs
index ab05bdd8df..0ebb8f5a6f 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs
@@ -9,7 +9,11 @@
as |disclosure|>
{{yield (hash
Action=(component 'disclosure-menu/action' disclosure=disclosure)
- Menu=(component 'disclosure-menu/menu' disclosure=disclosure)
+ Menu=(component 'disclosure-menu/menu'
+ disclosure=disclosure
+ items=@items
+ rowHeight=@rowHeight
+ )
disclosure=disclosure
toggle=disclosure.toggle
close=disclosure.close
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/index.scss b/ui/packages/consul-ui/app/components/disclosure-menu/index.scss
index cca70fbf59..9769284b97 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/index.scss
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/index.scss
@@ -3,4 +3,6 @@
}
.disclosure-menu [aria-expanded] ~ * {
@extend %menu-panel;
+ overflow-y: auto !important;
+ will-change: scrollPosition;
}
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
index a37d86d244..b5b16cc056 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
@@ -1,11 +1,25 @@
<@disclosure.Details as |details|>
-