Use notistack to show alerts

openzipkin · Mar 19, 2020 · 5ccbcb4 · 5ccbcb4
1 parent 248c5fe
commit 5ccbcb4
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 37 deletions.
diff --git a/zipkin-lens/package-lock.json b/zipkin-lens/package-lock.json
diff --git a/zipkin-lens/package.json b/zipkin-lens/package.json
@@ -35,8 +35,8 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
-    "@typescript-eslint/parser": "^2.23.0",
     "@typescript-eslint/eslint-plugin": "^2.23.0",
+    "@typescript-eslint/parser": "^2.23.0",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.6",
     "enzyme": "^3.7.0",
@@ -55,6 +55,7 @@
     "moment": "^2.24.0",
     "mvy": "0.2.1",
     "node-fetch": "^2.3.0",
+    "notistack": "^0.9.9",
     "prettier": "^1.19.1",
     "prop-types": "^15.6.2",
     "query-string": "^6.1.0",
@@ -64,6 +65,7 @@
     "react-dom": "^16.13.0",
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
+    "react-scripts": "3.4.0",
     "react-select": "^2.0.0",
     "react-table": "^6.8.6",
     "react-transition-group": "^2.4.0",
@@ -72,10 +74,9 @@
     "redux": "^4.0.0",
     "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0",
-    "react-scripts": "3.4.0",
     "shortid": "^2.2.14",
-    "vizceral-react": "^4.6.5",
-    "typescript": "^3.7.5"
+    "typescript": "^3.7.5",
+    "vizceral-react": "^4.6.5"
   },
   "scripts": {
     "compile": "lingui compile --namespace es",

diff --git a/zipkin-lens/src/components/App/App.jsx b/zipkin-lens/src/components/App/App.jsx
@@ -19,6 +19,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { ThemeProvider } from '@material-ui/styles';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
+import { SnackbarProvider } from 'notistack';
 
 import Layout from './Layout';
 import DiscoverPage from '../DiscoverPage';
@@ -39,29 +40,31 @@ const App = () => {
       <UiConfig>
         <MuiPickersUtilsProvider utils={MomentUtils}>
           <ThemeProvider theme={theme}>
-            <UiConfigConsumer>
-              {(config) => (
-                <Provider store={configureStore(config)}>
-                  <I18nProvider i18n={i18n}>
-                    <BrowserRouter basename={BASE_PATH}>
-                      <Layout>
-                        <Route exact path="/" component={DiscoverPage} />
-                        <Route
-                          exact
-                          path="/dependency"
-                          component={DependenciesPage}
-                        />
-                        <Route
-                          exact
-                          path={['/traces/:traceId', '/traceViewer']}
-                          component={TracePage}
-                        />
-                      </Layout>
-                    </BrowserRouter>
-                  </I18nProvider>
-                </Provider>
-              )}
-            </UiConfigConsumer>
+            <SnackbarProvider>
+              <UiConfigConsumer>
+                {(config) => (
+                  <Provider store={configureStore(config)}>
+                    <I18nProvider i18n={i18n}>
+                      <BrowserRouter basename={BASE_PATH}>
+                        <Layout>
+                          <Route exact path="/" component={DiscoverPage} />
+                          <Route
+                            exact
+                            path="/dependency"
+                            component={DependenciesPage}
+                          />
+                          <Route
+                            exact
+                            path={['/traces/:traceId', '/traceViewer']}
+                            component={TracePage}
+                          />
+                        </Layout>
+                      </BrowserRouter>
+                    </I18nProvider>
+                  </Provider>
+                )}
+              </UiConfigConsumer>
+            </SnackbarProvider>
           </ThemeProvider>
         </MuiPickersUtilsProvider>
       </UiConfig>

diff --git a/zipkin-lens/src/components/TracePage/TraceSummaryHeader.jsx b/zipkin-lens/src/components/TracePage/TraceSummaryHeader.jsx
@@ -11,7 +11,6 @@
  * or implied. See the License for the specific language governing permissions and limitations under
  * the License.
  */
-/* eslint-disable no-alert */
 import { t, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import PropTypes from 'prop-types';
@@ -23,6 +22,7 @@ import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
+import { useSnackbar } from 'notistack';
 
 import { useUiConfig } from '../UiConfig';
 
@@ -114,7 +114,20 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
       ? config.archiveUrl.replace('{traceId}', traceSummary.traceId)
       : undefined;
 
+  const { enqueueSnackbar } = useSnackbar();
+
   const archiveClick = useCallback(() => {
+    const notify = function notify(message, variant) {
+      enqueueSnackbar(message, {
+        variant,
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'center',
+        },
+        autoHideDuration: 10000, // 10 seconds
+      });
+    };
+
     // We don't store the raw json in the browser yet, so we need to make an
     // HTTP call to retrieve it again.
     fetch(`${api.TRACE}/${traceSummary.traceId}`)
@@ -151,21 +164,22 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
               throw new Error('Failed to archive the trace');
             }
             if (archiveUrl) {
-              alert(
+              notify(
                 `Archive successful! This trace is now accessible at ${archiveUrl}`,
+                'success',
               );
             } else {
-              alert(`Archive successful!`);
+              notify(`Archive successful!`, 'success');
             }
           })
-          .catch(() => {
-            alert('Failed to archive the trace');
+          .catch((error) => {
+            notify(`Failed to archive the trace: ${error}`, 'error');
           });
       })
       .catch(() => {
-        alert('Failed to fetch trace from backend');
+        notify('Failed to fetch trace from backend', 'error');
       });
-  }, [archivePostUrl, archiveUrl, traceSummary]);
+  }, [archivePostUrl, archiveUrl, traceSummary, enqueueSnackbar]);
 
   const handleSaveButtonClick = useCallback(() => {
     if (!traceSummary || !traceSummary.traceId) {

diff --git a/zipkin-lens/src/test/util/render-with-default-settings.tsx b/zipkin-lens/src/test/util/render-with-default-settings.tsx
@@ -21,6 +21,7 @@ import { createMemoryHistory, History } from 'history';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { SnackbarProvider } from 'notistack';
 
 import { UiConfigContext } from '../../components/UiConfig';
 
@@ -67,9 +68,11 @@ export default (
         <Router history={history}>
           <MuiPickersUtilsProvider utils={MomentUtils}>
             <ThemeProvider theme={theme}>
-              <UiConfigContext.Provider value={filledConfig}>
-                {children}
-              </UiConfigContext.Provider>
+              <SnackbarProvider>
+                <UiConfigContext.Provider value={filledConfig}>
+                  {children}
+                </UiConfigContext.Provider>
+              </SnackbarProvider>
             </ThemeProvider>
           </MuiPickersUtilsProvider>
         </Router>

diff --git a/zipkin-server/README.md b/zipkin-server/README.md
@@ -186,6 +186,14 @@ basePath | zipkin.ui.basepath | path prefix placed into the <base> tag in the UI
 To map properties to environment variables, change them to upper-underscore case format. For
 example, if using docker you can set `ZIPKIN_UI_QUERY_LIMIT=100` to affect `$.queryLimit` in `/config.json`.
 
+### Trace archival
+Most production Zipkin clusters will store traces with a limited TTL. This makes it a bit inconvenient to
+share a trace, as the link to it will expire after a few days.
+
+The "archive a trace" feature helps with this. Launch a second zipkin server pointing to a storage with a longer
+TTL than the regular one and set the archivePostUrl and archiveUrl UI configs pointing to this second server.
+Once archivePostUrl is set a new "Archive Trace" button will appear on the trace view page.
+
 ## Storage
 
 ### In-Memory Storage