mirror of https://github.com/hashicorp/consul
7f3b9d04ba
* ui: Use Datasource for loading related data in ACLs area * ui: Use more manual cleanup for Controller event-sources * Update reconcile to use nspace and add SyncTime to role/policy * Use the correct value for nspace and dc (the one from the item itself) * Remove the // check, we no longer need it. Add some TODO |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
README.mdx
## DataSource
```handlebars
<DataSource
@src="/dc/nspace/services"
@loading="eager"
@onchange={{action (mut items) value="data"}}
@onerror={{action (mut error) value="error"}}
/>
```
### Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `String` | | The source to subscribe to updates to, this should map to a string based URI |
| `loading` | `String` | eager | Allows the browser to defer loading offscreen DataSources (`eager\|lazy`). Setting to `lazy` only loads the data when the DataSource is visible in the DOM (inc. `display: none\|block;`) |
| `onchange` | `Function` | | The action to fire when the data changes. Emits an Event-like object with a `data` property containing the data. |
| `onerror` | `Function` | | The action to fire when an error occurs. Emits ErrorEvent object with an `error` property containing the Error. |
The component takes a `src` or an identifier (a uri) for some data and then emits `onchange` events whenever that data changes. If an error occurs whilst listening for data changes, an `onerror` event is emitted.
Setting `@loading="lazy"` uses `IntersectionObserver` to activate/deactive event emitting until the `<DataSource />` element is displayed in the DOM. This means you can use CSS `display: none|block;` to control the loading and stopping loading of data for usage with CSS based tabs and such-like.
Consuls HTTP API DataSources use Consul's blocking query support for live updating of data.
Behind the scenes in the Consul UI we map URIs back to our `ember-data` backed `Repositories` meaning we can essentially redesign the URIs used for our data to more closely fit our needs. For example we currently require that **all** HTTP API URIs begin with `/dc/nspace/` values whether they require them or not.
`DataSource` is not just restricted to HTTP API data, and can be configured to listen for data changes using a variety of methods and sources. For example we have also configured `DataSource` to listen to `LocalStorage` changes using the `settings://` pseudo-protocol in the URI (See examples below).
### Example
Straightforward usage can use `mut` to easily update data within a template
```handlebars
{{! listen for HTTP API changes}}
<DataSource @src="/dc/nspace/services"
@onchange={{action (mut items) value="data"}}
@onerror={{action (mut error) value="error"}}
/>
{{! the value of items will change whenever the data changes}}
{{#each items as |item|}}
{{item.Name}} {{! < Prints the item name }}
{{/each}}
{{! listen for Settings (local storage) changes}}
<DataSource @src="settings://consul:token"
@onchange={{action (mut token) value="data"}}
@onerror={{action (mut error) value="error"}}
/>
{{! the value of token will change whenever the data changes}}
{{token.AccessorID}} {{! < Prints the token AccessorID }}
```
### See
- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)
---