diff --git a/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx b/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx index 026aa5600a1..d2b34e54619 100644 --- a/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx +++ b/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx @@ -23,17 +23,33 @@ export class SetInterval extends PureComponent { } componentDidMount() { + // Creating a subscription to propsSubject. This subject pushes values every time + // SetInterval's props change this.subscription = this.propsSubject .pipe( + // switchMap creates a new observables based on the input stream, + // which becomes part of the propsSubject stream switchMap(props => { + // If the query is live, empty value is emited. `of` creates single value, + // which is merged to propsSubject stream if (isLive(props.interval)) { return of({}); } + + // When query is loading, a new stream is merged. But it's a stream that emits no values(NEVER), + // hence next call of this function will happen when query changes, and new props are passed into this component + // When query is NOT loading, a new value is emited, this time it's an interval value, + // which makes tap function below execute on that interval basis. return props.loading ? NEVER : interval(stringToMs(props.interval)); }), + // tap will execute function passed via func prop + // * on value from `of` stream merged if query is live + // * on specified interval (triggered by values emited by interval) tap(() => this.props.func()) ) .subscribe(); + + // When component has mounted, propsSubject emits it's first value this.propsSubject.next(this.props); } @@ -41,7 +57,7 @@ export class SetInterval extends PureComponent { if ((isLive(prevProps.interval) && isLive(this.props.interval)) || _.isEqual(prevProps, this.props)) { return; } - + // if props changed, a new value is emited from propsSubject this.propsSubject.next(this.props); }