Add dashboard providing obsolete action information

.Lib9c.Tools/SubCommand/Action.cs

@@ -1,6 +1,8 @@
 using System;
+using System.IO;
 using System.Linq;
 using System.Reflection;
+using System.Text.Json.Nodes;
 using Bencodex.Types;
 using Cocona;
 using Cocona.Help;
@@ -14,6 +16,12 @@ public class Action
         [Obsolete("This function is deprecated. Please use `NineChronicles.Headless.Executable action list` command instead.")]
         [Command(Description = "Lists all actions' type ids.")]
         public void List(
+            [Option(
+                Description = "If true, show obsoleted or will be obsoleted actions only (Actions having ActionObsolete attribute only)"
+            )] bool obsoleteOnly = false,
+            [Option(
+                Description = "If true, make json file with results"
+            )] string jsonPath = null,
             [Option(
                 Description = "If true, filter obsoleted actions since the --block-index option."
             )] bool excludeObsolete = false,
@@ -22,29 +30,53 @@ public void List(
             )] long blockIndex = 0
         )
         {
-            Type baseType = typeof(Nekoyume.Action.ActionBase);
+            var baseType = typeof(ActionBase);
 
             bool IsTarget(Type type)
             {
-                return baseType.IsAssignableFrom(type) &&
-                    type.GetCustomAttribute<ActionTypeAttribute>() is { } &&
-                    (
-                        !excludeObsolete ||
-                        !(type.GetCustomAttribute<ActionObsoleteAttribute>() is { } aoAttr) ||
-                        aoAttr.ObsoleteIndex > blockIndex
-                    );
+                if (!baseType.IsAssignableFrom(type) ||
+                    type.GetCustomAttribute<ActionTypeAttribute>() is null)
+                {
+                    return false;
+                }
+
+                var isObsoleteTarget = type.GetCustomAttribute<ActionObsoleteAttribute>() is not null;
+                var isObsolete = type.GetCustomAttribute<ActionObsoleteAttribute>() is { } attr &&
+                                 attr.ObsoleteIndex <= blockIndex;
+
+                if (obsoleteOnly) return isObsoleteTarget;
+                if (excludeObsolete) return !isObsolete;
+
+                return true;
             }
 
             var assembly = baseType.Assembly;
             var typeIds = assembly.GetTypes()
                 .Where(IsTarget)
-                .Select(type => type.GetCustomAttribute<ActionTypeAttribute>()?.TypeIdentifier)
-                .OfType<Text>()
-                .OrderBy(type => type);
+                .Select(type => ((IValue typeId, long? obsoleteAt))(
+                    type.GetCustomAttribute<ActionTypeAttribute>()?.TypeIdentifier,
+                    type.GetCustomAttribute<ActionObsoleteAttribute>()?.ObsoleteIndex
+                ))
+                .Where(type => type.typeId is Text)
+                .OrderBy(type => ((Text)type.typeId).Value);
+
+            var jsonResult = new JsonArray();
+
+            foreach (var (typeIdValue, obsoleteAt) in typeIds)
+            {
+                var typeId = (Text)typeIdValue;
+                var json = new JsonObject { ["id"] = typeId.Value };
+                if (obsoleteAt != null) json.Add("obsoleteAt", obsoleteAt);
+                jsonResult.Add(json);
 
-            foreach (Text typeId in typeIds) {
                 Console.WriteLine(typeId.Value);
             }
+
+            if (jsonPath != null)
+            {
+                using var stream = File.CreateText(jsonPath);
+                stream.WriteLine(jsonResult.ToString());
+            }
         }
 
         [PrimaryCommand]

.github/workflows/gh-page.yml

@@ -0,0 +1,36 @@
+name: main
+
+on:
+  push:
+    branches:
+      - development
+      - main
+
+jobs:
+  publish-gh-pages:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - name: Install Dependency
+      working-directory: ./Dashboard
+      run: yarn
+
+    - name: Build .env
+      working-directory: ./Dashboard
+      run: |
+        echo "VITE_OBSOLETE_DATA_PATH=${{ secrets.VITE_OBSOLETE_DATA_PATH }}" >> .env
+        echo "VITE_API_PATH=${{ secrets.VITE_API_PATH }}" >> .env
+
+    - name: Build Dashboard
+      working-directory: ./Dashboard
+      run: yarn build --outDir ../publish
+
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./publish
+        destination_dir: dashboard

.github/workflows/main.yml

@@ -108,12 +108,19 @@ jobs:
       run: |
         mkdir publish
         dotnet run --property WarningLevel=0 --project .Lib9c.Tools/Lib9c.Tools.csproj -- action list > publish/all_action_type_ids.txt
+        dotnet run --property WarningLevel=0 --project .Lib9c.Tools/Lib9c.Tools.csproj -- action list --obsolete-only --json-path=publish/obsolete_action_types.json
     - name: Publish available action type ids
       uses: peaceiris/actions-gh-pages@v3
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         publish_dir: ./publish
         destination_dir: ${{ github.ref_name }}
+    - name: Publish available action type ids for latest
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./publish
+        destination_dir: latest
 
   update-submodule:
     if: github.ref_type == 'branch' && startsWith(github.ref_name, 'release/')

Dashboard/.env.example

@@ -0,0 +1,2 @@
+VITE_OBSOLETE_DATA_PATH=https://raw.githubusercontent.com/planetarium/lib9c/development/.github/exports/obsolete-actions.json
+VITE_API_PATH=https://sample-api-server.test

Dashboard/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

Dashboard/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env

Dashboard/.prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['prettier-plugin-tailwindscss'],
+};

Dashboard/README.md

@@ -0,0 +1,13 @@
+# Lib9c Dashboard
+
+Lib9c Dashboard is web application provides Lib9c's various information (etc. Action Obsoletion, ...).
+
+## Quick Start
+
+1. Copy `.env.example` with name `.env` and fill with valid value.
+2. Run `yarn install`
+3. Run `yarn dev`
+
+## Build
+
+Just run `yarn build` then result of build will be created at `/dist`

Dashboard/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Obsolete Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

Dashboard/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "homepage": "http://planetarium.github.io/lib9c/dashboard",
+  "scripts": {
+    "dev": "vite",
+    "predeploy": "yarn build",
+    "deploy": "gh-pages -d build",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^4.32.0",
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "gh-pages": "^5.0.0",
+    "postcss": "^8.4.27",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

Dashboard/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

Dashboard/src/App.tsx

@@ -0,0 +1,84 @@
+import { useQueries } from "@tanstack/react-query";
+import axios from "axios";
+import { useMemo } from "react";
+
+interface Block { index: number }
+interface Action { id: string, obsoleteAt: number }
+
+const fetchLatestBlock = async () => {
+  const response = await axios.get<Block>(`${import.meta.env.VITE_API_PATH}/api/blocks/latest`);
+  return response.data;
+};
+
+const fetchActions = async () => {
+  const response = await axios.get<Action[]>(import.meta.env.VITE_OBSOLETE_DATA_PATH);
+  return response.data;
+}
+
+function App() {
+  const [latestBlockQuery, actionsQuery] = useQueries({
+    queries: [
+      { queryKey: ['latestBlock'], queryFn: fetchLatestBlock },
+      { queryKey: ['actions'], queryFn: fetchActions },
+    ],
+  });
+  const isLoading = latestBlockQuery.isLoading || actionsQuery.isLoading;
+  const isError = latestBlockQuery.isError || actionsQuery.isError;
+
+  const currentBlock = useMemo(
+    () => latestBlockQuery.data?.index ?? 0,
+    [latestBlockQuery.data],
+  );
+  const actions = useMemo(
+    () => actionsQuery.data?.sort((a, b) => b.obsoleteAt - a.obsoleteAt) ?? [],
+    [actionsQuery.data],
+  );
+
+  if (isLoading) return <></>;
+  if (isError) return <></>;
+
+  const isObsoleted = (data: Action) => currentBlock > data.obsoleteAt;
+
+  return (
+    <div className="container mx-auto pt-16 pb-16">
+      <div className="header pb-8">
+        <h1 className="text-5xl font-bold mb-2">Dashboard</h1>
+        <p>
+          You can check NineChronicles actions that will be obsoleted soon here.
+        </p>
+      </div>
+
+      <p className="text-xl mb-4">
+        The latest block is <span className="font-extrabold">#{currentBlock}</span>
+      </p>
+
+      <div className="grid grid-cols-[120px_1fr_2fr] gap-2 text-lg">
+        <>
+          <p className="text-sm text-slate-500 font-bold">#Block Index</p>
+          <p className="text-sm text-slate-500 font-bold">Action ID</p>
+          <p className="text-sm text-slate-500 font-bold">Remain blocks</p>
+        </>
+
+        {actions.map((action) => (
+          <>
+            <p className={`font-bold ${isObsoleted(action) ? 'text-slate-400 line-through' : ''}`}>
+              #{action.obsoleteAt}
+            </p>
+            <p className={isObsoleted(action) ? 'text-slate-400' : ''}>
+              {action.id}
+            </p>
+            <p className={isObsoleted(action) ? 'text-slate-400' : ''}>
+              {isObsoleted(action)
+                ? <span className="text-sm">Obsoleted</span>
+                : <span>{action.obsoleteAt - currentBlock} blocks remain</span>
+              }
+            </p>
+          </>
+        ))
+        }
+      </div>
+    </div>
+  );
+}
+
+export default App;