consul/ui/packages/consul-ui/app/components/data-loader
John Cowen a9fe39e035
ui: Fix up blocking reconciliation for multiple models (#11237)
> In the future, this should all be moved to each individual repository now, which will mean we can finally get rid of this service.

This PR moves reconciliation to 'each individual repository'. I stopped short of getting rid of the service, but its so small now we pretty much don't need it. I'd rather wait until I look at the equivalent DataSink service and see if we can get rid of both equivalent services together (this also currently dependant on work soon to be merged)

Reconciliation of models (basically doing the extra work to clean up the ember-data store and bring our frontend 'truth' into line with the actual backend truth) when blocking/long-polling on different views/filters of data is slightly more complicated due to figuring out what should be cleaned up and what should be left in the store. This is especially apparent for KVs.

I built in a such a way to hopefully make sure it will all make sense for the future. I also checked that this all worked nicely with all our models, even KV which has never supported blocking queries. I left all that work in so that if we want to enable blocking queries/live updates for KV it now just involves deleting a couple of lines of code.

There is a tonne of old stuff that we can clean up here now (our 'fake headers' that we pass around) and I've added that to my list of thing for a 'Big Cleanup PR' that will remove lots of code that we no longer require.
2021-10-07 12:38:04 +01:00
..
README.mdx ui: Partitions Application Layer (#11017) 2021-09-15 19:50:11 +01:00
chart.xstate.js ui: Partitions Application Layer (#11017) 2021-09-15 19:50:11 +01:00
index.hbs ui: Fix up blocking reconciliation for multiple models (#11237) 2021-10-07 12:38:04 +01:00
index.js ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00

README.mdx

# DataLoader

`<DataLoader />` works similarly to, and uses, `<DataSource />` but additionally
exposes various common states based on the status of the loading of the data.
These states are exposed as slots to enable you to easily render different
elements based on the state of the data.


Use the `@dataSource` decorator in your repositories to define URI to async
method mapping.

```javascript
class SomethingRepository extends Service {
  @dataSource('/:partition/:nspace/:dc/services')
  async youCouldCallItAnythingTodoWithGettingServices(params) {
    console.log(params);
    // {partition: "partition", nspace: "nspace", dc: "dc"}
    return getTheThing(params);
  }
}
```

```hbs preview-template
<DataLoader
  @src="/partition/nspace/dc/services"
as |loader|>
  <BlockSlot @name="loading">
    Loading...
  </BlockSlot>
  <BlockSlot @name="error">
    Error {{loader.error.status}}
  </BlockSlot>
  <BlockSlot @name="disconnected">
    Whilst we could load the initial data, something happened subsequently that
    meant we could load longer load updates to the data.
  </BlockSlot>
  <BlockSlot @name="loaded">
    {{#each loader.data as |service|}}
    {{service.Name}}<br />
    {{/each}}
  </BlockSlot>
</DataLoader>
```

## Attributes

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `String` | | The source to subscribe to updates to, this should map to a string based URI |

## Exports

| Name    |  Description |
| ---     | --- |
| `data`  | The loaded dataset once any data has been loaded successfully |
| `error` | The error thrown if an error is encountered whilst loading data |

## Slots

| Name           | Description |
| ---            | --- |
| `loading`      | Rendered whilst waiting for the initial data to load. |
| `error`        | If there is an error only whilst waiting for the initial data to load, this slot is rendered. |
| `disconnected` | Rendered when the initial data has already loaded, but a subsequent set of loaded data causes an error to be thrown.|
| `loaded`       | Rendered once the initial data is loaded and on subsequent successful loads of data. |

## See

- [DataSource](../data-source/README.mdx)
- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)

---