docs/node: Switch Archive Snapshots to new Multipart ones (#523)

Co-authored-by: Julian Rubino <julian@zetachain.com>
zeta-chain · Dec 23, 2024 · 7611280 · 7611280
1 parent 7aa56db
commit 7611280
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 6 deletions.
diff --git a/src/components/Docs/components/NodeSnapshots.tsx b/src/components/Docs/components/NodeSnapshots.tsx
@@ -2,7 +2,9 @@ import axios from "axios";
 import { format } from "date-fns";
 import React, { useEffect, useMemo, useState } from "react";
 
-import { LoadingTable, NetworkTypeTabs, networkTypeTabs } from "~/components/shared";
+import { IconLink, LoadingTable, NetworkTypeTabs, networkTypeTabs } from "~/components/shared";
+
+import { CopyToClipboard } from "../../shared/components/CodeBlock/components/CopyToClipboard";
 
 interface NodeSnapshotsProps {
   apiUrl: string;
@@ -13,23 +15,27 @@ interface Snapshot {
   type: string;
   networkVersion?: string;
   height?: number;
+  size?: number;
   creationDate?: string;
   link?: string;
+  links?: string[];
+  instructions?: string;
 }
 
 const NodeSnapshots: React.FC<NodeSnapshotsProps> = ({ apiUrl }) => {
   const [mainnetSnapshots, setMainnetSnapshots] = useState<Snapshot[]>([]);
   const [testnetSnapshots, setTestnetSnapshots] = useState<Snapshot[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [activeTab, setActiveTab] = useState(networkTypeTabs[0]);
+  const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
       const endpoints = [
         `${apiUrl}/testnet/fullnode/latest.json`,
-        `${apiUrl}/testnet/archive/latest.json`,
+        `${apiUrl}/testnet/archive-multipart/latest.json`,
         `${apiUrl}/mainnet/fullnode/latest.json`,
-        `${apiUrl}/mainnet/archive/latest.json`,
+        `${apiUrl}/mainnet/archive-multipart/latest.json`,
       ];
 
       const fetchEndpoint = async (endpoint: string) => {
@@ -82,7 +88,7 @@ const NodeSnapshots: React.FC<NodeSnapshotsProps> = ({ apiUrl }) => {
     if (Number.isNaN(date.getTime())) {
       return "Invalid date";
     }
-    return format(date, "PPPpp");
+    return format(date, "PPP");
   };
 
   const snapshots = useMemo(() => {
@@ -104,7 +110,9 @@ const NodeSnapshots: React.FC<NodeSnapshotsProps> = ({ apiUrl }) => {
                 <th>Network Version</th>
                 <th>Height</th>
                 <th>Creation Date</th>
+                <th>Size</th>
                 <th>Download</th>
+                <th>API</th>
               </tr>
             </thead>
             <tbody>
@@ -114,13 +122,57 @@ const NodeSnapshots: React.FC<NodeSnapshotsProps> = ({ apiUrl }) => {
                   <td>{snapshot.networkVersion || ""}</td>
                   <td>{snapshot.height || ""}</td>
                   <td>{formatDate(snapshot.creationDate)}</td>
+
+                  <td>
+                    {snapshot.size
+                      ? snapshot.size >= 1024 ** 4
+                        ? (snapshot.size / 1024 ** 4).toFixed(1) + "TB"
+                        : (snapshot.size / 1024 ** 3).toFixed(1) + "GB"
+                      : ""}
+                  </td>
                   <td>
                     {snapshot.link ? (
                       <a href={snapshot.link} target="_blank" rel="noopener noreferrer">
                         <button>Download</button>
                       </a>
+                    ) : snapshot.links ? (
+                      <div>
+                        <button
+                          onClick={() => setDropdownOpen(dropdownOpen === index ? null : index)}
+                          className="hover:text-[rgb(176,255,97,0.8)]"
+                        >
+                          {dropdownOpen === index ? "Hide Parts" : "Show Parts"}
+                        </button>
+                        {dropdownOpen === index && (
+                          <div className="mt-2">
+                            <ul>
+                              {snapshot.links.map((link: string, linkIndex: number) => (
+                                <li key={linkIndex} className="mt-1">
+                                  <a href={link} target="_blank" rel="noopener noreferrer">
+                                    Part {linkIndex + 1}
+                                  </a>
+                                </li>
+                              ))}
+                            </ul>
+                            <div className="mt-2 flex items-center gap-4">
+                              <p>Script</p>
+                              <CopyToClipboard getValue={() => snapshot.instructions || "No instructions available"} />
+                            </div>
+                          </div>
+                        )}
+                      </div>
                     ) : null}
                   </td>
+                  <td>
+                    <a
+                      href={`https://snapshots.rpc.zetachain.com/${snapshot.environment}/${snapshot.type}/latest.json`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-2 text-blue-500 hover:text-blue-600"
+                    >
+                      <IconLink className="text-grey-300 dark:text-grey-400 icon-link transition-all" />
+                    </a>
+                  </td>
                 </tr>
               ))}
             </tbody>

diff --git a/src/pages/nodes/start-here/syncing.mdx b/src/pages/nodes/start-here/syncing.mdx
@@ -19,8 +19,16 @@ inside `~/.zetacored` directory.
 <NodeSnapshots apiUrl="https://snapshots.rpc.zetachain.com" />
 
 <Alert variant="warning">
-  Note: Our nodes database backend is `pebbledb`. Ensure that your node is configured to
-  use the same backend to utilize our snapshots.
+  Our **archive snapshots** are now available in a **multipart** format. You can download each part individually by
+  clicking **"Show Parts"** and selecting the desired one. Alternatively, you can streamline the process by copying the
+  provided **POSIX download script**. This script automates **downloading, packing, and extracting** the full snapshot.
+  Simply click the **"Copy to Clipboard"** icon below the parts list to copy the one-liner command and run it on a
+  terminal.
+</Alert>
+
+<Alert variant="warning">
+  Snapshots database backend is **pebbledb**. Ensure that your node is configured to use the same backend to utilize our
+  snapshots.
 </Alert>
 
 #### Alternative snapshots