Skip to content

Commit

Permalink
feat(cacti-cmd-gui-app): add GUI to visualize Fabric, Ethereum blocks
Browse files Browse the repository at this point in the history
Right now supporting two ledgers
- Hyperledger Fabric
- Ethereum

Updates from Peter to fix the CI checks:
1. The build:dev:backend script was broken, fixed it by removing the
clean, lint, codegen scripts which were removed earlier but this change
was trying to add them back for some reason.
2. Frontend package build (build:dev:frontend) was broken, fixed it by
correcting the polyfills for both the carbon accounting and the supply
chain example packages.
3. The build:dev:frontend script in the package.json in the root was
spawning more processes than it needed to. A single lerna invocation
with the appropriate filters can capture and run the build scripts in
all 3 of the packages. The entire point of lerna is to do this instead of
repeating 3 commands when you want to run 3 scripts in 3 packages so now
the way the npm script is written adheres to this convention.

Co-authored-by: Peter Somogyvari <peter.somogyvari@accenture.com>

Signed-off-by: Barnaba Pawelczak <barnaba.pawelczak@fujitsu.com>
Signed-off-by: Peter Somogyvari <peter.somogyvari@accenture.com>
  • Loading branch information
barnapa authored and petermetz committed Jul 20, 2023
1 parent 61ea36f commit 15d9e9d
Show file tree
Hide file tree
Showing 85 changed files with 4,648 additions and 131 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,8 @@
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
]
],
"analytics": false
},
"schematics": {
"@ionic/angular-toolkit:component": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,12 @@
"@angular/compiler-cli": "15.2.9",
"@angular/language-service": "15.2.9",
"@ionic/angular-toolkit": "9.0.0",
"browserify-fs": "1.0.0",
"https-browserify": "1.0.0",
"net-browserify": "0.2.4",
"os-browserify": "0.3.0",
"path-browserify": "1.0.1"
"path-browserify": "1.0.1",
"tls-browserify": "0.2.2"
},
"engines": {
"node": ">=10",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@ module.exports = {
fallback: {
crypto: require.resolve("crypto-browserify"),
buffer: require.resolve("buffer/"),
fs: require.resolve("browserify-fs"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
net: require.resolve("net-browserify"),
os: require.resolve("os-browserify/browser"),
path: require.resolve("path-browserify"),
stream: require.resolve("stream-browserify"),
tls: require.resolve("tls-browserify"),
zlib: require.resolve("browserify-zlib"),
},
},
Expand Down
8 changes: 7 additions & 1 deletion examples/cactus-example-supply-chain-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,13 @@
"@angular/compiler": "15.2.9",
"@angular/compiler-cli": "15.2.9",
"@angular/language-service": "15.2.9",
"@ionic/angular-toolkit": "9.0.0"
"@ionic/angular-toolkit": "9.0.0",
"browserify-fs": "1.0.0",
"https-browserify": "1.0.0",
"net-browserify": "0.2.4",
"os-browserify": "0.3.0",
"path-browserify": "1.0.1",
"tls-browserify": "0.2.2"
},
"engines": {
"node": ">=10",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,14 @@ module.exports = {
constants: require.resolve("constants-browserify"),
crypto: require.resolve("crypto-browserify"),
buffer: require.resolve("buffer/"),
fs: require.resolve("browserify-fs"),
net: require.resolve("net-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
path: require.resolve("path-browserify"),
stream: require.resolve("stream-browserify"),
tls: require.resolve("tls-browserify"),
zlib: require.resolve("browserify-zlib"),
},
},
Expand Down
3 changes: 3 additions & 0 deletions lerna.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
"packages/cactus-*",
"examples/cactus-*",
"extensions/cactus-*",
"packages/cacti-*",
"examples/cacti-*",
"extensions/cacti-*",
"weaver/common/protos-js",
"weaver/sdks/fabric/interoperation-node-sdk",
"weaver/sdks/besu/node",
Expand Down
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
"packages/cactus-*",
"examples/cactus-*",
"extensions/cactus-*",
"packages/cacti-*",
"examples/cacti-*",
"extensions/cacti-*",
"weaver/common/protos-js",
"weaver/sdks/fabric/interoperation-node-sdk",
"weaver/sdks/besu/node",
Expand Down Expand Up @@ -57,7 +60,7 @@
"build:prod:frontend": "lerna run build:prod:frontend",
"build:dev": "npm-run-all build:dev:backend webpack:dev:web build:dev:frontend",
"build:dev:backend": "npm-run-all tsc build:dev:backend:postbuild",
"build:dev:frontend": "lerna run build:dev:frontend --scope=\"@hyperledger/cactus-example-supply-chain-frontend\" && lerna run build:dev:frontend --scope=\"@hyperledger/cactus-example-carbon-accounting-frontend\"",
"build:dev:frontend": "lerna run build:dev:frontend --scope='@hyperledger/cactus-example-*-frontend' --scope='@hyperledger/cacti-cmd-gui-app'",
"build:dev:common": "lerna exec --stream --scope '*/*common' -- 'del-cli dist/** && tsc --project ./tsconfig.json && webpack --env=dev --target=node --config ../../webpack.config.js'",
"build:dev:backend:postbuild": "lerna run build:dev:backend:postbuild",
"test:cmd-api-server": "tap --ts --timeout=600 \"packages/cactus-*cmd-api-server/src/test/typescript/{unit,integration}/\"",
Expand Down
61 changes: 61 additions & 0 deletions packages/cacti-cmd-gui-app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# `@hyperledger/cacti-cmd-gui-app`

This component allows viewing ledger data in Supabase or other postgreSQL compatible database. The data is fed to supabase by persistence plugins for each ledgers.

## Summary

- [`@hyperledger/cacti-cmd-gui-app`](#hyperledgercacti-cmd-gui-app)
- [Summary](#summary)
- [Remarks](#remarks)
- [Getting Started](#getting-started)
- [Prerequisites using yarn](#prerequisites-using-yarn)
- [Alternative Prerequisites using npm](#alternative-prerequisites-using-npm)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Acknowledgments](#acknowledgments)

## Remarks

- Plugin requires running Supabase or other database and persistence plugins in order to properly view ledger data.
- Currently, fabric and ethereum based ledgers are supported.

## Getting Started

Clone the git repository on your local machine. Follow these instructions that will get you a copy of the project up and running on your local machine for development and testing purposes.

### Prerequisites using yarn

In the root of the project, execute the command to install and build the dependencies. It will also build this GUI front-end component:

```sh
yarn run build
```
### Alternative Prerequisites using npm

In the root of the project, execute the command to install and build the dependencies. It will also build this GUI front-end component:

```sh
npm install
```

### Usage
- Run Supabase instance (see documentation for detailed instructions). For development purposes, you can use our image located in `tools/docker/supabase-all-in-one`.
- Run one or more persistence plugins:
- [Ethereum](../cacti-plugin-persistence-ethereum)
- [Fabric] (../cacti-plugin-persistence-fabric)
- Edit [Supabase configuration file](./src/supabase-client.tsx), set correct supabase API URL and service_role key.
- Execute `yarn run start` or `npm start` in this package directory.
- The running application address: http://localhost:3001/ (can be changed in [Vite configuration](./vite.config.ts))

## Contributing

We welcome contributions to Hyperledger Cacti in many forms, and there’s always plenty to do!

Please review [CONTIRBUTING.md](../../CONTRIBUTING.md) to get started.

## License

This distribution is published under the Apache License Version 2.0 found in the [LICENSE](../../LICENSE) file.

## Acknowledgments
16 changes: 16 additions & 0 deletions packages/cacti-cmd-gui-app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Cacti GUI</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script src="/src/index.tsx" type="module"></script>
</body>
</html>
77 changes: 77 additions & 0 deletions packages/cacti-cmd-gui-app/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
{
"name": "@hyperledger/cacti-cmd-gui-app",
"version": "2.0.0-alpha.1",
"description": "Cacti GUI for visualizing ledger data.",
"keywords": [
"Hyperledger",
"Cacti",
"Integration",
"Blockchain",
"Distributed Ledger Technology"
],
"homepage": "https://github.com/hyperledger/cacti#readme",
"bugs": {
"url": "https://github.com/hyperledger/cacti/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hyperledger/cacti.git"
},
"license": "Apache-2.0",
"author": {
"name": "Hyperledger Cacti Contributors",
"email": "cacti@lists.hyperledger.org",
"url": "https://www.hyperledger.org/use/cacti"
},
"contributors": [
{
"name": "Please add yourself to the list of contributors",
"email": "your.name@example.com",
"url": "https://example.com"
},
{
"name": "Eryk Baranowski",
"email": "eryk.baranowski@fujitsu.com",
"url": "https://www.fujitsu.com/global/"
},
{
"name": "Barnaba Pawelczak",
"email": "barnaba.pawelczak@fujitsu.com",
"url": "https://www.fujitsu.com/global/"
}
],
"scripts": {
"start": "vite",
"serve": "vite preview",
"build": "yarn run build:prod:frontend",
"build:dev:frontend": "vite build --mode=development",
"build:prod:frontend": "vite build"
},
"devDependencies": {
"autoprefixer": "10.4.8",
"postcss": "8.4.16",
"supabase": "1.28.4",
"typescript-plugin-css-modules": "4.1.1",
"vite": "3.0.0",
"vite-plugin-solid": "2.3.0"
},
"dependencies": {
"@solidjs/router": "0.4.2",
"@supabase/supabase-js": "1.35.6",
"apexcharts": "3.36.0",
"chart.js": "3.9.1",
"moment": "2.29.4",
"solid-apexcharts": "0.1.6",
"solid-icons": "1.0.4",
"solid-js": "1.5.7",
"solid-slider": "1.3.9",
"solid-toast": "^0.4.0"
},
"engines": {
"npm": ">=6"
},
"publishConfig": {
"access": "public"
},
"watch": {}
}
5 changes: 5 additions & 0 deletions packages/cacti-cmd-gui-app/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {},
},
};
12 changes: 12 additions & 0 deletions packages/cacti-cmd-gui-app/src/App.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.main {
width: 100%;
}
.content {
margin: 1rem 2rem;
}

@media (max-width: 1699px) {
.content {
margin: 1rem;
}
}
18 changes: 18 additions & 0 deletions packages/cacti-cmd-gui-app/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component } from "solid-js";
import Pages from "./pages/Pages";
import Menu from "./components/UI/Menu/Menu";
// @ts-expect-error
import styles from "./App.module.css";

const App: Component = () => {
return (
<div class={styles.main}>
<Menu />
<div class={styles.content}>
<Pages />
</div>
</div>
);
};

export default App;
Binary file added packages/cacti-cmd-gui-app/src/assets/favicon.ico
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.card {
display: flex;
justify-content: center;
background-color: rgb(252, 249, 249);
align-items: center;
height: 5rem;
padding: 0 2rem;
margin-top: 5px;
border-radius: 10px;
border: .5px solid rgb(224, 228, 224);
width: 35rem;
font-size: 18px;
}

.card:hover {
cursor: pointer;
background-color: #ffffff;
border:1px solid rgb(39, 153, 39);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { useParams, useNavigate } from "@solidjs/router";
import { Component } from "solid-js";
// @ts-expect-error
import styles from "./AccountCard.module.css";

const AccountCard: Component<{ address: string }> = (props) => {
const params = useParams();
const navigate = useNavigate();
const handleClick = () => {
navigate(`/${params.standard}/${props.address}`);
};
return (
<div class={styles["card"]} onClick={handleClick}>
<span>{props.address}</span>
</div>
);
};

export default AccountCard;
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.block-card {
display: flex;
gap: 1rem;
background-color: rgb(252, 249, 249);
height: 5rem;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 1rem 0rem;
margin-top: 5px;
border-radius: 10px;
border: .5px solid rgb(242, 245, 242);
max-height: 100vh;
font-size: 14px;
}

.block-card:hover {
cursor: pointer;
background-color: #ffffff;
}

.block-num {
color: rgb(12, 105, 12);
}

.block-hash {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: min-content;
max-width: 50%;
}
28 changes: 28 additions & 0 deletions packages/cacti-cmd-gui-app/src/components/BlockCard/BlockCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useNavigate } from "@solidjs/router";
import { HiSolidHashtag } from "solid-icons/hi";
import { Component } from "solid-js";
// @ts-expect-error
import styles from "./BlockCard.module.css";

const BlockCard: Component<{
number: string;
created_at: Date;
hash: string;
}> = (props) => {
const navigate = useNavigate();
const handleClick = () => {
navigate(`/blockDetails/${props.number}`);
};

return (
<div class={styles["block-card"]} onClick={handleClick}>
<p> {props.created_at.toLocaleString()}</p>
<p class={styles["block-num"]}>{props.number}</p>
<p class={styles["block-hash"]}>
<HiSolidHashtag /> {props.hash}
</p>
</div>
);
};

export default BlockCard;
Loading

0 comments on commit 15d9e9d

Please sign in to comment.