mirror of https://github.com/hashicorp/consul
2413244b77
* ui: Add data-source component and related services (#6486) * ui: Add data-source component and related services: 1. DataSource component 2. Repository manager for retrieving repositories based on URIs 3. Blocking data service for injection to the data-source component to support blocking query types of data sources 4. 'Once' promise based data service for injection for potential fallback to old style promise based data (would need to be injected via an initial runtime variable) 5. Several utility functions taken from elsewhere - maybeCall - a replication of code from elsewhere for condition calling a function based on the result of a promise - restartWhenAvailable - used for restarting blocking queries when a tab is brought to the front - ifNotBlocking - to check if blocking is NOT enabled * Move to a different organization based on protocols * Don't call open twice when eager * Workaround new ember error for reading and writing at the same time * Add first draft of a README.mdx file |
||
|---|---|---|
| .. | ||
| 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)
---