From 99cad28f3b397e4171b78433f78df29dd41a65df Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Tue, 14 Apr 2020 07:48:58 -0600 Subject: [PATCH] Add poll-interval attribute (#992) --- CHANGELOG.md | 8 +++++++ .../docs/components/manifold-resource-list.md | 17 +++++++++---- docs/docs/data/manifold-data-has-resource.md | 9 +++++++ docs/docs/data/manifold-data-resource-list.md | 11 ++++++++- package.json | 2 +- src/components.d.ts | 24 +++++++++++++++++++ .../manifold-data-has-resource.tsx | 12 ++++++---- .../manifold-data-resource-list.tsx | 10 ++++---- .../manifold-resource-list.tsx | 14 ++++++----- 9 files changed, 85 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a7ca22c13..2986917e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [Unreleased] + +### Added + +- Added `poll-interval` prop to ``, ``, and + ``. + ## [0.9.8] - 2020-03-30 ### Fixed @@ -543,6 +550,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). - Changed the `manifold-resource-credentials` component to use the standalone `manifold-credentials` component. +[unreleased]: https://github.com/manifoldco/ui/compare/v0.9.8...HEAD [0.9.8]: https://github.com/manifoldco/ui/compare/v0.9.7...v0.9.8 [0.9.7]: https://github.com/manifoldco/ui/compare/v0.9.6...v0.9.7 [0.9.6]: https://github.com/manifoldco/ui/compare/v0.9.5...v0.9.6 diff --git a/docs/docs/components/manifold-resource-list.md b/docs/docs/components/manifold-resource-list.md index d110de06e..56a9d70f6 100644 --- a/docs/docs/components/manifold-resource-list.md +++ b/docs/docs/components/manifold-resource-list.md @@ -18,20 +18,27 @@ To navigate using a traditional `` tag, specify a `resource-link-format` attr `:resource` as a placeholder: ```html - + ``` Note that this will disable the custom event unless `preserve-event` is passed as well. +## Polling interval + +This will change the polling interval from `3000 ms` (3 seconds, default) to `10000 ms` (10 +seconds): + +```html + +``` + ## Pausing updates By default, this component will subscribe to updates from the server. To disable that, pass the `paused` attribute: ```html - + ``` ## Loading state @@ -59,7 +66,7 @@ You can pass in your own "no resources" state for the componenent by passing in ## Context (team, org, etc.) -To filter the resource list by an owner-id that provides a different context than just the user +To filter the resource list by an owner-id that provides a different context than just the user context (e.g. team resources), you can provide the owner-id to filter by: ```html diff --git a/docs/docs/data/manifold-data-has-resource.md b/docs/docs/data/manifold-data-has-resource.md index 215b85267..0f75c13b5 100644 --- a/docs/docs/data/manifold-data-has-resource.md +++ b/docs/docs/data/manifold-data-has-resource.md @@ -37,6 +37,15 @@ resources provisioned other than the one specfied). ``` +## Polling interval + +This will change the polling interval from `3000 ms` (3 seconds, default) to `10000 ms` (10 +seconds): + +```html + +``` + ## Pausing updates By default, this component will subscribe to updates from the server and make periodic requests. To diff --git a/docs/docs/data/manifold-data-resource-list.md b/docs/docs/data/manifold-data-resource-list.md index c84117c2e..b11d2d380 100644 --- a/docs/docs/data/manifold-data-resource-list.md +++ b/docs/docs/data/manifold-data-resource-list.md @@ -55,6 +55,15 @@ To navigate using a traditional `` tag (which would cause a full-page refresh Note that specifying this attribute will disable the custom event unless `preserve-event` is passed as well. +## Polling interval + +This will change the polling interval from `3000 ms` (3 seconds, default) to `10000 ms` (10 +seconds): + +```html + +``` + ## Pausing updates By default, this component will subscribe to updates from the server (in case users add a new @@ -67,7 +76,7 @@ attribute: ## Context (team, org, etc.) -To filter the resource list by an owner-id that provides a different context than just the user +To filter the resource list by an owner-id that provides a different context than just the user context (e.g. team resources), you can provide the owner-id to filter by: ```html diff --git a/package.json b/package.json index c35759022..3638f3b87 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "clean-package-json": "node scripts/clean-package-json", "copy-changelog": "node scripts/copy-changelog", "dev": "npm run build:watch & rm -rf dist && wait-on dist/loader/index.cjs.js && npm run storybook", - "docs": "npm run prepare:docs && cd docs && npm start", + "docs": "make package && npm run copy-changelog && cd docs && npm start", "docker": "docker build -t manifoldco/ui . && docker run -p 8080:80 manifoldco/ui", "format:changelog": "npx keep-a-changelog && prettier CHANGELOG.md --write", "generate:gql": "graphql-codegen --config codegen.yml", diff --git a/src/components.d.ts b/src/components.d.ts index 219842bde..353e416ae 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -150,6 +150,10 @@ export namespace Components { 'label'?: string; 'ownerId'?: string; 'paused'?: boolean; + /** + * Adjust poll frequency + */ + 'pollInterval'?: number; } interface ManifoldDataProductLogo { /** @@ -260,6 +264,10 @@ export namespace Components { */ 'paused'?: boolean; /** + * Interval at which this component polls + */ + 'pollInterval'?: number; + /** * Should the JS event still fire, even if product-link-format is passed? */ 'preserveEvent'?: boolean; @@ -571,6 +579,10 @@ export namespace Components { */ 'paused'?: boolean; /** + * Interval at which this component polls + */ + 'pollInterval'?: number; + /** * Should the JS event still fire, even if product-link-format is passed? */ 'preserveEvent'?: boolean; @@ -1203,6 +1215,10 @@ declare namespace LocalJSX { 'onManifold-hasResource-load'?: (event: CustomEvent) => void; 'ownerId'?: string; 'paused'?: boolean; + /** + * Adjust poll frequency + */ + 'pollInterval'?: number; } interface ManifoldDataProductLogo { /** @@ -1325,6 +1341,10 @@ declare namespace LocalJSX { */ 'paused'?: boolean; /** + * Interval at which this component polls + */ + 'pollInterval'?: number; + /** * Should the JS event still fire, even if product-link-format is passed? */ 'preserveEvent'?: boolean; @@ -1648,6 +1668,10 @@ declare namespace LocalJSX { */ 'paused'?: boolean; /** + * Interval at which this component polls + */ + 'pollInterval'?: number; + /** * Should the JS event still fire, even if product-link-format is passed? */ 'preserveEvent'?: boolean; diff --git a/src/components/manifold-data-has-resource/manifold-data-has-resource.tsx b/src/components/manifold-data-has-resource/manifold-data-has-resource.tsx index 6780ca264..44841b612 100644 --- a/src/components/manifold-data-has-resource/manifold-data-has-resource.tsx +++ b/src/components/manifold-data-has-resource/manifold-data-has-resource.tsx @@ -25,15 +25,17 @@ export class ManifoldDataHasResource { @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch; /** Disable auto-updates? */ @Prop() label?: string; + /** Adjust poll frequency */ + @Prop() pollInterval?: number = 3000; @Prop() ownerId?: string; @Prop() paused?: boolean = false; - @State() interval?: number; + @State() poll?: number; @State() hasResource?: boolean; @Event({ eventName: 'manifold-hasResource-load', bubbles: true }) loadEvent: EventEmitter; @Watch('paused') pausedChange(newPaused: boolean) { if (newPaused) { - window.clearInterval(this.interval); + window.clearInterval(this.poll); } else { this.makeInterval(); } @@ -48,13 +50,13 @@ export class ManifoldDataHasResource { } componentDidUnload() { - if (this.interval) { - window.clearInterval(this.interval); + if (this.poll) { + window.clearInterval(this.poll); } } makeInterval() { - this.interval = window.setInterval(() => this.fetchResources(), 3000); + this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval); } async fetchResources(label = this.label) { diff --git a/src/components/manifold-data-resource-list/manifold-data-resource-list.tsx b/src/components/manifold-data-resource-list/manifold-data-resource-list.tsx index 31e2c8341..76c586983 100644 --- a/src/components/manifold-data-resource-list/manifold-data-resource-list.tsx +++ b/src/components/manifold-data-resource-list/manifold-data-resource-list.tsx @@ -28,13 +28,15 @@ export class ManifoldDataResourceList { @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch; /** Disable auto-updates? */ @Prop() paused?: boolean = false; + /** Interval at which this component polls */ + @Prop() pollInterval?: number = 3000; /** Link format structure, with `:resource` placeholder */ @Prop() resourceLinkFormat?: string; /** Should the JS event still fire, even if product-link-format is passed? */ @Prop() preserveEvent?: boolean = false; /** OwnerId to filter resources by */ @Prop() ownerId?: string; - @State() interval?: number; + @State() poll?: number; @State() resources?: ResourceEdge[]; @Event({ eventName: 'manifold-resourceList-click', bubbles: true }) clickEvent: EventEmitter; @@ -52,13 +54,13 @@ export class ManifoldDataResourceList { // start polling this.fetchResources(); if (!this.paused) { - this.interval = window.setInterval(() => this.fetchResources(), 3000); + this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval); } } componentDidUnload() { - if (this.interval) { - window.clearInterval(this.interval); + if (this.poll) { + window.clearInterval(this.poll); } } diff --git a/src/components/manifold-resource-list/manifold-resource-list.tsx b/src/components/manifold-resource-list/manifold-resource-list.tsx index 0ddce694b..4621b3209 100644 --- a/src/components/manifold-resource-list/manifold-resource-list.tsx +++ b/src/components/manifold-resource-list/manifold-resource-list.tsx @@ -17,6 +17,8 @@ export class ManifoldResourceList { @Element() el: HTMLElement; /** _(hidden)_ */ @Prop() graphqlFetch?: GraphqlFetch = connection.graphqlFetch; + /** Interval at which this component polls */ + @Prop() pollInterval?: number = 3000; /** Disable auto-updates? */ @Prop() paused?: boolean = false; /** Link format structure, with `:resource` placeholder */ @@ -25,14 +27,14 @@ export class ManifoldResourceList { @Prop() preserveEvent?: boolean = false; /** Filter resource list by ownerId */ @Prop() ownerId?: string; - @State() interval?: number; + @State() poll?: number; @State() resources?: ResourceEdge[]; @Watch('paused') pausedChange(newPaused: boolean) { if (newPaused) { - window.clearInterval(this.interval); + window.clearInterval(this.poll); } else { - this.interval = window.setInterval(() => this.fetchResources(), 3000); + this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval); } } @@ -50,13 +52,13 @@ export class ManifoldResourceList { // start polling this.fetchResources(); if (!this.paused) { - this.interval = window.setInterval(() => this.fetchResources(), 3000); + this.poll = window.setInterval(() => this.fetchResources(), this.pollInterval); } } componentDidUnload() { - if (this.interval) { - window.clearInterval(this.interval); + if (this.poll) { + window.clearInterval(this.poll); } }