diff --git a/ui/packages/consul-ui/app/components/data-loader/README.mdx b/ui/packages/consul-ui/app/components/data-loader/README.mdx
index c2b6383e2..f9db81f24 100644
--- a/ui/packages/consul-ui/app/components/data-loader/README.mdx
+++ b/ui/packages/consul-ui/app/components/data-loader/README.mdx
@@ -48,12 +48,13 @@ as |loader|>
| --- | --- | --- | --- |
| `src` | `String` | | The source to subscribe to updates to, this should map to a string based URI |
-## Exports
+## Exported API
-| 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 |
+| Name | Type | Description |
+| --- | --- | --- |
+| `data` | `object` | The loaded dataset once any data has been loaded successfully |
+| `error` | `Error` |The error thrown if an error is encountered whilst loading data |
+| `invalidate` | `function` | Invalidate the data represented by the DataLoader, therefore forcing a re-request of data for the DataLoader |
## Slots
diff --git a/ui/packages/consul-ui/app/components/data-loader/chart.xstate.js b/ui/packages/consul-ui/app/components/data-loader/chart.xstate.js
index dde7c5349..94cc96131 100644
--- a/ui/packages/consul-ui/app/components/data-loader/chart.xstate.js
+++ b/ui/packages/consul-ui/app/components/data-loader/chart.xstate.js
@@ -17,15 +17,9 @@ export default {
target: 'loading',
},
],
- INVALIDATE: [
- {
- target: 'invalidating',
- },
- ],
},
states: {
load: {},
- invalidating: {},
loading: {
on: {
SUCCESS: {
diff --git a/ui/packages/consul-ui/app/components/data-loader/index.hbs b/ui/packages/consul-ui/app/components/data-loader/index.hbs
index 6f38827ab..6be3fd61c 100644
--- a/ui/packages/consul-ui/app/components/data-loader/index.hbs
+++ b/ui/packages/consul-ui/app/components/data-loader/index.hbs
@@ -7,7 +7,7 @@
{{#let (hash
data=data
error=error
- invalidate=(action "invalidate")
+ invalidate=this.invalidate
dispatchError=(queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR"))
) as |api|}}
@@ -17,7 +17,7 @@
{{! if we didn't specify any data}}
{{#if (not items)}}
{{! try and load the data if we aren't in an error state}}
-
+
{{! but only if we only asked for a single load and we are in loading state}}
{{#if (and src (or (not once) (state-matches state "loading")))}}
+ as |source|>
+ {{did-insert (set this 'invalidate' source.invalidate)}}
+
{{/if}}
{{/if}}
@@ -47,7 +49,7 @@
{{/yield-slot}}
-
+
{{#if (not (eq error.status '401'))}}
diff --git a/ui/packages/consul-ui/app/components/data-loader/index.js b/ui/packages/consul-ui/app/components/data-loader/index.js
index 0039ba3d4..19967a12a 100644
--- a/ui/packages/consul-ui/app/components/data-loader/index.js
+++ b/ui/packages/consul-ui/app/components/data-loader/index.js
@@ -1,6 +1,5 @@
import Component from '@ember/component';
import { set } from '@ember/object';
-import { schedule } from '@ember/runloop';
import Slotted from 'block-slots';
import chart from './chart.xstate';
@@ -22,12 +21,6 @@ export default Component.extend(Slotted, {
this.dispatch('LOAD');
},
actions: {
- invalidate() {
- this.dispatch('INVALIDATE');
- schedule('afterRender', () => {
- this.dispatch('LOAD');
- });
- },
isLoaded: function() {
return typeof this.items !== 'undefined' || typeof this.src === 'undefined';
},
diff --git a/ui/packages/consul-ui/app/components/data-source/README.mdx b/ui/packages/consul-ui/app/components/data-source/README.mdx
index 559eff6bb..adc8fcba2 100644
--- a/ui/packages/consul-ui/app/components/data-source/README.mdx
+++ b/ui/packages/consul-ui/app/components/data-source/README.mdx
@@ -40,6 +40,14 @@ Please make sure you use the `uri` helper to specify src URIs, this ensures that
| `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. |
+## Exported API
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `data` | `object` | The loaded dataset once any data has been loaded successfully |
+| `error` | `Error` |The error thrown if an error is encountered whilst loading data |
+| `invalidate` | `function` | Invalidate the data represented by the datasource, therefore forcing a re-request of data for the DataSource |
+
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 `` 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.
diff --git a/ui/packages/consul-ui/app/components/data-source/index.hbs b/ui/packages/consul-ui/app/components/data-source/index.hbs
index de3b6c8de..d4b1e2613 100644
--- a/ui/packages/consul-ui/app/components/data-source/index.hbs
+++ b/ui/packages/consul-ui/app/components/data-source/index.hbs
@@ -17,6 +17,7 @@
{{yield (hash
data=this.data
error=this.error
+ invalidate=this.invalidate
Source=(if this.data
(component 'data-source' disabled=(not (eq this.error undefined)))
''
diff --git a/ui/packages/consul-ui/app/components/data-source/index.js b/ui/packages/consul-ui/app/components/data-source/index.js
index f854cc9f0..3d5d66ebd 100644
--- a/ui/packages/consul-ui/app/components/data-source/index.js
+++ b/ui/packages/consul-ui/app/components/data-source/index.js
@@ -1,3 +1,4 @@
+/* eslint no-console: ["error", { allow: ["debug"] }] */
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
@@ -179,6 +180,7 @@ export default class DataSource extends Component {
}
}
}
+
@action
async invalidate() {
this.source.readyState = 2;
@@ -186,7 +188,7 @@ export default class DataSource extends Component {
schedule('afterRender', () => {
// TODO: Support lazy data-sources by keeping a reference to $el
runInDebug(_ =>
- console.error(
+ console.debug(
`Invalidation is only supported for non-lazy data sources. If you want to use this you should fixup support for lazy data sources`
)
);