Skip to content

Commit 2cdf22a

Browse files
petethepigpetethepig
committed
frontend: adds a sidebar, simplifies header
1 parent a1447dd commit 2cdf22a

File tree

6 files changed

+280
-64
lines changed

6 files changed

+280
-64
lines changed

‎webapp/javascript/components/Header.jsx

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ function Header(props) {
2020
const { areNamesLoading, isJSONLoading, labels } = props;
2121
return (
2222
<div className="navbar">
23-
<h1 className="logo" />
2423
<div
2524
className={classNames("labels", {
2625
visible: !areNamesLoading,
@@ -42,33 +41,6 @@ function Header(props) {
4241
</div> */}
4342
{/* <LabelsFilter /> */}
4443
<div className="navbar-space-filler" />
45-
<div className="navbar-links">
46-
<span className="navbar-link">
47-
<FontAwesomeIcon icon={faFile} />
48-
&nbsp;
49-
<a rel="noreferrer" target="_blank" href="https://pyroscope.io/docs">
50-
Docs
51-
</a>
52-
</span>
53-
<span className="navbar-link">
54-
<SlackIcon />
55-
&nbsp;
56-
<a rel="noreferrer" target="_blank" href="https://pyroscope.io/slack">
57-
Slack
58-
</a>
59-
</span>
60-
<span className="navbar-link">
61-
<FontAwesomeIcon icon={faGithub} />
62-
&nbsp;
63-
<a
64-
rel="noreferrer"
65-
target="_blank"
66-
href="https://github.com/pyroscope-io/pyroscope"
67-
>
68-
GitHub
69-
</a>
70-
</span>
71-
</div>
7244
<div
7345
className={classNames("navbar-spinner-container", {
7446
visible: isJSONLoading,

‎webapp/javascript/components/PyroscopeApp.jsx

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ShortcutsModal from "./ShortcutsModal";
1212
import Header from "./Header";
1313
import Footer from "./Footer";
1414
import { fetchNames } from "../redux/actions";
15+
import Sidebar from "./Sidebar";
1516

1617
// See docs here: https://github.com/flot/flot/blob/master/API.md
1718
const flotOptions = {
@@ -100,24 +101,27 @@ function PyroscopeApp(props) {
100101

101102
return (
102103
<div className="pyroscope-app">
103-
<div className="main-wrapper">
104-
<Header />
105-
<TimelineChart
106-
id="timeline-chart"
107-
options={flotOptions}
108-
data={flotData}
109-
width="100%"
110-
height="100px"
111-
/>
112-
<FlameGraphRenderer />
113-
<Modal
114-
isOpen={state.shortcutsModalOpen}
115-
style={modalStyle}
116-
appElement={document.getElementById("root")}
117-
>
118-
<div className="modal-close-btn" onClick={closeShortcutsModal} />
119-
<ShortcutsModal closeModal={closeShortcutsModal} />
120-
</Modal>
104+
<div className="sidebar-wrapper">
105+
<Sidebar showShortcutsModal={showShortcutsModal} />
106+
<div className="main-wrapper">
107+
<Header />
108+
<TimelineChart
109+
id="timeline-chart"
110+
options={flotOptions}
111+
data={flotData}
112+
width="100%"
113+
height="100px"
114+
/>
115+
<FlameGraphRenderer />
116+
<Modal
117+
isOpen={state.shortcutsModalOpen}
118+
style={modalStyle}
119+
appElement={document.getElementById("root")}
120+
>
121+
<div className="modal-close-btn" onClick={closeShortcutsModal} />
122+
<ShortcutsModal closeModal={closeShortcutsModal} />
123+
</Modal>
124+
</div>
121125
</div>
122126
<Footer />
123127
</div>

‎webapp/javascript/components/ShortcutsModal.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function ShortcutsModal(props) {
4444
<ShortcutConsumer>
4545
{({ shortcuts }) => (
4646
<div>
47-
<h2 style={{ marginTop: 0 }}>🔥 Keyboard Shortcuts</h2>
47+
<h2 style={{ marginTop: 0 }}>Keyboard Shortcuts</h2>
4848
<table className="shortcuts">
4949
<tbody>
5050
{shortcuts

‎webapp/javascript/components/Sidebar.jsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from "react";
2+
import { connect } from "react-redux";
3+
import "react-dom";
4+
import clsx from "clsx";
5+
6+
import Spinner from "react-svg-spinner";
7+
8+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
9+
import { faFileAlt, faKeyboard, faColumns, faBell } from "@fortawesome/free-solid-svg-icons";
10+
import { faGithub } from "@fortawesome/free-brands-svg-icons";
11+
import classNames from "classnames";
12+
import DateRangePicker from "./DateRangePicker";
13+
import RefreshButton from "./RefreshButton";
14+
import SlackIcon from "./SlackIcon";
15+
import Label from "./Label";
16+
import NameSelector from "./NameSelector";
17+
18+
import { fetchNames } from "../redux/actions";
19+
20+
function SidebarItem(props) {
21+
const { children, tooltipText, externalLink } = props;
22+
return (
23+
<div className="sidebar-item">
24+
{children}
25+
{
26+
// <div className="sidebar-external-link">
27+
// <FontAwesomeIcon icon={faExternalLinkSquareAlt} />
28+
// </div>
29+
}
30+
<div className="sidebar-tooltip-wrapper">
31+
<span className="sidebar-tooltip">{tooltipText}</span>
32+
</div>
33+
</div>
34+
);
35+
}
36+
37+
function Sidebar(props) {
38+
const { areNamesLoading, isJSONLoading, labels, showShortcutsModal } = props;
39+
return (
40+
<div className="sidebar">
41+
<h1 className="logo active" />
42+
{/* <SidebarItem tooltipText="Compare - Coming Soon">
43+
<button>
44+
<FontAwesomeIcon icon={faColumns} />
45+
</button>
46+
</SidebarItem>
47+
<SidebarItem tooltipText="Alerts - Coming Soon">
48+
<button>
49+
<FontAwesomeIcon icon={faBell} />
50+
</button>
51+
</SidebarItem> */}
52+
<div className="sidebar-space-filler" />
53+
<SidebarItem tooltipText="Docs" externalLink>
54+
<a rel="noreferrer" target="_blank" href="https://pyroscope.io/docs">
55+
<FontAwesomeIcon icon={faFileAlt} />
56+
</a>
57+
</SidebarItem>
58+
<SidebarItem tooltipText="Slack" externalLink>
59+
<a rel="noreferrer" target="_blank" href="https://pyroscope.io/slack">
60+
<SlackIcon />
61+
</a>
62+
</SidebarItem>
63+
<SidebarItem tooltipText="GitHub" externalLink>
64+
<a
65+
rel="noreferrer"
66+
target="_blank"
67+
href="https://github.com/pyroscope-io/pyroscope"
68+
>
69+
<FontAwesomeIcon icon={faGithub} />
70+
</a>
71+
</SidebarItem>
72+
<SidebarItem tooltipText="Keyboard Shortcuts">
73+
<button onClick={showShortcutsModal}>
74+
<FontAwesomeIcon icon={faKeyboard} />
75+
</button>
76+
</SidebarItem>
77+
</div>
78+
);
79+
}
80+
81+
export default connect((x) => x, { fetchNames })(Sidebar);

‎webapp/sass/components/labels.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44

55
.labels {
6-
margin-left: 30px;
76
min-width: 350px;
87
visibility: none;
98

0 commit comments

Comments
 (0)