Skip to content

Commit

Permalink
Migrate dashboard to v2 api and stats-api (#113)
Browse files Browse the repository at this point in the history
* Migrate to explorer-stats-api

* Fix tooltip, customtimeago, explorer urls, network switch, network status and some clean-up

* Add Age and Accounts cards and fix security chart

* Clean-up, fix CI
  • Loading branch information
kacpersaw authored Oct 17, 2024
1 parent ede678a commit 8317257
Show file tree
Hide file tree
Showing 12 changed files with 211 additions and 220 deletions.
42 changes: 3 additions & 39 deletions .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -19,49 +19,13 @@ jobs:
- name: Build to Mainnet Dashboard
env:
REACT_APP_DISCOVERY_SERVICE_URL: https://configs.spacemesh.network/networks.json
REACT_APP_LABELS_PER_UNIT: 4294967296
run: |
yarn
yarn build
- name: Upload to Mainnet Dashboard
run: gsutil -m rsync -r -d ./build gs://spacemesh-dash

- name: Build to testnet-15 Dashboard
env:
REACT_APP_DISCOVERY_SERVICE_URL: https://configs.spacemesh.network/networks-testnet-15.json
run: |
yarn
yarn build
- name: Upload to testnet-15 Dashboard
run: gsutil -m rsync -r -d ./build gs://testnet-15-dashboard.spacemesh.network

- name: Build to testnet-atxmerge2 Dashboard
env:
REACT_APP_DISCOVERY_SERVICE_URL: https://configs.spacemesh.network/networks-testnet-atxmerge2.json
run: |
yarn
yarn build
- name: Upload to testnet-atxmerge2 Dashboard
run: gsutil -m rsync -r -d ./build gs://testnet-atxmerge2-dashboard.spacemesh.network

- name: Build to testnet-atxmerge3 Dashboard
env:
REACT_APP_DISCOVERY_SERVICE_URL: https://configs.spacemesh.network/networks-testnet-atxmerge3.json
run: |
yarn
yarn build
- name: Upload to testnet-atxmerge3 Dashboard
run: gsutil -m rsync -r -d ./build gs://testnet-atxmerge3-dashboard.spacemesh.network

- name: Build to testnet-hare-4 Dashboard
env:
REACT_APP_DISCOVERY_SERVICE_URL: https://configs.spacemesh.network/networks-testnet-hare-4.json
run: |
yarn
yarn build
- name: Upload to testnet-hare-4 Dashboard
run: gsutil -m rsync -r -d ./build gs://testnet-hare-4-dashboard.spacemesh.network
- name: Set cache-control headers for Mainnet Dashboard
run: gsutil -m setmeta -h "Cache-Control:public, max-age=0, no-transform" -r gs://spacemesh-dash/index.html
14 changes: 0 additions & 14 deletions src/api/fetchAPI.js

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/Layout/Header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Header = ({ checkedTheme, switchTheme }: Props) => {
},
{
href: toJS(viewStore.network.explorer),
title: 'explore',
title: 'explorer',
},
];

Expand Down
48 changes: 25 additions & 23 deletions src/components/atoms/BarChartCustom/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,54 @@ import React from 'react';
import {
BarChart,
Bar,
ResponsiveContainer,
Tooltip,
ResponsiveContainer, Tooltip,
} from 'recharts';

import CustomTimeAgo from '../CustomTimeAgo';

type Props = {
data: Array;
dataMeasure?: string,
tooltipFilter?: Function,
data: Array;
dataMeasure?: string,
tooltipFilter?: Function,
}

const CustomizedTooltip = ({ active, payload, tooltipFilter, dataMeasure }) => {
if (active) {
const { epoch, age } = payload[0].payload;
if (active && payload && payload.length) {
const dataValue = tooltipFilter ? tooltipFilter(payload[0].value) : payload[0].value;

return (
active && (
<div className="custom-tooltip">
<p className="custom-tooltip_label">{`${dataValue} ${dataMeasure}`}</p>
<p className="custom-tooltip_label">
<CustomTimeAgo live={false} time={age} />
<CustomTimeAgo live={false} time={payload[0].payload.timestamp} />
</p>
<p className="custom-tooltip_label">
Epoch&nbsp;
{epoch}
{payload[0].payload.number}
</p>
</div>
)
);
}
};

const BarChartCustom = ({ data, dataMeasure, tooltipFilter }: Props) => (
<ResponsiveContainer width="100%" height={124}>
{data.length > 0
? (
<BarChart data={data}>
<Bar dataKey="amt" barSize={2} />
<Tooltip content={<CustomizedTooltip tooltipFilter={tooltipFilter} dataMeasure={dataMeasure} />} />
</BarChart>
) : (
<div />
)}
</ResponsiveContainer>
);
const BarChartCustom = ({ data, dataKey, tooltipFilter, dataMeasure }: Props) => {
const d = Object.keys(data).map((key) => ({
...data[key],
}));
return (
<ResponsiveContainer width="100%" height={124}>
{Object.keys(data).length > 0
? (
<BarChart data={d}>
<Bar dataKey={dataKey} barSize={2} />
<Tooltip content={<CustomizedTooltip tooltipFilter={tooltipFilter} dataMeasure={dataMeasure} />} />
</BarChart>
) : (
<div />
)}
</ResponsiveContainer>
);
};

export default BarChartCustom;
5 changes: 1 addition & 4 deletions src/components/atoms/CustomTimeAgo/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@ type Props = {
};

const CustomTimeAgo = ({ time, live }: Props) => {
const now = new Date().getTime().toString();

const currentTimestamp = now.substring(0, now.length - 3);
const jsDate = new Date((+currentTimestamp - (time)) * 1000);
const jsDate = new Date(time * 1000);

return (
<span>
Expand Down
4 changes: 0 additions & 4 deletions src/config/constants.js

This file was deleted.

4 changes: 0 additions & 4 deletions src/contextProviders/layoutContext.js

This file was deleted.

3 changes: 1 addition & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@ import App from './App';

import ViewStore, { ViewStoreProvider } from './store/ViewStore';
import UiStore, { UiStoreProvider } from './store/UiStore';
import { fetchAPI } from './api/fetchAPI';
import reportWebVitals from './reportWebVitals';

const viewStore = new ViewStore(fetchAPI);
const viewStore = new ViewStore();
const uiStore = new UiStore();

const container = document.getElementById('root');
Expand Down
Loading

0 comments on commit 8317257

Please sign in to comment.