Skip to content

Commit

Permalink
Use notistack to show alerts
Browse files Browse the repository at this point in the history
  • Loading branch information
drolando committed Mar 19, 2020
1 parent 248c5fe commit 59b8eb6
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 54 deletions.
11 changes: 11 additions & 0 deletions zipkin-lens/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 5 additions & 4 deletions zipkin-lens/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
49 changes: 26 additions & 23 deletions zipkin-lens/src/components/App/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand Down
61 changes: 37 additions & 24 deletions zipkin-lens/src/components/TracePage/TraceSummaryHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';

Expand Down Expand Up @@ -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 = (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}`)
Expand All @@ -135,37 +148,37 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
break;
}
}

fetch(archivePostUrl, {
return json;
})
.then((json) => {
return fetch(archivePostUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(json),
})
.then((response) => {
if (
!response.ok ||
(response.status !== 202 && response.status === 200)
) {
throw new Error('Failed to archive the trace');
}
if (archiveUrl) {
alert(
`Archive successful! This trace is now accessible at ${archiveUrl}`,
);
} else {
alert(`Archive successful!`);
}
})
.catch(() => {
alert('Failed to archive the trace');
});
});
})
.then((response) => {
if (
!response.ok ||
(response.status !== 202 && response.status === 200)
) {
throw new Error('Failed to archive the trace');
}
if (archiveUrl) {
notify(
`Archive successful! This trace is now accessible at ${archiveUrl}`,
'success',
);
} else {
notify(`Archive successful!`, 'success');
}
})
.catch(() => {
alert('Failed to fetch trace from backend');
notify('Failed to archive the trace', 'error');
});
}, [archivePostUrl, archiveUrl, traceSummary]);
}, [archivePostUrl, archiveUrl, traceSummary, enqueueSnackbar]);

const handleSaveButtonClick = useCallback(() => {
if (!traceSummary || !traceSummary.traceId) {
Expand Down
9 changes: 6 additions & 3 deletions zipkin-lens/src/test/util/render-with-default-settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
Expand Down
8 changes: 8 additions & 0 deletions zipkin-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 59b8eb6

Please sign in to comment.