Merge pull request #201 from us3r-network/dashboard-dev

Dashboard dev
us3r-network · Jul 24, 2023 · f6edb8e · f6edb8e
2 parents b7d58c2 + 1c3a12c
commit f6edb8e
Show file tree

Hide file tree

Showing 44 changed files with 1,151 additions and 415 deletions.
diff --git a/.github/workflows/dashboard-firebase-hosting-merge.yml b/.github/workflows/dashboard-firebase-hosting-merge.yml
@@ -2,7 +2,7 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy Dashboard to Firebase Hosting on merge
-'on':
+"on":
   push:
     branches:
       - dashboard
@@ -11,66 +11,66 @@ jobs:
   prod_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard'
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: production
       url: https://dashboard.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
           yarn build
         env:
           CI: false
           GENERATE_SOURCEMAP: false
-          REACT_APP_NAME: 'US3R DASHBOARD'
-          REACT_APP_API_BASE_URL: '${{ vars.REACT_APP_API_BASE_URL }}'
-          REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
-          REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
-          REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
-          REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
-          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          REACT_APP_NAME: "US3R CONSOLE"
+          REACT_APP_API_BASE_URL: "${{ vars.REACT_APP_API_BASE_URL }}"
+          REACT_APP_UPLOAD_API_URL: "${{ vars.REACT_APP_UPLOAD_API_URL }}"
+          REACT_APP_CERAMIC_MAINNET_HOST: "${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}"
+          REACT_APP_CERAMIC_TESTNET_HOST: "${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}"
+          REACT_APP_S3_SCAN_URL: "${{ vars.REACT_APP_S3_SCAN_URL }}"
+          REACT_APP_DOCS_URL: "${{ vars.REACT_APP_DOCS_URL }}"
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           channelId: live
           projectId: us3r-network
           target: dashboard
-          entryPoint: './packages/client/dashboard/' 
+          entryPoint: "./packages/client/dashboard/"
   dev_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard-dev'
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: development
       url: https://dashboard-dev.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
           yarn build
         env:
           CI: false
-          NODE_OPTIONS: '--max-old-space-size=8192'
-          REACT_APP_NAME: 'US3R DASHBOARD DEV'
-          REACT_APP_API_BASE_URL: '${{ vars.REACT_APP_API_BASE_URL }}'
-          REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
-          REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
-          REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
-          REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
-          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          NODE_OPTIONS: "--max-old-space-size=8192"
+          REACT_APP_NAME: "US3R CONSOLE DEV"
+          REACT_APP_API_BASE_URL: "${{ vars.REACT_APP_API_BASE_URL }}"
+          REACT_APP_UPLOAD_API_URL: "${{ vars.REACT_APP_UPLOAD_API_URL }}"
+          REACT_APP_CERAMIC_MAINNET_HOST: "${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}"
+          REACT_APP_CERAMIC_TESTNET_HOST: "${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}"
+          REACT_APP_S3_SCAN_URL: "${{ vars.REACT_APP_S3_SCAN_URL }}"
+          REACT_APP_DOCS_URL: "${{ vars.REACT_APP_DOCS_URL }}"
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           channelId: live
           projectId: us3r-network
           target: dashboard-dev
-          entryPoint: './packages/client/dashboard/'
+          entryPoint: "./packages/client/dashboard/"
diff --git a/.github/workflows/dashboard-firebase-hosting-pull-request.yml b/.github/workflows/dashboard-firebase-hosting-pull-request.yml
@@ -2,7 +2,7 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy Dashboard to Firebase Hosting on PR
-'on': 
+"on":
   pull_request:
     branches:
       - dashboard
@@ -11,64 +11,64 @@ jobs:
   prod_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard' && github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: production
       url: https://dashboard.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
           yarn build
         env:
           CI: false
           GENERATE_SOURCEMAP: false
-          REACT_APP_NAME: 'US3R DASHBOARD'
-          REACT_APP_API_BASE_URL: '${{ vars.REACT_APP_API_BASE_URL }}'
-          REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
-          REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
-          REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
-          REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
-          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          REACT_APP_NAME: "US3R CONSOLE"
+          REACT_APP_API_BASE_URL: "${{ vars.REACT_APP_API_BASE_URL }}"
+          REACT_APP_UPLOAD_API_URL: "${{ vars.REACT_APP_UPLOAD_API_URL }}"
+          REACT_APP_CERAMIC_MAINNET_HOST: "${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}"
+          REACT_APP_CERAMIC_TESTNET_HOST: "${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}"
+          REACT_APP_S3_SCAN_URL: "${{ vars.REACT_APP_S3_SCAN_URL }}"
+          REACT_APP_DOCS_URL: "${{ vars.REACT_APP_DOCS_URL }}"
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           projectId: us3r-network
           target: dashboard
-          entryPoint: './packages/client/dashboard/' 
+          entryPoint: "./packages/client/dashboard/"
   dev_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard-dev' && github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: development
       url: https://dashboard-dev.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
           yarn build
         env:
           CI: false
-          NODE_OPTIONS: '--max-old-space-size=8192' 
-          REACT_APP_NAME: 'US3R DASHBOARD DEV'
-          REACT_APP_API_BASE_URL: '${{ vars.REACT_APP_API_BASE_URL }}'
-          REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
-          REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
-          REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
-          REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
-          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          NODE_OPTIONS: "--max-old-space-size=8192"
+          REACT_APP_NAME: "US3R CONSOLE DEV"
+          REACT_APP_API_BASE_URL: "${{ vars.REACT_APP_API_BASE_URL }}"
+          REACT_APP_UPLOAD_API_URL: "${{ vars.REACT_APP_UPLOAD_API_URL }}"
+          REACT_APP_CERAMIC_MAINNET_HOST: "${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}"
+          REACT_APP_CERAMIC_TESTNET_HOST: "${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}"
+          REACT_APP_S3_SCAN_URL: "${{ vars.REACT_APP_S3_SCAN_URL }}"
+          REACT_APP_DOCS_URL: "${{ vars.REACT_APP_DOCS_URL }}"
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           projectId: us3r-network
           target: dashboard-dev
-          entryPoint: './packages/client/dashboard/'
+          entryPoint: "./packages/client/dashboard/"
diff --git a/packages/client/dashboard/.env.example b/packages/client/dashboard/.env.example
@@ -1,4 +1,4 @@
-REACT_APP_NAME=US3R DASHBOARD
+REACT_APP_NAME=US3R CONSOLE
 REACT_APP_VERSION=$npm_package_version
 
 REACT_APP_UPLOAD_API_URL=https://api-dev.u3.xyz

diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
@@ -17,6 +17,7 @@
     "@types/ejs": "^3.1.2",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.0.1",
+    "@types/jszip": "^3.4.1",
     "@types/lodash": "^4.14.195",
     "@types/node": "^16.7.13",
     "@types/prismjs": "^1.26.0",
@@ -33,6 +34,7 @@
     "graphiql": "^2.4.7",
     "graphql-editor": "6.3.2",
     "json-bigint-patch": "^0.0.8",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
     "prism-react-renderer": "^2.0.6",

diff --git a/packages/client/dashboard/public/dapp-home/header-bg.png b/packages/client/dashboard/public/dapp-home/header-bg.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-0.png b/packages/client/dashboard/public/dapp-home/step1-0.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-1.png b/packages/client/dashboard/public/dapp-home/step1-1.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-2.png b/packages/client/dashboard/public/dapp-home/step1-2.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-a.png b/packages/client/dashboard/public/dapp-home/step1-a.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-b.png b/packages/client/dashboard/public/dapp-home/step1-b.png
diff --git a/packages/client/dashboard/public/dapp-home/step2-a.png b/packages/client/dashboard/public/dapp-home/step2-a.png
diff --git a/packages/client/dashboard/public/dapp-home/step2-b.png b/packages/client/dashboard/public/dapp-home/step2-b.png
diff --git a/packages/client/dashboard/public/dapp-home/step2-c.png b/packages/client/dashboard/public/dapp-home/step2-c.png
diff --git a/packages/client/dashboard/public/dapp-home/step2-d.png b/packages/client/dashboard/public/dapp-home/step2-d.png
diff --git a/packages/client/dashboard/public/dapp-home/step2.png b/packages/client/dashboard/public/dapp-home/step2.png
diff --git a/packages/client/dashboard/public/dapp-home/step3.png b/packages/client/dashboard/public/dapp-home/step3.png
diff --git a/packages/client/dashboard/public/dapp-home/step4.png b/packages/client/dashboard/public/dapp-home/step4.png
diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx
@@ -28,6 +28,7 @@ import ModelList from './components/ModelList'
 import { DappComposite, ModelStream } from './types'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.min.css'
+import DappModelSdk from './container/DappModelSdk'
 
 dayjs.extend(relativeTime)
 
@@ -42,6 +43,7 @@ function Routers() {
           <Route element={<ModelEditorLayout />}>
             <Route path="model-editor" element={<DappModelEditor />} />
             <Route path="model-playground" element={<DappModelPlayground />} />
+            <Route path="model-sdk" element={<DappModelSdk />} />
             <Route path="statistic" element={<DappDataStatistic />} />
           </Route>
           <Route path="info" element={<DappInfo />} />
@@ -59,7 +61,7 @@ export default function App() {
   return (
     <Us3rAuthWithRainbowkitProvider
       projectId={WALLET_CONNECT_PROJECT_ID}
-      appName="S3 Dashboard"
+      appName="S3 Console"
     >
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
         <CeramicProvider>

diff --git a/packages/client/dashboard/src/api/index.ts b/packages/client/dashboard/src/api/index.ts
@@ -278,3 +278,21 @@ export function getModelSDK({
     method: 'GET',
   })
 }
+
+export function startIndexModel({
+  network,
+  modelId,
+  didSession,
+}: {
+  network: Network
+  modelId: string
+  didSession?: string
+}): AxiosPromise<ApiResp<null>> {
+  return axios({
+    url: `${APP_API_URL}/models/indexing?network=${network.toUpperCase()}&model=${modelId}`,
+    method: 'post',
+    headers: {
+      'did-session': didSession || '',
+    },
+  })
+}
diff --git a/packages/client/dashboard/src/components/CodeDownload.tsx b/packages/client/dashboard/src/components/CodeDownload.tsx
@@ -0,0 +1,95 @@
+import FileSaver from 'file-saver'
+import ChevronDown from './Icons/CheckronDown'
+import DownloadIcon from './Icons/DownloadIcon'
+import { Code } from './ModelSDK'
+import styled from 'styled-components'
+import { useState } from 'react'
+
+export default function CodeDownload({
+  downloadContent,
+  downloadFileName,
+  title,
+  content,
+}: {
+  title: string
+  content: string
+  downloadContent: string
+  downloadFileName: string
+}) {
+  const [show, setShow] = useState(false)
+  const download = (text: string, filename: string) => {
+    const blob = new Blob([text], {
+      type: 'text/plain;charset=utf-8',
+    })
+
+    FileSaver.saveAs(blob, filename)
+  }
+
+  return (
+    <DefinitionBox show={show}>
+      <div className="title">
+        <div
+          onClick={() => {
+            setShow(!show)
+          }}
+        >
+          <ChevronDown />
+          <h3>{title}</h3>
+        </div>
+        <button
+          onClick={() => {
+            download(downloadContent, downloadFileName)
+          }}
+        >
+          <DownloadIcon />
+        </button>
+      </div>
+      {show && (
+        <div className="result-text">
+          <Code name="runtimeDefinition" content={content} />
+        </div>
+      )}
+    </DefinitionBox>
+  )
+}
+
+const DefinitionBox = styled.div<{ show?: boolean }>`
+  box-sizing: border-box;
+  background-color: #1a1a1c;
+  height: fit-content;
+  .title {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    font-style: italic;
+    color: #ffffff;
+
+    > div {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      > svg {
+        transition: transform 0.1s ease-in-out;
+        transform: ${(props) =>
+          props.show ? `rotate(-180deg)` : `rotate(0deg)`};
+      }
+    }
+
+    button {
+      background: inherit;
+    }
+
+    h3 {
+      margin: 0;
+      padding: 0;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+    }
+  }
+`