consul/ui/packages/consul-ui/app/components/route
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
..
announcer
title
README.mdx
index.hbs
index.js

README.mdx

# Route

The `Route` component should be used for the top-level component for *every*
route/page template. It provides/will provide functionality (along with the
`<Outlet />` component) for setting and announcing the title of the page,
passing data down through the route/template hierarchy, automatic
orchestration of nested routing and visual animating/transitioning between
routes.

## Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `String` | `undefined` | The name of the route in ember routeName format e.g. `dc.services.index`. This is generally the `routeName` variable that is available to you in all Consul UI route/page level templates.|
| `title` | `String` | `undefined` | Deprecated: The title for this page (eventually passed through to the `{{page-title}}` helper. This argument should be omitted if a title change isn't required. Also see the exported `<Title />` component which is now preferred |
| `titleSeparator` | `String` | `undefined` | Deprecated: This can be used in the top-level route to configure the separator for the `{{page-title}}` helper. Also see the exported `<Title />` component which is now preferred |

## Exports

| export | Type | Default | Description |
| --- | --- | --- | --- |
| `model` | `Object` | `undefined` | Arbitrary hash of data passed down from the parent route/outlet |
| `params` | `Object` | `undefined` | An object/merge of **all** optional route params and normal route params |
| `Title` | `Component` | `` | An inline component to allow you to set a title within the Route component |
| `Announcer` | `Component` | `` | An inline component to allow you to specify where the route announcer is rendered. This should be at the very top of your app probably under your `<Route />` in `application.hbs` |

```hbs
<!-- application.hbs -->
<Route
  @name={{routeName}}
as |route|>
  <route.Announcer />
  ...
</Route>

<!-- All route templates that change the title -->
<Route
  @name={{routeName}}
as |route|>
  <h1><route.Title @title="Page Title" /></h1>
  {{route.model.dc.Name}}
</Route>
```

Every page/route template has a `routeName` variable exposed specifically to
allow you to use this to set the `@name` of the route.

The `<Title @title=""/>` component should be used to control the title of the page. This component also yields the value of the `@title` attribute allowing you to use it to avoid repeating the title of the page for things like reusing the same value for a `<h1>`. The `Title` component is one of the only components which uses an attribute to specify textual copy, this makes it hard to add further HTML elements to the value of `@title` which would not be supported in the HTML `<title>` element.