Skip to content

Commit

Permalink
Merge pull request #175 from migalabs/feat-migration-clickhouse
Browse files Browse the repository at this point in the history
Migration Database to Clickhouse
  • Loading branch information
IuriPons authored Aug 1, 2024
2 parents 9e7812c + dcd98de commit 3eccf79
Show file tree
Hide file tree
Showing 23 changed files with 1,190 additions and 862 deletions.
4 changes: 2 additions & 2 deletions packages/client/components/ui/LinkEntity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ type Props = {
const LinkEntity = ({ entity, children, mxAuto }: Props) => {
return (
<NetworkLink
href={`/entity/${entity ?? 'others'}`}
href={`/entity/${entity || 'others'}`}
passHref
className={`flex gap-x-1 items-center text-[14px] md:text-[16px] font-medium md:hover:underline underline-offset-4 decoration-2 w-fit uppercase text-[var(--darkPurple)] dark:text-[var(--purple)] ${
mxAuto ? 'mx-auto' : ''
}`}
>
{children ?? (
<>
<p className='break-all'>{entity ?? 'Others'}</p>
<p className='break-all'>{entity || 'Others'}</p>
<LinkIcon />
</>
)}
Expand Down
22 changes: 16 additions & 6 deletions packages/client/components/ui/ProgressSmoothBar.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from 'react';

// Components
import TooltipContainer from './TooltipContainer';
import TooltipResponsive from './TooltipResponsive';

type Props = {
title?: string;
percent: number;
percent?: number;
text?: string;
color: string;
backgroundColor: string;
tooltipColor?: string;
Expand All @@ -19,6 +18,7 @@ type Props = {
const ProgressSmoothBar = ({
title,
percent,
text,
color,
backgroundColor,
tooltipColor,
Expand All @@ -27,7 +27,13 @@ const ProgressSmoothBar = ({
widthTooltip,
tooltipAbove,
}: Props) => {
const widthInnerDiv = percent > 0 ? Math.min(Number(percent * 100), 100).toFixed(0) : 100;
const shouldDisplayPercent = percent !== undefined;

const widthInnerDiv = shouldDisplayPercent
? percent > 0
? Math.min(Number(percent * 100), 100).toFixed(0)
: 100
: 100;

return (
<div className='text-center'>
Expand All @@ -38,7 +44,9 @@ const ProgressSmoothBar = ({
{tooltipColor && tooltipContent ? (
<TooltipContainer>
<p className='font-medium' style={{ color, cursor: 'default' }}>
{Number(Number(percent * 100).toFixed(2)).toLocaleString()}%
{shouldDisplayPercent
? `${Number(Number(percent * 100).toFixed(2)).toLocaleString()}%`
: text}
</p>

<TooltipResponsive
Expand All @@ -49,7 +57,9 @@ const ProgressSmoothBar = ({
</TooltipContainer>
) : (
<p className='font-medium' style={{ color, cursor: 'default' }}>
{Number(Number(percent * 100).toFixed(2)).toLocaleString()}%
{shouldDisplayPercent
? `${Number(Number(percent * 100).toFixed(2)).toLocaleString()}%`
: text}
</p>
)}
</div>
Expand Down
12 changes: 6 additions & 6 deletions packages/client/components/ui/SummaryOverview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const SummaryOverview = () => {

// States
const [summary, setSummary] = useState<Summary | null>(null);
const [lastValidator, setLastValidator] = useState(null);
const [countActiveValidators, setCountActiveValidators] = useState(0);

useEffect(() => {
if (blocks && blocks.epochs) {
Expand All @@ -41,7 +41,7 @@ const SummaryOverview = () => {
setSummary({ epoch: lastEpochAux, slot: lastSlotAux, block_height: lastBlockAux });
}

if (network && !lastValidator) {
if (network && !countActiveValidators) {
getLastValidator();
}

Expand All @@ -50,21 +50,21 @@ const SummaryOverview = () => {

const getLastValidator = async () => {
try {
const response = await axiosClient.get('/api/validators/last', {
const response = await axiosClient.get('/api/validators/count-active-validators', {
params: {
network,
},
});

setLastValidator(response.data.number_active_validators);
setCountActiveValidators(response.data.count_active_validators);
} catch (error) {
console.log(error);
}
};

return (
<>
{summary && lastValidator !== 0 && (
{summary && countActiveValidators !== 0 && (
<div className='mb-5'>
<div className='grid mx-auto grid-row-5 xl:flex xl:flex-wrap justify-around items-center gap-1 xl:gap-10 text-center text-[14px] rounded-md py-4 px-8 xl:px-8 xl:py-3 w-11/12 md:w-9/12 border text-[var(--black)] dark:text-[var(--white)] bg-[var(--bgMainLightMode)] dark:bg-[var(--bgDarkMode)] border-[var(--lightGray)] dark:border-[var(--white)]'>
<p>
Expand All @@ -85,7 +85,7 @@ const SummaryOverview = () => {
</p>
<span className='lg:w-[1px] lg:h-6 lg:bg-gray-400'></span>
<p className=''>
<b className='font-semibold'>Active Validators:</b> {lastValidator ?? 0}
<b className='font-semibold'>Active Validators:</b> {countActiveValidators ?? 0}
</p>
</div>
</div>
Expand Down
23 changes: 14 additions & 9 deletions packages/client/pages/entity/[name].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,12 @@ const EntityComponent = ({ name, network }: Props) => {
title=''
color='var(--black)'
backgroundColor='var(--white)'
percent={entity.aggregated_rewards / entity.aggregated_max_rewards || 0}
percent={
entity.aggregated_rewards >= 0
? entity.aggregated_rewards / entity.aggregated_max_rewards || 0
: undefined
}
text={entity.aggregated_rewards < 0 ? `${entity.aggregated_rewards} GWEI` : undefined}
tooltipColor='blue'
tooltipContent={
<>
Expand Down Expand Up @@ -154,15 +159,15 @@ const EntityComponent = ({ name, network }: Props) => {
{entity && (
<div className='flex flex-col xl:flex-row items-center gap-x-4 gap-y-2 font-medium text-[12px] md:text-[14px] text-[var(--black)] dark:text-[var(--white)]'>
<ProgressSmoothBar
title='Target'
title='Source'
color='var(--black)'
backgroundColor='var(--white)'
percent={1 - entity.count_missing_target / entity.count_expected_attestations}
percent={1 - entity.count_missing_source / entity.count_expected_attestations}
width={300}
tooltipColor='orange'
tooltipColor='blue'
tooltipContent={
<>
<span>Missing Target: {entity.count_missing_target?.toLocaleString()}</span>
<span>Missing Source: {entity.count_missing_source?.toLocaleString()}</span>
<span>
Attestations: {entity.count_expected_attestations?.toLocaleString()}
</span>
Expand All @@ -172,15 +177,15 @@ const EntityComponent = ({ name, network }: Props) => {
/>

<ProgressSmoothBar
title='Source'
title='Target'
color='var(--black)'
backgroundColor='var(--white)'
percent={1 - entity.count_missing_source / entity.count_expected_attestations}
percent={1 - entity.count_missing_target / entity.count_expected_attestations || 0}
width={300}
tooltipColor='blue'
tooltipColor='orange'
tooltipContent={
<>
<span>Missing Source: {entity.count_missing_source?.toLocaleString()}</span>
<span>Missing Target: {entity.count_missing_target?.toLocaleString()}</span>
<span>
Attestations: {entity.count_expected_attestations?.toLocaleString()}
</span>
Expand Down
4 changes: 4 additions & 0 deletions packages/database/clickhouse-overviewer/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
DB_USER=
DB_HOST=
DB_NAME=
DB_PASSWORD=
60 changes: 60 additions & 0 deletions packages/database/clickhouse-overviewer/app.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { createClient } from '@clickhouse/client';
import dotenv from 'dotenv';

dotenv.config();

const client = createClient({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME,
});

interface Table {
name: string;
}

interface Column {
name: string;
type: string;
}

const fetchTables = async (): Promise<Table[]> => {

const resultSet = await client.query({
query: 'SHOW TABLES',
format: 'JSONEachRow',
});

return resultSet.json();
}

const fetchColumns = async (table: string): Promise<Column[]> => {

const resultSet = await client.query({
query: `DESCRIBE ${table}`,
format: 'JSONEachRow',
});

return resultSet.json();
}

const printSchema = async () => {

const tables = await fetchTables();

console.log('Database Schema:\n');

for (const table of tables) {

console.log(`- ${table.name}`);

const columns = await fetchColumns(table.name);

for (const column of columns) {
console.log(` - ${column.name} (${column.type})`);
}
}
};

printSchema();
47 changes: 47 additions & 0 deletions packages/database/clickhouse-overviewer/package-lock.json

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

22 changes: 22 additions & 0 deletions packages/database/clickhouse-overviewer/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "clickhouse-overviewer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx tsc",
"start": "node dist/app.js",
"launch": "npm run build && npm start"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^20.12.7",
"typescript": "^5.4.5"
},
"dependencies": {
"@clickhouse/client": "^0.2.10",
"dotenv": "^16.4.5"
}
}
11 changes: 11 additions & 0 deletions packages/database/clickhouse-overviewer/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
},
"lib": ["es2015"]
}
Loading

0 comments on commit 3eccf79

Please sign in to comment.