check for stream existence when displaying replay link

graylog2-web-interface/src/components/widgets/Widget.jsx

@@ -19,6 +19,7 @@ const Widget = React.createClass({
     dashboardId: PropTypes.string.isRequired,
     shouldUpdate: PropTypes.bool.isRequired,
     locked: PropTypes.bool.isRequired,
+    streamIds: PropTypes.object,
   },
   getInitialState() {
     this.widgetPlugin = this._getWidgetPlugin(this.props.widget.type);
@@ -202,6 +203,11 @@ const Widget = React.createClass({
                              onUpdate={this.updateWidget}/>
     );
 
+    let disabledTooltip = null;
+    if (this.props.streamIds != null && this.props.widget.config.stream_id &&
+        !this.props.streamIds[this.props.widget.config.stream_id]) {
+      disabledTooltip = "The stream is not available, cannot replay search.";
+    }
     return (
       <div ref="widget" className="widget" data-widget-id={this.props.widget.id}>
         <WidgetHeader ref="widgetHeader"
@@ -217,7 +223,8 @@ const Widget = React.createClass({
                       onShowConfig={this._showConfig}
                       onEditConfig={this._showEditConfig}
                       onDelete={this.deleteWidget}
-                      replayHref={this.replayUrl()}/>
+                      replayHref={this.replayUrl()}
+                      replayToolTip={disabledTooltip}/>
         {this.props.locked ? showConfigModal : editConfigModal}
       </div>
     );

graylog2-web-interface/src/components/widgets/WidgetFooter.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 const WidgetFooter = React.createClass({
   propTypes: {
@@ -8,6 +8,7 @@ const WidgetFooter = React.createClass({
     onEditConfig: React.PropTypes.func.isRequired,
     onShowConfig: React.PropTypes.func.isRequired,
     replayHref: React.PropTypes.string.isRequired,
+    replayToolTip: React.PropTypes.string,
   },
   _showConfig(e) {
     e.preventDefault();
@@ -22,12 +23,25 @@ const WidgetFooter = React.createClass({
     this.props.onDelete();
   },
   render() {
+    // if we have a tooltip, we disable the button link and instead show a tooltip on hover
+    const title = this.props.replayToolTip ? null : "Replay search";
+    const href = this.props.replayToolTip ? null : this.props.replayHref;
+    let replay = (
+      <Button bsStyle="link" className="btn-text" title={title} href={href}>
+        <i className="fa fa-play"/>
+      </Button>
+    );
+    if (this.props.replayToolTip) {
+      replay = (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="tooltip">{this.props.replayToolTip}</Tooltip>}>
+          {replay}
+        </OverlayTrigger>
+      );
+    }
     const lockedActions = (
       <div className="actions">
         <div className="widget-replay">
-          <Button bsStyle="link" className="btn-text" title="Replay search" href={this.props.replayHref}>
-            <i className="fa fa-play"/>
-          </Button>
+          {replay}
         </div>
         <div className="widget-info">
           <Button bsStyle="link" className="btn-text" title="Show widget configuration" onClick={this._showConfig}>

graylog2-web-interface/src/pages/ShowDashboardPage.jsx

@@ -5,6 +5,7 @@ import { PluginStore } from 'graylog-web-plugin/plugin';
 import deepEqual from 'deep-equal';
 
 import StoreProvider from 'injection/StoreProvider';
+const StreamsStore = StoreProvider.getStore('Streams');
 const CurrentUserStore = StoreProvider.getStore('CurrentUser');
 const DashboardsStore = StoreProvider.getStore('Dashboards');
 const FocusStore = StoreProvider.getStore('Focus');
@@ -31,11 +32,20 @@ const ShowDashboardPage = React.createClass({
     return {
       locked: true,
       forceUpdateInBackground: false,
+      streamIds: null,
     };
   },
   componentDidMount() {
     this.loadData();
     this.listenTo(WidgetsStore, this.removeWidget);
+    // we use the stream ids to potentially disable search replay buttons for deleted streams
+    StreamsStore.load((streams) => {
+      let streamIds2 = streams.reduce((streamIds, stream) => {
+        streamIds[stream.id] = stream.id;
+        return streamIds;
+      }, {});
+      this.setState({ streamIds: streamIds2 });
+    });
     this.loadInterval = setInterval(this.loadData, 2000);
     // eslint-disable-next-line react/no-did-mount-set-state
     this.setState({ forceUpdateInBackground: this.state.currentUser.preferences.updateUnfocussed });
@@ -134,7 +144,7 @@ const ShowDashboardPage = React.createClass({
     }).map((widget) => {
       return (
         <Widget id={widget.id} key={`widget-${widget.id}`} widget={widget} dashboardId={dashboard.id}
-                locked={this.state.locked} shouldUpdate={this.shouldUpdate()}/>
+                locked={this.state.locked} shouldUpdate={this.shouldUpdate()} streamIds={this.state.streamIds}/>
       );
     });