7 |
8 |
9 | # Table of Contents
10 |
11 | - [About](#about)
12 | - [Getting Started](#getting-started)
13 | - [Features](#features)
14 | - [Troubleshooting](#troubleshooting)
15 | - [Contributing](#contributing)
16 |
17 | # About
18 |
19 | dbHive offers an interactive dashboard to visualize the performance of one or more PostgreSQL databases. By providing easily accessible information about the health and activity of a database, dbHive enables developers to make informed decisions that optimize the way they store their data.
20 |
21 | # Getting Started
22 |
23 | ### https://dbhive.net/
24 |
25 | # Features
26 |
27 | ### ➮ Query Execution Times
28 |
29 | Get a broad sense of database performance by viewing average query times across the database, as well as averages for specific types of SQL queries. Pinpoint the slowest queries to gain insight for database improvement.
30 |
31 | ###
32 |
33 | 
34 |
35 | ### ➮ Most Frequent Queries
36 |
37 | To analyze common and recurring database activity, view charts on the most frequent queries within and across all query types.
38 |
39 | ### ➮ Other Key Stats
40 |
41 | At a glance, gather other vital information, including:
42 |
43 | - conflicts
44 | - deadlocks
45 | - rolled back transactions
46 | - cache hit ratio
47 | - block hits
48 | - and more
49 |
50 | ### ➮ Access everything with a secure account
51 |
52 | Maintain privacy and security with dbHive's required secure login. All database information and metrics are protected with encrypted accounts.
53 |
54 | ### ➮ Connect one or more databases
55 |
56 | Easily access all databases and metrics within one place with the ability to toggle between multiple database dashboards.
57 |
58 | ###
59 |
60 | 
61 |
62 | ### ➮ Customize database metrics dashboard
63 |
64 | Use dropdowns to view more details on a given metric. Expand graphs to fill the screen. Adjust the fetch interval, the frequency at which the dashboard is updated with the latest metrics.
65 |
66 | ### ➮ Delete a database
67 |
68 | Navigate to the Setup page and remove a database when it is no longer in use, keeping your dashboard clean.
69 |
70 | # Privacy and Security
71 |
72 | dbHive does not store any user data, most importantly including database connection information, usernames, and passwords. Data is kept encrypted on the client.
73 |
74 | # Troubleshooting
75 |
76 | If certain database metrics are shown as unavailable in the dashboard, database user permissions may need to be elevated. Necessary user permissions and admin privileges can vary depending on the database hosting service used.
77 | For issues with application accounts, it is recommended to remove problematic users. Follow the directions in the "Remove application users" section of this readme.
78 |
79 | ### ➮ Shared library
80 |
81 | If you receive this error, 'error: pg_stat_statements must be loaded via shared_preload_libraries', in **postgresql.conf** change
82 |
83 | ```
84 | shared_preload_libraries = ''
85 | ```
86 |
87 | to
88 |
89 | ```
90 | shared_preload_libraries = 'pg_stat_statements'
91 | ```
92 |
93 | and restart the Postgres service.
94 |
95 | # Contributing
96 |
97 | Read our [contribution guide](https://github.com/oslabs-beta/dbhive/blob/main/CONTRIBUTING.md) for more information on how to contribute to dbHive.
98 |
99 | ### Development Mode
100 |
101 | If you would like to participate in developing new features, the app can be launched in development mode:
102 |
103 | ```
104 | npm run dev
105 | ```
106 |
107 | or
108 |
109 | ```
110 | docker build -t dbhive/main-dev -f Dockerfile-dev .
111 | ```
112 |
113 | ```
114 | docker-compose -f docker-compose-dev-hot.yml up
115 | ```
116 |
117 | # Future Enhancements
118 |
119 | - **Search Feature:** Add a search bar to the dashboard that allows users to find data by keywords.
120 | - **Expansion to Other Databases:** Make dbHive available for other databases besides PostgreSQL.
121 | - **Comparing Schemas:** Allow users to compare the performance of alternate database schemas alongside their current schemas.
122 | - **Additional Customization:** Give users more power to customize graphs and dashboard arrangement.
123 |
124 | ### Authors
125 |
126 | - Melanie Forbes [GitHub](https://github.com/mforbz12) | [LinkedIn](https://www.linkedin.com/in/melanie-forbes-/)
127 | - Elise McConnell [GitHub](https://github.com/enmcco) | [LinkedIn](https://www.linkedin.com/in/elisemcconnell/)
128 | - Brandon Miller [GitHub](https://github.com/bmiller1881) | [LinkedIn](https://www.linkedin.com/in/brandon-j-miller/)
129 | - Emily Paine [GitHub](https://github.com/erpaine) | [LinkedIn](https://www.linkedin.com/in/emily-paine1/)
130 | - Jeffery Richardson [GitHub](https://github.com/jrichardson-rn) | [LinkedIn](https://www.linkedin.com/in/jeffery-richardson-ii-2ba819100/)
131 |
--------------------------------------------------------------------------------
/__tests__/__mocks__/fileMock.ts:
--------------------------------------------------------------------------------
1 | module.exports = {}
--------------------------------------------------------------------------------
/__tests__/jest-setup.js:
--------------------------------------------------------------------------------
1 | //spin up rds instance (if no charge) add to read me how to run tests on client db
2 | // eslint-disable-next-line @typescript-eslint/no-var-requires
3 | const regeneratorRuntime = require('regenerator-runtime');
4 |
5 | module.exports = () => {
6 | console.log('Test db setup');
7 | global.testServer = require('../server/server.ts');
8 | };
9 |
--------------------------------------------------------------------------------
/__tests__/jest-teardown.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | module.exports = async (globalConfig) => {
3 | console.log('Closing down test db');
4 | testServer.close();
5 | };
6 |
--------------------------------------------------------------------------------
/__tests__/supertests.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-var-requires
2 | const supertest = require('supertest');
3 | // eslint-disable-next-line @typescript-eslint/no-var-requires
4 | import { describe, it, expect, xdescribe, test } from '@jest/globals';
5 |
6 | // eslint-disable-next-line @typescript-eslint/no-var-requires
7 | const pg = require('pg');
8 |
9 | //Notice: dbtest_url is not a valid url and should be replaced with test db
10 | const dbtest_url = process.env.TEST_DB;
11 | const server = 'http://localhost:3000';
12 | const pool = new pg.Pool({
13 | connectionString: dbtest_url,
14 | });
15 |
16 | //testing the test config and setup
17 | describe('my test', () => {
18 | //test will pass
19 | test('passes', () => {
20 | expect(2).toEqual(2);
21 | });
22 | //test will fail
23 | test('fails', () => {
24 | expect(3).not.toEqual(2);
25 | });
26 | });
27 |
28 | describe('Connecting a database', () => {
29 | describe('connecting a URI key', () => {
30 | it('responds with a true valid URI key value', () => {
31 | const body = {
32 | uri: dbtest_url,
33 | };
34 | return supertest(server)
35 | .post('/api/uri')
36 | .send(body)
37 | .expect(200)
38 | .expect((res) => {
39 | expect(res.body.result.validURI).toBeTruthy();
40 | });
41 | });
42 | });
43 | });
44 |
45 | describe('Database data retrieval', () => {
46 | describe('connecting a valid URI key', () => {
47 | //a valid response would be an object containing lots of data to be rendered
48 | it('responds with a valid response', () => {
49 | const body = {
50 | uri: dbtest_url,
51 | };
52 | return supertest(server)
53 | .post('/api/queryMetrics')
54 | .send(body)
55 | .expect(200)
56 | .expect('Content-Type', /application\/json/)
57 | .expect((res) => {
58 | expect(typeof res).toEqual('object');
59 | });
60 | });
61 | //the response contains the keys that will be needed to render data
62 | it('responds with data in the expected keys', () => {
63 | const body = {
64 | uri: dbtest_url,
65 | };
66 | return supertest(server)
67 | .post('/api/queryMetrics')
68 | .send(body)
69 | .expect((res) => {
70 | expect(res.body.allTimes).toBeTruthy();
71 | expect(res.body.avgTimeTopAllCalls).toBeTruthy();
72 | expect(res.body.avgTimeTopDeleteCalls).toBeTruthy();
73 | expect(res.body.avgTimeTopInsertCalls).toBeTruthy();
74 | expect(res.body.avgTimeTopSelectCalls).toBeTruthy();
75 | expect(res.body.avgTimeTopUpdateCalls).toBeTruthy();
76 | expect(res.body.conflicts).toBeTruthy();
77 | expect(res.body.dbStats).toBeTruthy();
78 | expect(res.body.deadlocks).toBeTruthy();
79 | expect(res.body.deleteTimes).toBeTruthy();
80 | expect(res.body.insertTimes).toBeTruthy();
81 | expect(res.body.numOfRows).toBeTruthy();
82 | expect(res.body.rolledBackTransactions).toBeTruthy();
83 | expect(res.body.selectTimes).toBeTruthy();
84 | expect(res.body.transactionsCommitted).toBeTruthy();
85 | expect(res.body.updateTimes).toBeTruthy();
86 | expect(res.body.cacheHitRatio).toBeTruthy();
87 | });
88 | });
89 | });
90 | xdescribe('connecting an invalid URI key', () => {
91 | //an invalid key results in a bad request error
92 | it('responds with an error', () => {
93 | const body = {
94 | uri: 'postgres://xxxx:xxxxx@xxxxx.hostname.com:5432/databasename',
95 | };
96 | return supertest(server).post('/api/queryMetrics').send(body).expect(400);
97 | });
98 | });
99 | });
100 |
--------------------------------------------------------------------------------
/__tests__/test components/dashboard.test.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { render, screen, fireEvent } from '@testing-library/react';
3 | import { BrowserRouter } from 'react-router-dom';
4 | import Dashboard from '../../client/pages/Dashboard';
5 | import {
6 | describe,
7 | it,
8 | expect,
9 | xdescribe,
10 | beforeEach,
11 | beforeAll,
12 | test,
13 | } from '@jest/globals';
14 |
15 | describe('Dashboard Page', () => {
16 | let dashboardComp;
17 | const props = {};
18 |
19 | beforeEach(async () => {
20 | const loginComp = await render(
21 |
22 |
23 |
24 | );
25 | });
26 | test('if no DB has been connected, button prompts connecting one', async () => {
27 | expect(screen.getByText('Please connect a database')).toBeInTheDocument();
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/__tests__/test components/login.test.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { render, screen, fireEvent } from '@testing-library/react';
3 | import { BrowserRouter } from 'react-router-dom';
4 | import Login from '../../client/pages/Login';
5 | import {
6 | describe,
7 | it,
8 | expect,
9 | xdescribe,
10 | beforeEach,
11 | beforeAll,
12 | test,
13 | } from '@jest/globals';
14 |
15 | describe('Login Page', () => {
16 | let loginComp;
17 | const props = {};
18 |
19 | beforeEach(async () => {
20 | const loginComp = await render(
21 |
22 |
23 |
24 | );
25 | });
26 | test('Submit button rendered', async () => {
27 | const buttons = await screen.getAllByRole('button', { name: 'Submit' });
28 | expect(buttons.length).toBe(1);
29 | });
30 | //this value is 2 because it inclues the navbar button and the button on the main component
31 | test('Sign Up button rendered', async () => {
32 | const buttons = await screen.getAllByRole('button', { name: 'Sign Up' });
33 | expect(buttons.length).toBe(2);
34 | });
35 | //makes sure inputs are available
36 | test('Username input field to be rendered', async () => {
37 | //only text input is available by textbox role.
38 | expect(
39 | screen.getByRole('textbox', { name: 'Username:' })
40 | ).toBeInTheDocument();
41 | });
42 | test('Login header', async () => {
43 | const header = await screen.getByTestId('login-header');
44 | expect(header).toBeInTheDocument();
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/__tests__/test components/signup.test.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { render, screen, fireEvent } from '@testing-library/react';
3 | import { BrowserRouter } from 'react-router-dom';
4 | import Signup from '../../client/pages/Signup';
5 | import {
6 | describe,
7 | it,
8 | expect,
9 | xdescribe,
10 | beforeEach,
11 | test,
12 | } from '@jest/globals';
13 |
14 | describe('Signup Page', () => {
15 | let signupComp;
16 |
17 | beforeEach(async () => {
18 | const signupComp = await render(
19 |
20 |
21 |
22 | );
23 | });
24 |
25 | test('Submit button rendered', async () => {
26 | const buttons = await screen.getAllByRole('button', { name: 'Submit' });
27 | expect(buttons.length).toBe(1);
28 | });
29 |
30 | test('Username input rendered', () => {
31 | expect(
32 | screen.getByRole('textbox', { name: 'Username:' })
33 | ).toBeInTheDocument();
34 | });
35 |
36 | test('Signup header', async () => {
37 | const header = await screen.getByTestId('signup-header');
38 | expect(header).toBeInTheDocument();
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {presets: ['@babel/preset-env', '@babel/preset-react']}
--------------------------------------------------------------------------------
/client/App.tsx:
--------------------------------------------------------------------------------
1 | // import dependencies
2 | import * as React from 'react';
3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom';
4 | import { QueryClientProvider, QueryClient } from 'react-query';
5 | import { ReactQueryDevtools } from 'react-query/devtools';
6 | import { ThemeProvider, createTheme } from '@mui/material/styles';
7 | import CssBaseline from '@mui/material/CssBaseline';
8 |
9 | // import react components
10 | import Docs from './pages/Docs';
11 | import Dashboard from './pages/Dashboard';
12 | import Login from './pages/Login';
13 | import Signup from './pages/Signup';
14 | import Setup from './pages/Setup';
15 |
16 | // import utilities
17 | import useAppStore from './store/appStore';
18 | import { UserData } from './clientTypes';
19 | import { seedDBs } from './clientMode';
20 |
21 | // custom MUI theme
22 | const darkTheme = createTheme({
23 | palette: {
24 | mode: 'dark',
25 | primary: {
26 | main: '#ffd900',
27 | },
28 | secondary: {
29 | main: '#134e00',
30 | },
31 | },
32 | typography: {
33 | fontFamily: [
34 | '-apple-system',
35 | 'BlinkMacSystemFont',
36 | '"Segoe UI"',
37 | 'Roboto',
38 | '"Helvetica Neue"',
39 | 'Arial',
40 | 'sans-serif',
41 | '"Apple Color Emoji"',
42 | '"Segoe UI Emoji"',
43 | '"Segoe UI Symbol"',
44 | ].join(','),
45 | },
46 | });
47 |
48 | function App() {
49 | const queryClient = new QueryClient();
50 |
51 | // update user data with seed data if given
52 | const updateUserData = useAppStore((state) => state.updateUserData);
53 | const initialUserData: UserData = {
54 | decryption: 'isValid',
55 | dbs: seedDBs,
56 | };
57 | updateUserData(initialUserData);
58 |
59 | const router = createBrowserRouter([
60 | {
61 | path: '/',
62 | element: ,
63 | },
64 | {
65 | path: '/setup',
66 | element: ,
67 | },
68 | {
69 | path: '/login',
70 | element: ,
71 | },
72 | {
73 | path: '/signup',
74 | element: ,
75 | },
76 | {
77 | path: '/dashboard',
78 | element: ,
79 | },
80 | ]);
81 |
82 | return (
83 | <>
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | );
93 | }
94 |
95 | export default App;
96 |
--------------------------------------------------------------------------------
/client/assets/connect-to-db.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/connect-to-db.gif
--------------------------------------------------------------------------------
/client/assets/db-metrics.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/db-metrics.gif
--------------------------------------------------------------------------------
/client/assets/dbhive-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/dbhive-logo.png
--------------------------------------------------------------------------------
/client/assets/dbhive_logo_transparent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/dbhive_logo_transparent.png
--------------------------------------------------------------------------------
/client/assets/icons8-hexagon-office-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/icons8-hexagon-office-16.png
--------------------------------------------------------------------------------
/client/assets/icons8-hexagon-office-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/icons8-hexagon-office-32.png
--------------------------------------------------------------------------------
/client/assets/icons8-hexagon-office-96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/icons8-hexagon-office-96.png
--------------------------------------------------------------------------------
/client/assets/postgresql_elephant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/postgresql_elephant.png
--------------------------------------------------------------------------------
/client/assets/toggle-dbs.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/toggle-dbs.gif
--------------------------------------------------------------------------------
/client/assets/yellow_hex.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/dbhive/64f440be09f0b0d0d4b8323f49fbd82294ec0aff/client/assets/yellow_hex.png
--------------------------------------------------------------------------------
/client/clientMode.ts:
--------------------------------------------------------------------------------
1 | import { UserData } from './clientTypes';
2 |
3 | /*
4 | toggleDashboardAuth default = true, use for production
5 | toggleDashboardAuth = false, deactivates dashboard page authorization
6 | allowing navigation to the page without having to be logged in
7 | */
8 | const toggleDashboardAuth = true;
9 |
10 | /*
11 | seedDBs default = [], use for production
12 | Seed db data so that developers do not have to login to see data displayed on the dashboard
13 | below is the format for seedDBs:
14 | [
15 | {
16 | nickname: 'dbNickname',
17 | uri: 'postgres://username:passsord@hostname:5432/databaseName',
18 | },
19 | ]
20 | */
21 |
22 | const seedDBs: UserData['dbs'] = [];
23 |
24 | export { toggleDashboardAuth, seedDBs };
25 |
--------------------------------------------------------------------------------
/client/clientTypes.ts:
--------------------------------------------------------------------------------
1 | export type UserData = {
2 | decryption: string;
3 | dbs: { nickname: string; uri: string }[];
4 | };
5 |
6 | export type DbData = {
7 | nickname: string;
8 | uri: string;
9 | };
10 |
--------------------------------------------------------------------------------
/client/components/CollapseList.tsx:
--------------------------------------------------------------------------------
1 | // import dependencies
2 | import * as React from 'react';
3 | import { useState } from 'react';
4 | import List from '@mui/material/List';
5 | import ListItemButton from '@mui/material/ListItemButton';
6 | import ListItemText from '@mui/material/ListItemText';
7 | import Collapse from '@mui/material/Collapse';
8 | import ExpandLess from '@mui/icons-material/ExpandLess';
9 | import ExpandMore from '@mui/icons-material/ExpandMore';
10 |
11 | type Props = {
12 | label?: string;
13 | content?: JSX.Element | JSX.Element[] | string;
14 | };
15 |
16 | export default function CollapseList(props: Props) {
17 | const [open, setOpen] = useState(false);
18 |
19 | const handleClick = () => {
20 | setOpen(!open);
21 | };
22 |
23 | return (
24 |
25 |
26 |
27 | {open ? : }
28 |
29 |
35 | {props.content}
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/client/components/ConnectDB.tsx:
--------------------------------------------------------------------------------
1 | // import dependencies
2 | import * as React from 'react';
3 | import { useState } from 'react';
4 | import { set } from 'idb-keyval';
5 | import AES from 'crypto-js/aes';
6 | import { Card, Button, Typography, Divider, Alert } from '@mui/material';
7 |
8 | // import react components
9 | import Input from './Input';
10 |
11 | // import utilities
12 | import useAppStore from '../store/appStore';
13 |
14 | function ConnectDB() {
15 | const username = useAppStore((state) => state.username);
16 | const secret = useAppStore((state) => state.secret);
17 | const userData = useAppStore((state) => state.userData);
18 | const updateUserData = useAppStore((state) => state.updateUserData);
19 |
20 | const [submitAlert, setSubmitAlert] = useState(null);
21 | const [nickname, setNickname] = useState('');
22 | const [uri, setUri] = useState('');
23 | const [host, setHost] = useState('');
24 | const [port, setPort] = useState('5432');
25 | const [database, setDatabase] = useState('');
26 | const [dBUsername, setDBUsername] = useState('');
27 | const [password, setPassword] = useState('');
28 |
29 | // depending on the button clicked, the data submitted either comes from the complete uri string
30 | // or the separated out version
31 | function submitHandler(type: string) {
32 | const copyUserData = { ...userData };
33 | if (type === 'uri') {
34 | copyUserData.dbs.push({
35 | nickname: nickname,
36 | uri: uri,
37 | });
38 | } else if (type === 'separate') {
39 | copyUserData.dbs.push({
40 | nickname: nickname,
41 | uri: `postgres://${dBUsername}:${password}@${host}:${port}/${database}`,
42 | });
43 | }
44 |
45 | updateUserData(copyUserData);
46 |
47 | const ciphertext = AES.encrypt(
48 | JSON.stringify(copyUserData),
49 | secret
50 | ).toString();
51 | set(username, ciphertext).catch((err) => {
52 | console.log('IndexedDB: set failed', err);
53 | });
54 |
55 | setNickname('');
56 | setUri('');
57 | setHost('');
58 | setPort('5432');
59 | setDatabase('');
60 | setDBUsername('');
61 | setPassword('');
62 | setSubmitAlert(
63 |
72 | A new DB has been added
73 |
74 | );
75 | setTimeout(() => {
76 | setSubmitAlert(null);
77 | }, 5000);
78 | }
79 |
80 | return (
81 | <>
82 | {submitAlert}
83 |
93 |
98 | Connect to new DB
99 |
100 |
106 |
107 |
113 |
120 |
126 |
132 |
138 |
144 |
151 |
158 |
159 |
160 | );
161 | }
162 |
163 | export default ConnectDB;
164 |
--------------------------------------------------------------------------------
/client/components/DBTab.tsx:
--------------------------------------------------------------------------------
1 | // import dependencies
2 | import * as React from 'react';
3 | import { useState } from 'react';
4 | import {
5 | Box,
6 | InputLabel,
7 | Select,
8 | SelectChangeEvent,
9 | MenuItem,
10 | } from '@mui/material';
11 |
12 | // import react components
13 | import MetricCard from './MetricCard';
14 | import LineGraphType1 from './LineGraphType1';
15 | import LineGraphType2 from './LineGraphType2';
16 | import PieGraphType1 from './PieGraphType1';
17 |
18 | // import utilities
19 | import { useQueryMetrics } from '../store/rqHooks';
20 |
21 | type Props = {
22 | dbUri: string;
23 | };
24 |
25 | function DBTab(props: Props) {
26 | const [refetchInterval, setRefetchInterval] = useState(15000);
27 |
28 | // react-query custom hook for fetching db metrics from backend
29 | const { isLoading, isError, data } = useQueryMetrics(
30 | ['dbMetrics', props.dbUri],
31 | props.dbUri,
32 | refetchInterval
33 | );
34 |
35 | const handleChangeInterval = (event: SelectChangeEvent) => {
36 | setRefetchInterval(Number(event.target.value));
37 | };
38 |
39 | // coniditonal rendering if error received from fetch
40 | if (isError) {
41 | return (
42 |
43 |
51 | status: request failed!
52 |
53 |
54 | );
55 | } else if (isLoading) {
56 | // coniditonal rendering if fetch has not returned yet
57 | return (
58 |
59 |
67 | status: connecting to db...
68 |
69 |
70 | );
71 | } else {
72 | /* coniditonal rendering if fetch has returned successfully
73 | data sent to child components utilizes optional chaining operators to protect
74 | from fatal errors when nested properties are being accessed in data returned from fetch */
75 | return (
76 |
3 |