diff --git a/docs/monitoring/dashboards.md b/docs/monitoring/dashboards.md index 421b116475..4c267c20a5 100644 --- a/docs/monitoring/dashboards.md +++ b/docs/monitoring/dashboards.md @@ -16,22 +16,13 @@ To follow along with the instructions on this page it will be useful to have: ## Monitoring stack {#monitoring-stack} -An Ethereum client collects lots of data which can be read in the form of a chronological database. To make monitoring easier, this data can be fed into data visualisation software. There are many options available: - -- [Prometheus](https://prometheus.io/) (pull model) -- [InfluxDB](https://www.influxdata.com/get-influxdb/) (push model) -- [Telegraf](https://www.influxdata.com/get-influxdb/) -- [Grafana](https://www.grafana.com/) -- [Datadog](https://www.datadoghq.com/) -- [Chronograf](https://www.influxdata.com/time-series-platform/chronograf/) - -There's also [Geth Prometheus Exporter](https://github.com/hunterlong/gethexporter), an option preconfigured with InfluxDB and Grafana. You can set it up easily using docker and [Ethbian OS](https://ethbian.org/index.html) for RPi 4. - -On this page, a Geth client will be configured to push data into a InfluxDB database and Grafana will be used to visualize the data. +An Ethereum client collects lots of data which can be read in the form of a chronological database. To make monitoring easier, this data can be fed into data visualisation software. On this page, a Geth client will be configured to push data into a InfluxDB database and Grafana will be used to visualize the data. ## Setting up InfluxDB {#setting-up-influxdb} -InfluxDB can be downloaded from the [Influxdata release page](https://portal.influxdata.com/downloads/). It can also be installed from a [repository](https://repos.influxdata.com/). For example for a Debian based Linux operating system: +InfluxDB can be downloaded from the [Influxdata release page](https://portal.influxdata.com/downloads/). It can also be installed from a [repository](https://repos.influxdata.com/). + +For example the following commands will download and install InfluxDB on a Debian based Linux operating system - you can check for up-to-date instructions for your operating system on the InfluxDB [downloads page](https://portal.influxdata.com/downloads/): ```sh curl -tlsv1.3 --proto =https -sL https://repos.influxdata.com/influxdb.key | sudo apt-key add @@ -56,7 +47,7 @@ Now the influx client can be used to enter [InfluxDB shell](https://docs.influxd influx -username 'username' -password 'password' ``` -A database and user for geth metrics can be created by communicatign with it directly via its shell. +A database and user for Geth metrics can be created by communicating with it directly via its shell. ```sh create database geth @@ -80,7 +71,8 @@ InfluxDB is running and configured to store metrics from Geth. ## Preparing Geth {#preparing-geth} -After setting up database, metrics need to be enabled in Geth. Various options are available, as documented in the `METRICS AND STATS OPTIONS` in `geth --help` and in our [metrics page](). In this case Geth will be configured to push data into InfluxDB. Basic setup specifies the endpoint where InfluxDB is reachable and authenticates the database. +After setting up database, metrics need to be enabled in Geth. Various options are available, as documented in the `METRICS AND STATS OPTIONS` +in `geth --help` and in our [metrics page](/pages/docs/monitoring/metrics.md). In this case Geth will be configured to push data into InfluxDB. Basic setup specifies the endpoint where InfluxDB is reachable and authenticates the database. ```sh geth --metrics --metrics.influxdb --metrics.influxdb.endpoint "http://0.0.0.0:8086" --metrics.influxdb.username "geth" --metrics.influxdb.password "chosenpassword" @@ -97,9 +89,9 @@ show measurements ## Setting up Grafana {#setting-up-grafana} -With the InfluxDB database setup and successfully receiving data from Geth, the next step is to install Grafana so that the data can be visualized. Instructions for specific operating systems are available on the Grafana [downloads page](https://grafana.com/grafana/download?pg=get&plcmt=selfmanaged-box1-cta1). +With the InfluxDB database setup and successfully receiving data from Geth, the next step is to install Grafana so that the data can be visualized. -Alternatively, the following code snippet shows how to download, install and run Grafana on a Debian based Linux system: +The following code snippet shows how to download, install and run Grafana on a Debian based Linux system. Up to date instructions for your operating system can be found on the Grafana [downloads page](https://grafana.com/grafana/download). ```sh curl -tlsv1.3 --proto =https -sL https://packages.grafana.com/gpg.key | sudo apt-key add - @@ -112,40 +104,44 @@ sudo systemctl start grafana-server When Grafana is up and running, it should be reachable at `localhost:3000`. A browser can be pointed to that URL to access a visualization dashboard. The browser will prompt for login credentials (user: `admin` and password: `admin`). When prompted, the default password should be changed and saved. -![](/images/docs/grafana1.png) - -The browser first redirects to the Grafana home page to set up the source data. Click on the configuration icon in the left bar and select "Data sources". - -![](/images/docs/grafana2.png) - -There aren't any data sources yet, click on "Add data source" to define one. +The browser first redirects to the Grafana home page to set up the source data. Click on the "Data sources" icon and then click on "InfluxDB". The following configuration options are recommended: -![](/images/docs/grafana3.png) - -Select "InfluxDB" and proceed. - -![](/images/docs/grafana4.png) - -Data source configuration is pretty straight forward if the tools run on the same machine as Geth. The InfluxDB address and details for accessing the database must be set. Refer to the image below. - -![](/images/docs/grafana5.png) +```sh +Name: InfluxDB +Query Language: InfluxQL +HTTP + URL: http://localhost:8086 + Access: Server (default) + Whitelisted cookies: None (leave blank) +Auth + All options left as their default (switches off) +Custom HTTP Headers + None +InfluxDB Details + Database: geth + User: + Password: + HTTP Method: GET +``` -If everything is complete and InfluxDB is reachable, click on "Save and test" and wait for the confirmation to pop up. +Click on "Save and test" and wait for the confirmation to pop up. -![](/images/docs/grafana6.png) +Grafana is now set up to read data from InfluxDB. Now a dashboard can be created to interpret and display it. Dashboards properties are encoded in JSON files which can be created by anybody and easily imported. On the left bar, click on the "Dashboards" icon, then "Import". -Grafana is now set up to read data from InfluxDB. Now a dashboard can be created to interpret and display it. Dashboards properties are encoded in JSON files which can be created by anybody and easily imported. On the left bar, click on "Create and Import". +For a Geth monitoring dashboard, copy the URL of [this dashboard](https://grafana.com/grafana/dashboards/13877/) and paste it in the "Import page" in Grafana. After saving the dashboard, it should look like this: -![](/images/docs/grafana7.png) +![Grafana 1](/public/images/docs/grafana.png) -For a Geth monitoring dashboard, copy the ID of [this dashboard](https://grafana.com/grafana/dashboards/13877/) and paste it in the "Import page" in Grafana. After saving the dashboard, it should look like this: -![](/images/docs/grafana8.png) +## Customization -The dashboards can be customized further. Each panel can be edited, moved, removed or added. To learn more about how dashboards work, refer to [Grafana's documentation](https://grafana.com/docs/grafana/latest/dashboards/). +The dashboards can be customized further. Each panel can be edited, moved, removed or added. To learn more about how dashboards work, refer to +[Grafana's documentation](https://grafana.com/docs/grafana/latest/dashboards/). Some users might also be interested in automatic [alerting](https://grafana.com/docs/grafana/latest/alerting/), which sets up alert notifications that are sent automatically when metrics reach certain values. Various communication channels are supported. ## Summary This page has outlined how to set up a simple node monitoring dashboard using Grafana. + +***NB: this page was adapted from a tutorial on ethereum.org written by Mario Havel*** \ No newline at end of file diff --git a/public/images/docs/grafana8.png b/public/images/docs/grafana.png similarity index 100% rename from public/images/docs/grafana8.png rename to public/images/docs/grafana.png diff --git a/public/images/docs/grafana1.png b/public/images/docs/grafana1.png deleted file mode 100644 index 24afabebdd..0000000000 Binary files a/public/images/docs/grafana1.png and /dev/null differ diff --git a/public/images/docs/grafana2.png b/public/images/docs/grafana2.png deleted file mode 100644 index ca01d2ad4a..0000000000 Binary files a/public/images/docs/grafana2.png and /dev/null differ diff --git a/public/images/docs/grafana3.png b/public/images/docs/grafana3.png deleted file mode 100644 index e66c61b2cb..0000000000 Binary files a/public/images/docs/grafana3.png and /dev/null differ diff --git a/public/images/docs/grafana4.png b/public/images/docs/grafana4.png deleted file mode 100644 index 9136e0e428..0000000000 Binary files a/public/images/docs/grafana4.png and /dev/null differ diff --git a/public/images/docs/grafana5.png b/public/images/docs/grafana5.png deleted file mode 100644 index ff385fedcd..0000000000 Binary files a/public/images/docs/grafana5.png and /dev/null differ diff --git a/public/images/docs/grafana6.png b/public/images/docs/grafana6.png deleted file mode 100644 index 39950e5497..0000000000 Binary files a/public/images/docs/grafana6.png and /dev/null differ diff --git a/public/images/docs/grafana7.png b/public/images/docs/grafana7.png deleted file mode 100644 index ff15dba872..0000000000 Binary files a/public/images/docs/grafana7.png and /dev/null differ diff --git a/public/images/pages/glyph-home-light.svg b/public/images/pages/glyph-home-light.svg deleted file mode 100644 index 36fed55efc..0000000000 --- a/public/images/pages/glyph-home-light.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/public/images/pages/gopher-downloads-front-light.svg b/public/images/pages/gopher-downloads-front-light.svg deleted file mode 100644 index 41c2984306..0000000000 --- a/public/images/pages/gopher-downloads-front-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/public/images/pages/gopher-home-front.svg b/public/images/pages/gopher-home-front.svg deleted file mode 100644 index 5729375b7d..0000000000 --- a/public/images/pages/gopher-home-front.svg +++ /dev/null @@ -1,453 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/pages/gopher-home-nodes.svg b/public/images/pages/gopher-home-nodes.svg deleted file mode 100644 index 6c412aa7d1..0000000000 --- a/public/images/pages/gopher-home-nodes.svg +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/pages/gopher-home-side-desktop.svg b/public/images/pages/gopher-home-side-desktop.svg deleted file mode 100644 index e823d8927b..0000000000 --- a/public/images/pages/gopher-home-side-desktop.svg +++ /dev/null @@ -1,417 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/pages/gopher-home-side-mobile.svg b/public/images/pages/gopher-home-side-mobile.svg deleted file mode 100644 index a4bfbbd93c..0000000000 --- a/public/images/pages/gopher-home-side-mobile.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/public/images/pages/linux-penguin.svg b/public/images/pages/linux-penguin.svg deleted file mode 100644 index f66b859b43..0000000000 --- a/public/images/pages/linux-penguin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/pages/macos-logo.svg b/public/images/pages/macos-logo.svg deleted file mode 100644 index 6c6180ff5e..0000000000 --- a/public/images/pages/macos-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/pages/source-branch.svg b/public/images/pages/source-branch.svg deleted file mode 100644 index 0ae94f6e20..0000000000 --- a/public/images/pages/source-branch.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/pages/windows-logo.svg b/public/images/pages/windows-logo.svg deleted file mode 100644 index 13729fe7ff..0000000000 --- a/public/images/pages/windows-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx index a3f898d2bc..631544d2d5 100644 --- a/src/components/MDXComponents.tsx +++ b/src/components/MDXComponents.tsx @@ -42,8 +42,7 @@ const MDXComponents = { {children} @@ -98,7 +97,7 @@ const MDXComponents = { // as={'span'} // padding='0.125em 0.25em' // color='red.300' - // background='#1c1e2d' + // background='code-bg-contrast' // borderRadius='0.25em' // fontFamily='code' // fontSize='sm' diff --git a/src/components/UI/ButtonLinkSecondary.tsx b/src/components/UI/ButtonLinkSecondary.tsx new file mode 100644 index 0000000000..882a8a4a2d --- /dev/null +++ b/src/components/UI/ButtonLinkSecondary.tsx @@ -0,0 +1,22 @@ +import { Link, Stack, Text } from '@chakra-ui/react'; +import NextLink, { LinkProps } from 'next/link'; + +import { Link as LinkTheme } from "../../theme/components" + +interface Props extends LinkProps { + children: React.ReactNode; +} + +export const ButtonLinkSecondary: React.FC = ({ href, children, ...restProps}) => { + const isExternal: boolean = href.toString().startsWith('http'); + const variant = LinkTheme.variants["button-link-secondary"] + return ( + + + + {children} + + + + ); +}; diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx index c94cbc2d4d..12fe2f9af6 100644 --- a/src/components/UI/DataTable.tsx +++ b/src/components/UI/DataTable.tsx @@ -12,11 +12,11 @@ export const DataTable: FC = ({ columnHeaders, data }) => { // Note: This wont work on firefox, we are ok with this. css={{ '&::-webkit-scrollbar': { - borderTop: '2px solid #11866f', + borderTop: '2px solid var(--chakra-colors-primary)', height: 18 }, '&::-webkit-scrollbar-thumb': { - background: '#11866f' + background: 'var(--chakra-colors-primary)' } }} pt={4} @@ -32,7 +32,7 @@ export const DataTable: FC = ({ columnHeaders, data }) => { fontFamily='"JetBrains Mono", monospace' fontWeight={700} fontSize='md' - color='#868b87' + color='#868b87' //? Use theme color? Or add to theme? > {columnHeader} @@ -48,7 +48,7 @@ export const DataTable: FC = ({ columnHeaders, data }) => { key={idx} // TODO: Get new background color from nuno for hover transition={'all 0.5s'} - _hover={{ background: 'green.50', transition: 'all 0.5s' }} + _hover={{ background: 'button-bg', transition: 'all 0.5s' }} > {columnHeaders.map((columnHeader, idx) => { // TODO: Make the font size smaller (refer to design system) diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index cb7641849c..4df7e9ad65 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -1,23 +1,21 @@ -import { Box, Flex, Input, InputGroup, Link, Stack, Text } from '@chakra-ui/react'; +import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@chakra-ui/react'; import { FC } from 'react'; import NextLink from 'next/link'; -import { HamburguerIcon, LensIcon, MoonIcon } from '../UI/icons'; +import { HamburgerIcon, LensIcon, MoonIcon, SunIcon } from '../UI/icons'; import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; export const Header: FC = () => { + const { colorMode, toggleColorMode } = useColorMode(); + const isDark = colorMode === 'dark'; return ( - + @@ -32,14 +30,14 @@ export const Header: FC = () => { @@ -55,13 +53,14 @@ export const Header: FC = () => { @@ -77,30 +76,41 @@ export const Header: FC = () => { - + {/* DARK MODE SWITCH */} - - + + {isDark ? : } - {/* HAMBURGUER MENU */} + {/* HAMBURGER MENU */} - + diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index c31edbc37a..610e5aa2a4 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -1,7 +1,9 @@ -import { Box, Center, Button, Grid, Image, Link, Stack, HStack, Text } from '@chakra-ui/react'; +import { Box, Button, Center, Grid, HStack, Image, Link, Stack,Text } from '@chakra-ui/react'; import { FC } from 'react'; import NextLink from 'next/link'; +import { GopherDownloads } from '../svgs'; + import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants'; interface DownloadsHero { @@ -31,7 +33,7 @@ export const DownloadsHero: FC = ({ return ( = ({ Download go-ethereum - = ({ order={{ base: -1, md: 1 }} >
- Gopher plugged in +
{Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { + const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key]; return ( - +