Do not show global notifications in 404 page (Graylog2#4389)

* Do not show global notifications in error pages Avoid displaying global notifications in not found page. So far other error pages will not be affected, as they are rendered before react-router is used. * Fix linter errors
dkhamitov · Dec 4, 2017 · a58f56f · a58f56f
1 parent b95ffd4
commit a58f56f
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 71 deletions.
diff --git a/graylog2-web-interface/src/pages/GettingStartedPage.jsx b/graylog2-web-interface/src/pages/GettingStartedPage.jsx
@@ -2,13 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Reflux from 'reflux';
 
-import { DocumentTitle, IfPermitted, Spinner } from 'components/common';
+import { DocumentTitle, Spinner } from 'components/common';
 import GettingStarted from 'components/gettingstarted/GettingStarted';
 
 import Routes from 'routing/Routes';
 import history from 'util/History';
 
 import StoreProvider from 'injection/StoreProvider';
+
 const SystemStore = StoreProvider.getStore('System');
 
 const GETTING_STARTED_URL = 'https://gettingstarted.graylog.org/';

diff --git a/graylog2-web-interface/src/routing/ApiRoutes.js b/graylog2-web-interface/src/routing/ApiRoutes.js
@@ -90,7 +90,7 @@ const ApiRoutes = {
     create: () => { return { url: '/system/indices/index_sets' }; },
     delete: (indexSetId, deleteIndices) => { return { url: `/system/indices/index_sets/${indexSetId}?delete_indices=${deleteIndices}` }; },
     setDefault: (indexSetId) => { return { url: `/system/indices/index_sets/${indexSetId}/default` }; },
-    stats: () => { return { url: `/system/indices/index_sets/stats` }; },
+    stats: () => { return { url: '/system/indices/index_sets/stats' }; },
   },
   IndicesApiController: {
     close: (indexName) => { return { url: `/system/indexer/indices/${indexName}/close` }; },

diff --git a/graylog2-web-interface/src/routing/App.jsx b/graylog2-web-interface/src/routing/App.jsx
@@ -11,7 +11,6 @@ import 'c3/c3.css';
 import 'dc/dc.css';
 
 import StoreProvider from 'injection/StoreProvider';
-import AppGlobalNotifications from './AppGlobalNotifications';
 
 const CurrentUserStore = StoreProvider.getStore('CurrentUser');
 
@@ -35,7 +34,6 @@ const App = React.createClass({
                     fullName={this.state.currentUser.full_name}
                     loginName={this.state.currentUser.username}
                     permissions={this.state.currentUser.permissions} />
-        <AppGlobalNotifications />
         <div id="scroll-to-hint" style={{ display: 'none' }} className="alpha80">
           <i className="fa fa-arrow-up" />
         </div>

diff --git a/graylog2-web-interface/src/routing/AppRouter.jsx b/graylog2-web-interface/src/routing/AppRouter.jsx
@@ -5,6 +5,7 @@ import { PluginStore } from 'graylog-web-plugin/plugin';
 import App from 'routing/App';
 import AppWithSearchBar from 'routing/AppWithSearchBar';
 import AppWithoutSearchBar from 'routing/AppWithoutSearchBar';
+import AppWithGlobalNotifications from 'routing/AppWithGlobalNotifications';
 import history from 'util/History';
 import URLUtils from 'util/URLUtils';
 
@@ -69,78 +70,82 @@ const AppRouter = React.createClass({
     return (
       <Router history={history}>
         <Route path={Routes.STARTPAGE} component={App}>
-          <IndexRoute component={StartPage} />
-          <Route component={AppWithSearchBar}>
-            <Route path={Routes.SEARCH} component={DelegatedSearchPage} />
-            <Route path={Routes.message_show(':index', ':messageId')} component={ShowMessagePage} />
-            <Route path={Routes.SOURCES} component={SourcesPage} />
-            <Route path={Routes.stream_search(':streamId')} component={StreamSearchPage} />
-            <Redirect from={Routes.legacy_stream_search(':streamId')} to={Routes.stream_search(':streamId')} />
-          </Route>
-          <Route component={AppWithoutSearchBar}>
-            <Route path={Routes.GETTING_STARTED} component={GettingStartedPage} />
-            <Route path={Routes.STREAMS} component={StreamsPage} />
-            <Route path={Routes.stream_edit(':streamId')} component={StreamEditPage} />
-            <Route path={Routes.stream_outputs(':streamId')} component={StreamOutputsPage} />
-            <Route path={Routes.ALERTS.LIST} component={AlertsPage} />
-            <Route path={Routes.ALERTS.CONDITIONS} component={AlertConditionsPage} />
-            <Route path={Routes.ALERTS.NEW_CONDITION} component={NewAlertConditionPage} />
-            <Route path={Routes.ALERTS.NOTIFICATIONS} component={AlertNotificationsPage} />
-            <Route path={Routes.ALERTS.NEW_NOTIFICATION} component={NewAlertNotificationPage} />
-            <Route path={Routes.show_alert_condition(':streamId', ':conditionId')} component={EditAlertConditionPage} />
-            <Route path={Routes.show_alert(':alertId')} component={ShowAlertPage} />
-            <Route path={Routes.DASHBOARDS} component={DashboardsPage} />
-            <Route path={Routes.dashboard_show(':dashboardId')} component={ShowDashboardPage} />
-            <Route path={Routes.SYSTEM.INPUTS} component={InputsPage} />
-            <Route path={Routes.node_inputs(':nodeId')} component={NodeInputsPage} />
-            <Route path={Routes.global_input_extractors(':inputId')} component={ExtractorsPage} />
-            <Route path={Routes.local_input_extractors(':nodeId', ':inputId')} component={ExtractorsPage} />
-            <Route path={Routes.new_extractor(':nodeId', ':inputId')} component={CreateExtractorsPage} />
-            <Route path={Routes.edit_extractor(':nodeId', ':inputId', ':extractorId')} component={EditExtractorsPage} />
-            <Route path={Routes.import_extractors(':nodeId', ':inputId')} component={ImportExtractorsPage} />
-            <Route path={Routes.export_extractors(':nodeId', ':inputId')} component={ExportExtractorsPage} />
-            <Route path={Routes.SYSTEM.CONFIGURATIONS} component={ConfigurationsPage} />
-            <Route path={Routes.SYSTEM.CONTENTPACKS.LIST} component={ContentPacksPage} />
-            <Route path={Routes.SYSTEM.CONTENTPACKS.EXPORT} component={ExportContentPackPage} />
-            <Route path={Routes.SYSTEM.GROKPATTERNS} component={GrokPatternsPage} />
-            <Route path={Routes.SYSTEM.INDICES.LIST} component={IndicesPage} />
-            <Route path={Routes.SYSTEM.INDEX_SETS.CREATE} component={IndexSetCreationPage} />
-            <Route path={Routes.SYSTEM.INDEX_SETS.SHOW(':indexSetId')} component={IndexSetPage} />
-            <Route path={Routes.SYSTEM.INDEX_SETS.CONFIGURATION(':indexSetId')} component={IndexSetConfigurationPage} />
-            <Route path={Routes.SYSTEM.INDICES.FAILURES} component={IndexerFailuresPage} />
+          <Route component={AppWithGlobalNotifications}>
+            <IndexRoute component={StartPage} />
+            <Route component={AppWithSearchBar}>
+              <Route path={Routes.SEARCH} component={DelegatedSearchPage} />
+              <Route path={Routes.message_show(':index', ':messageId')} component={ShowMessagePage} />
+              <Route path={Routes.SOURCES} component={SourcesPage} />
+              <Route path={Routes.stream_search(':streamId')} component={StreamSearchPage} />
+              <Redirect from={Routes.legacy_stream_search(':streamId')} to={Routes.stream_search(':streamId')} />
+            </Route>
+            <Route component={AppWithoutSearchBar}>
+              <Route path={Routes.GETTING_STARTED} component={GettingStartedPage} />
+              <Route path={Routes.STREAMS} component={StreamsPage} />
+              <Route path={Routes.stream_edit(':streamId')} component={StreamEditPage} />
+              <Route path={Routes.stream_outputs(':streamId')} component={StreamOutputsPage} />
+              <Route path={Routes.ALERTS.LIST} component={AlertsPage} />
+              <Route path={Routes.ALERTS.CONDITIONS} component={AlertConditionsPage} />
+              <Route path={Routes.ALERTS.NEW_CONDITION} component={NewAlertConditionPage} />
+              <Route path={Routes.ALERTS.NOTIFICATIONS} component={AlertNotificationsPage} />
+              <Route path={Routes.ALERTS.NEW_NOTIFICATION} component={NewAlertNotificationPage} />
+              <Route path={Routes.show_alert_condition(':streamId', ':conditionId')} component={EditAlertConditionPage} />
+              <Route path={Routes.show_alert(':alertId')} component={ShowAlertPage} />
+              <Route path={Routes.DASHBOARDS} component={DashboardsPage} />
+              <Route path={Routes.dashboard_show(':dashboardId')} component={ShowDashboardPage} />
+              <Route path={Routes.SYSTEM.INPUTS} component={InputsPage} />
+              <Route path={Routes.node_inputs(':nodeId')} component={NodeInputsPage} />
+              <Route path={Routes.global_input_extractors(':inputId')} component={ExtractorsPage} />
+              <Route path={Routes.local_input_extractors(':nodeId', ':inputId')} component={ExtractorsPage} />
+              <Route path={Routes.new_extractor(':nodeId', ':inputId')} component={CreateExtractorsPage} />
+              <Route path={Routes.edit_extractor(':nodeId', ':inputId', ':extractorId')} component={EditExtractorsPage} />
+              <Route path={Routes.import_extractors(':nodeId', ':inputId')} component={ImportExtractorsPage} />
+              <Route path={Routes.export_extractors(':nodeId', ':inputId')} component={ExportExtractorsPage} />
+              <Route path={Routes.SYSTEM.CONFIGURATIONS} component={ConfigurationsPage} />
+              <Route path={Routes.SYSTEM.CONTENTPACKS.LIST} component={ContentPacksPage} />
+              <Route path={Routes.SYSTEM.CONTENTPACKS.EXPORT} component={ExportContentPackPage} />
+              <Route path={Routes.SYSTEM.GROKPATTERNS} component={GrokPatternsPage} />
+              <Route path={Routes.SYSTEM.INDICES.LIST} component={IndicesPage} />
+              <Route path={Routes.SYSTEM.INDEX_SETS.CREATE} component={IndexSetCreationPage} />
+              <Route path={Routes.SYSTEM.INDEX_SETS.SHOW(':indexSetId')} component={IndexSetPage} />
+              <Route path={Routes.SYSTEM.INDEX_SETS.CONFIGURATION(':indexSetId')} component={IndexSetConfigurationPage} />
+              <Route path={Routes.SYSTEM.INDICES.FAILURES} component={IndexerFailuresPage} />
 
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.OVERVIEW} component={LUTTablesPage} />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.CREATE} component={LUTTablesPage} action="create" />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.show(':tableName')} component={LUTTablesPage} action="show" />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.edit(':tableName')} component={LUTTablesPage} action="edit" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.OVERVIEW} component={LUTTablesPage} />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.CREATE} component={LUTTablesPage} action="create" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.show(':tableName')} component={LUTTablesPage} action="show" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.edit(':tableName')} component={LUTTablesPage} action="edit" />
 
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.OVERVIEW} component={LUTCachesPage} />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.CREATE} component={LUTCachesPage} action="create" />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.show(':cacheName')} component={LUTCachesPage} action="show" />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.edit(':cacheName')} component={LUTCachesPage} action="edit" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.OVERVIEW} component={LUTCachesPage} />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.CREATE} component={LUTCachesPage} action="create" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.show(':cacheName')} component={LUTCachesPage} action="show" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.CACHES.edit(':cacheName')} component={LUTCachesPage} action="edit" />
 
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.OVERVIEW} component={LUTDataAdaptersPage} />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.CREATE} component={LUTDataAdaptersPage} action="create" />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.show(':adapterName')} component={LUTDataAdaptersPage} action="show" />
-            <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.edit(':adapterName')} component={LUTDataAdaptersPage} action="edit" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.OVERVIEW} component={LUTDataAdaptersPage} />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.CREATE} component={LUTDataAdaptersPage} action="create" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.show(':adapterName')} component={LUTDataAdaptersPage} action="show" />
+              <Route path={Routes.SYSTEM.LOOKUPTABLES.DATA_ADAPTERS.edit(':adapterName')} component={LUTDataAdaptersPage} action="edit" />
 
-            <Route path={Routes.SYSTEM.LOGGING} component={LoggersPage} />
-            <Route path={Routes.SYSTEM.METRICS(':nodeId')} component={ShowMetricsPage} />
-            <Route path={Routes.SYSTEM.NODES.LIST} component={NodesPage} />
-            <Route path={Routes.SYSTEM.NODES.SHOW(':nodeId')} component={ShowNodePage} />
-            <Route path={Routes.SYSTEM.OUTPUTS} component={SystemOutputsPage} />
-            <Route path={Routes.SYSTEM.AUTHENTICATION.OVERVIEW} component={AuthenticationPage}>
-              <IndexRoute component={UsersPage} />
-              <Route path={Routes.SYSTEM.AUTHENTICATION.USERS.LIST} component={UsersPage} />
-              <Route path={Routes.SYSTEM.AUTHENTICATION.USERS.CREATE} component={CreateUsersPage} />
-              <Route path={Routes.SYSTEM.AUTHENTICATION.USERS.edit(':username')} component={EditUsersPage} />
-              <Route path={Routes.SYSTEM.AUTHENTICATION.ROLES} component={RolesPage} />
-              <Route path={Routes.SYSTEM.AUTHENTICATION.PROVIDERS.CONFIG} />
-              <Route path={Routes.SYSTEM.AUTHENTICATION.PROVIDERS.provider(':name')} />
+              <Route path={Routes.SYSTEM.LOGGING} component={LoggersPage} />
+              <Route path={Routes.SYSTEM.METRICS(':nodeId')} component={ShowMetricsPage} />
+              <Route path={Routes.SYSTEM.NODES.LIST} component={NodesPage} />
+              <Route path={Routes.SYSTEM.NODES.SHOW(':nodeId')} component={ShowNodePage} />
+              <Route path={Routes.SYSTEM.OUTPUTS} component={SystemOutputsPage} />
+              <Route path={Routes.SYSTEM.AUTHENTICATION.OVERVIEW} component={AuthenticationPage}>
+                <IndexRoute component={UsersPage} />
+                <Route path={Routes.SYSTEM.AUTHENTICATION.USERS.LIST} component={UsersPage} />
+                <Route path={Routes.SYSTEM.AUTHENTICATION.USERS.CREATE} component={CreateUsersPage} />
+                <Route path={Routes.SYSTEM.AUTHENTICATION.USERS.edit(':username')} component={EditUsersPage} />
+                <Route path={Routes.SYSTEM.AUTHENTICATION.ROLES} component={RolesPage} />
+                <Route path={Routes.SYSTEM.AUTHENTICATION.PROVIDERS.CONFIG} />
+                <Route path={Routes.SYSTEM.AUTHENTICATION.PROVIDERS.provider(':name')} />
+              </Route>
+              <Route path={Routes.SYSTEM.OVERVIEW} component={SystemOverviewPage} />
+              <Route path={Routes.SYSTEM.THREADDUMP(':nodeId')} component={ThreadDumpPage} />
+              {pluginRoutes}
             </Route>
-            <Route path={Routes.SYSTEM.OVERVIEW} component={SystemOverviewPage} />
-            <Route path={Routes.SYSTEM.THREADDUMP(':nodeId')} component={ThreadDumpPage} />
-            {pluginRoutes}
+          </Route>
+          <Route component={AppWithoutSearchBar}>
             <Route path={Routes.NOTFOUND} component={NotFoundPage} />
             <Route path="*" component={NotFoundPage} />
           </Route>

diff --git a/graylog2-web-interface/src/routing/AppWithGlobalNotifications.jsx b/graylog2-web-interface/src/routing/AppWithGlobalNotifications.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AppGlobalNotifications from './AppGlobalNotifications';
+
+const AppWithGlobalNotifications = React.createClass({
+  propTypes: {
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.element),
+      PropTypes.element,
+    ]).isRequired,
+  },
+  render() {
+    return (
+      <div>
+        <AppGlobalNotifications />
+        {this.props.children}
+      </div>
+    );
+  },
+});
+
+export default AppWithGlobalNotifications;