feat: added default page to configure

txpipe · Aug 30, 2023 · 90ccae0 · 90ccae0
1 parent 8ed58ea
commit 90ccae0
Show file tree

Hide file tree

Showing 5 changed files with 293 additions and 0 deletions.
diff --git a/docs/components/configuration.jsx b/docs/components/configuration.jsx
@@ -0,0 +1,187 @@
+import { Component, useState } from "react";
+
+import stages from "../data/stages.json";
+
+const TYPES = {
+  SOURCES: "sources",
+  FILTERS: "filters",
+  SINKS: "sinks",
+};
+
+export function Configuration() {
+  const [openedModal, setOpenedModal] = useState(false);
+  const [typeModal, setTypeModal] = useState(TYPES.SOURCES);
+  const [optionModal, setoOptionModal] = useState(undefined);
+  const [tempModal, setTempModal] = useState({});
+  const [currentStages, setCurrentStages] = useState({});
+
+  function openModal(type) {
+    setOpenedModal(true);
+    setTypeModal(type);
+    setoOptionModal(undefined);
+    setTempModal({});
+  }
+
+  function addStage() {
+    if (typeModal == TYPES.SOURCES || typeModal == TYPES.SINKS) {
+      setCurrentStages(
+        Object.assign(currentStages, {
+          [`${typeModal}`]: { type: optionModal, ...tempModal },
+        })
+      );
+    } else {
+      setCurrentStages(
+        Object.assign(currentStages, {
+          [`${typeModal}`]: (currentStages[typeModal] || []).concat({
+            type: optionModal,
+            ...tempModal,
+          }),
+        })
+      );
+    }
+
+    setOpenedModal(false);
+  }
+
+  return (
+    <div>
+      <div className="absolute">
+        {openedModal ? (
+          <>
+            <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
+              <div className="relative w-auto my-6 mx-auto max-w-3xl w-full">
+                <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white dark:bg-gray-700 outline-none focus:outline-none">
+                  <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+                    <h3 className="text-3xl font-semibold capitalize">
+                      {typeModal}
+                    </h3>
+                    <button
+                      className="p-1 float-right text-3xl leading-none"
+                      onClick={() => setOpenedModal(false)}
+                    >
+                      <span className="text-gray dark:text-gray-200">×</span>
+                    </button>
+                  </div>
+
+                  <div className="relative p-6 flex-auto">
+                    <select
+                      name="stage"
+                      id="stage"
+                      className="w-full py-2 px-4 rounded mb-2"
+                      onChange={(e) => setoOptionModal(e.target.value)}
+                      value={optionModal}
+                    >
+                      <option>-</option>
+                      {Object.keys(stages[typeModal]).map((k) => (
+                        <option value={k} key={k}>
+                          {k}
+                        </option>
+                      ))}
+                    </select>
+                    {optionModal
+                      ? stages[typeModal][optionModal]?.fields?.map((f) => (
+                          <label className="block mb-2" key={f.key}>
+                            <span
+                              className={
+                                f.required
+                                  ? "after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700"
+                                  : "block text-sm font-medium text-slate-700"
+                              }
+                            >
+                              {f.name}
+                            </span>
+                            <input
+                              type="text"
+                              name={f.name}
+                              className="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 focus:outline-none w-full rounded-md sm:text-sm"
+                              onChange={(e) =>
+                                setTempModal(
+                                  Object.assign(tempModal, {
+                                    [`${f.key}`]: e.target.value,
+                                  })
+                                )
+                              }
+                            />
+                          </label>
+                        ))
+                      : null}
+                  </div>
+
+                  <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
+                    <button
+                      className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
+                      onClick={() => addStage()}
+                    >
+                      Add stage
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+          </>
+        ) : null}
+      </div>
+
+      <div className="py-10">
+        <div className="py-5">
+          <h1 className="font-bold text-2xl dark:text-gray-200 pb-1   ">
+            Configure your Oura
+          </h1>
+          <p> Add stages to your pipeline </p>
+        </div>
+        <div className="grid grid-cols-3 gap-3">
+          <div>
+            <button
+              className="w-full bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded btn_pointer btn_pointer_right"
+              onClick={() => openModal(TYPES.SOURCES)}
+            >
+              add source
+            </button>
+
+            {currentStages[TYPES.SOURCES]
+              ? StageCard(currentStages[TYPES.SOURCES])
+              : null}
+          </div>
+          <div>
+            <button
+              className="w-full bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded btn_pointer btn_pointer_left btn_pointer_right"
+              onClick={() => openModal(TYPES.FILTERS)}
+            >
+              add filter
+            </button>
+            {currentStages[TYPES.FILTERS]?.map((filter, index) => (
+              <div key={index}>{StageCard(filter)}</div>
+            ))}
+          </div>
+
+          <div>
+            <button
+              className="w-full bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded btn_pointer btn_pointer_left"
+              onClick={() => openModal(TYPES.SINKS)}
+            >
+              add sink
+            </button>
+
+            {currentStages[TYPES.SINKS]
+              ? StageCard(currentStages[TYPES.SINKS])
+              : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StageCard(value) {
+  return (
+    <div className="border rounded mt-2 p-2">
+      {Object.keys(value).map((k) => (
+        <div key={k}>
+          <strong>{k}: </strong>
+          {value[k]}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/docs/data/stages.json b/docs/data/stages.json
@@ -0,0 +1,74 @@
+{
+    "sources": {
+        "N2N": {
+            "name": "N2N",
+            "fields": [
+                {
+                    "name": "Peers",
+                    "required": true,
+                    "key": "peers"
+                }
+            ]
+        },
+        "N2C": {
+            "name": "N2C",
+            "fields": [
+                {
+                    "name": "Socket Path",
+                    "required": true,
+                    "key": "socket_path"
+                }
+            ]
+        },
+        "UtxoRPC": {
+            "name": "Utxo RPC",
+            "fields": [
+                {
+                    "name": "URL (Dolos Node)",
+                    "required": true,
+                    "key": "url"
+                }
+            ]
+        }
+    },
+    "filters": {
+        "ParseCbor": {
+            "name": "Parse Cbor"
+        },
+        "SplitBlock": {
+            "name": "Split Block"
+        },
+        "Deno": {
+            "name": "Deno",
+            "fields": [
+                {
+                    "name": "Main Module (JS file path)",
+                    "required": true,
+                    "key": "main_module"
+                },
+                {
+                    "name": "Use Async (true/false)",
+                    "required": true,
+                    "key": "use_async"
+                }
+            ]
+        }
+    },
+    "sinks": {
+        "Redis": {
+            "name": "Redis",
+            "fields": [
+                {
+                    "name": "URL",
+                    "required": true,
+                    "key": "url"
+                },
+                {
+                    "name": "Stream Name",
+                    "required": false,
+                    "key": "stream_name"
+                }
+            ]
+        }
+    }
+}
diff --git a/docs/pages/v2/_meta.json b/docs/pages/v2/_meta.json
@@ -1,5 +1,6 @@
 {
     "index": "Introduction",
+    "configuration": "Configuration",
     "installation": "Installation",
     "usage": "Usage",
     "filters": "Filters",

diff --git a/docs/pages/v2/configuration.mdx b/docs/pages/v2/configuration.mdx
@@ -0,0 +1,3 @@
+import { Configuration } from "../../components/configuration";
+
+<Configuration />
diff --git a/docs/styles/global.css b/docs/styles/global.css
@@ -1,3 +1,31 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.btn_pointer {
+  position: relative;
+}
+
+.btn_pointer_left::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-left: 20px solid white;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+}
+
+.btn_pointer_right::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-left: 20px solid transparent;
+  border-top: 20px solid white;
+  border-bottom: 20px solid white;
+}