From deed1fa14a13e44a4cd8f5fcb6eaa4af05593aa2 Mon Sep 17 00:00:00 2001
From: Mintu Gogoi <mintugogoi567@gmail.com>
Date: Tue, 23 Apr 2024 10:42:46 +0000
Subject: [PATCH 1/9] added filtering of status data based on  type, source,
 status

---
 website/src/pages/StatusPage/StatusPage.tsx | 75 ++++++++++++++++++++-
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index 35842831a..878981d4c 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useState } from "react";
 import RingLoader from "react-spinners/RingLoader";
 import useApiCall from "../../utils/Hook";
 
@@ -32,15 +32,84 @@ export default function StatusPage() {
     `${import.meta.env.VITE_API_URL}recent`
   );
 
+  const [filters, setFilters] = useState({
+    type: '',
+    status: '',
+    source: '',
+  });
+
+  const filterData = (data) => {
+    return data.filter((item) => {
+      const itemType = item.type_of ? item.type_of.toString() : '';
+      const itemSource = item.source ? item.source.toString() : '';
+      const itemStatus = item.status ? item.status.toString() : '';
+
+      const matchesType =
+        filters.type === '' || filters.type === undefined || itemType === filters.type;
+      const matchesSource =
+        filters.source === '' || filters.source === undefined || itemSource === filters.source;
+      const matchesStatus =
+        filters.status === '' || filters.status === undefined || itemStatus === filters.status;
+
+      return matchesType && matchesSource && matchesStatus;
+    });
+  };
+
+  const handleFilterChange = (e) => {
+    const { name, value } = e.target;
+    setFilters((prevFilters) => ({ ...prevFilters, [name]: value }));
+  };
+
+  const filteredData = filterData(dataQueue);
+
   return (
     <>
       <Hero />
 
       <div className="border-accent border mt-5" />
 
+      {/* FILTERS OPTIONS*/}
+      <div>
+        <label>
+          Type:
+          <select name="type" value={filters.type} onChange={handleFilterChange} className="bg-accent">
+            <option value="">All</option>
+            {[...new Set(filteredData.map((item) => item.type_of))].map((type) => (
+              <option key={type} value={type}>
+                {type}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label>
+          Source:
+          <select name="source" value={filters.source} onChange={handleFilterChange} className="bg-accent">
+            <option value="">All</option>
+            {[...new Set(filteredData.map((item) => item.source))].map((source) => (
+              <option key={source} value={source}>
+                {source}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label>
+          Status:
+          <select name="status" value={filters.status} onChange={handleFilterChange} className="bg-accent">
+            <option value="">All</option>
+            {[...new Set(filteredData.map((item) => item.status))].map((status) => (
+              <option key={status} value={status}>
+                {status}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
       {/* EXECUTION QUEUE */}
       {!isLoadingQueue && dataQueue && dataQueue.length > 0 && (
-        <ExecutionQueue data={dataQueue} title={"Execution Queue"} />
+        <ExecutionQueue data={filteredData} title={"Execution Queue"} />
       )}
 
       {/* PREVIOUS EXECUTIONS */}
@@ -48,7 +117,7 @@ export default function StatusPage() {
         dataPreviousExe &&
         dataPreviousExe.length > 0 && (
           <PreviousExecutions
-            data={dataPreviousExe}
+            data={filteredData}
             title={"Previous Executions"}
           />
         )}

From ad9b8b5f04a36159ce3d411326305eabc6c60f05 Mon Sep 17 00:00:00 2001
From: Mintu Gogoi <mintugogoi567@gmail.com>
Date: Tue, 23 Apr 2024 10:47:04 +0000
Subject: [PATCH 2/9] cleanup

---
 website/src/pages/StatusPage/StatusPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index 878981d4c..e9a0608a9 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -72,7 +72,7 @@ export default function StatusPage() {
       <div>
         <label>
           Type:
-          <select name="type" value={filters.type} onChange={handleFilterChange} className="bg-accent">
+          <select name="type" value={filters.type} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
             {[...new Set(filteredData.map((item) => item.type_of))].map((type) => (
               <option key={type} value={type}>
@@ -84,7 +84,7 @@ export default function StatusPage() {
 
         <label>
           Source:
-          <select name="source" value={filters.source} onChange={handleFilterChange} className="bg-accent">
+          <select name="source" value={filters.source} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
             {[...new Set(filteredData.map((item) => item.source))].map((source) => (
               <option key={source} value={source}>
@@ -96,7 +96,7 @@ export default function StatusPage() {
 
         <label>
           Status:
-          <select name="status" value={filters.status} onChange={handleFilterChange} className="bg-accent">
+          <select name="status" value={filters.status} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
             {[...new Set(filteredData.map((item) => item.status))].map((status) => (
               <option key={status} value={status}>

From fb70b1ec7c9ba09c6eb5e7c973b818b000f8e83e Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Wed, 24 Apr 2024 22:46:31 +0530
Subject: [PATCH 3/9] WIP: added the hardcoded data

---
 website/src/pages/StatusPage/StatusPage.tsx   |  30 +-
 .../components/PreviousExecutions.tsx         | 163 ++++--
 website/src/pages/StatusPage/data.json        | 552 ++++++++++++++++++
 3 files changed, 681 insertions(+), 64 deletions(-)
 create mode 100644 website/src/pages/StatusPage/data.json

diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index e9a0608a9..d3dc1de81 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -21,6 +21,7 @@ import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import ExecutionQueue from "./components/PreviousExecutions";
 import PreviousExecutions from "./components/PreviousExecutions";
+import data from "./data.json"
 
 export default function StatusPage() {
   const {
@@ -51,7 +52,9 @@ export default function StatusPage() {
       const matchesStatus =
         filters.status === '' || filters.status === undefined || itemStatus === filters.status;
 
-      return matchesType && matchesSource && matchesStatus;
+      return (matchesType || filters.type === '' || filters.type === undefined) &&
+      (matchesSource || filters.source === '' || filters.source === undefined) &&
+      (matchesStatus || filters.status === '' || filters.status === undefined);
     });
   };
 
@@ -60,7 +63,7 @@ export default function StatusPage() {
     setFilters((prevFilters) => ({ ...prevFilters, [name]: value }));
   };
 
-  const filteredData = filterData(dataQueue);
+  const filteredData = filterData(data);
 
   return (
     <>
@@ -74,7 +77,7 @@ export default function StatusPage() {
           Type:
           <select name="type" value={filters.type} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
-            {[...new Set(filteredData.map((item) => item.type_of))].map((type) => (
+            {[...new Set(data.map((item) => item.type_of))].map((type) => (
               <option key={type} value={type}>
                 {type}
               </option>
@@ -86,7 +89,7 @@ export default function StatusPage() {
           Source:
           <select name="source" value={filters.source} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
-            {[...new Set(filteredData.map((item) => item.source))].map((source) => (
+            {[...new Set(data.map((item) => item.source))].map((source) => (
               <option key={source} value={source}>
                 {source}
               </option>
@@ -98,7 +101,7 @@ export default function StatusPage() {
           Status:
           <select name="status" value={filters.status} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
-            {[...new Set(filteredData.map((item) => item.status))].map((status) => (
+            {[...new Set(data.map((item) => item.status))].map((status) => (
               <option key={status} value={status}>
                 {status}
               </option>
@@ -108,19 +111,24 @@ export default function StatusPage() {
       </div>
 
       {/* EXECUTION QUEUE */}
-      {!isLoadingQueue && dataQueue && dataQueue.length > 0 && (
+      {/* {!isLoadingQueue && dataQueue && dataQueue.length > 0 && (
         <ExecutionQueue data={filteredData} title={"Execution Queue"} />
-      )}
+      )} */}
+      <ExecutionQueue data={filteredData} title={"Execution Queue"} />
 
       {/* PREVIOUS EXECUTIONS */}
-      {!isLoadingPreviousExe &&
+      {/* {!isLoadingPreviousExe &&
         dataPreviousExe &&
         dataPreviousExe.length > 0 && (
           <PreviousExecutions
             data={filteredData}
             title={"Previous Executions"}
           />
-        )}
+        )} */}
+        <PreviousExecutions
+            data={filteredData}
+            title={"Previous Executions"}
+          />
 
       {/* SHOW LOADER BENEATH IF EITHER IS LOADING */}
       {(isLoadingPreviousExe || isLoadingQueue) && (
@@ -133,9 +141,9 @@ export default function StatusPage() {
         </div>
       )}
 
-      {errorQueue && (
+      {/* {errorQueue && (
         <div className="my-10 text-center text-red-500">{errorQueue}</div>
-      )}
+      )} */}
     </>
   );
 }
diff --git a/website/src/pages/StatusPage/components/PreviousExecutions.tsx b/website/src/pages/StatusPage/components/PreviousExecutions.tsx
index 7ab9d19bb..9bffe3462 100644
--- a/website/src/pages/StatusPage/components/PreviousExecutions.tsx
+++ b/website/src/pages/StatusPage/components/PreviousExecutions.tsx
@@ -22,66 +22,123 @@ import DisplayList from "../../../common/DisplayList";
 export default function PreviousExecutions(props) {
   const { data, title } = props;
 
-  const [previousExecutions, setPreviousExecutions] = useState([]);
-
-  useEffect(() => {
-    for (const entry of data) {
-      const newData = {};
-
-      newData["UUID"] = entry.uuid.slice(0, 8);
-
-      newData["SHA"] = (
+  // const [previousExecutions, setPreviousExecutions] = useState([]);
+
+  // useEffect(() => {
+  //   for (const entry of data) {
+  //     const newData = {};
+
+  //     newData["UUID"] = entry.uuid.slice(0, 8);
+
+  //     newData["SHA"] = (
+  //       <Link
+  //         target="__blank"
+  //         rel="noopener noreferrer"
+  //         className="text-primary text"
+  //         to={`https://github.com/vitessio/vitess/commit/${entry.git_ref}`}
+  //       >
+  //         {entry.git_ref.slice(0, 6)}
+  //       </Link>
+  //     );
+
+  //     newData["Source"] = entry.source;
+
+  //     newData["Started"] = formatDate(entry.started_at) || "N/A";
+
+  //     newData["Finished"] = formatDate(entry.finished_at) || "N/A";
+
+  //     newData["Type"] = entry.type_of;
+
+  //     if (entry.pull_nb) {
+  //       newData["PR"] = (
+  //         <Link
+  //           target="__blank"
+  //           rel="noopener noreferrer"
+  //           className="text-primary"
+  //           to={`https://github.com/vitessio/vitess/pull/${entry.pull_nb}`}
+  //         >
+  //           {entry.pull_nb}
+  //         </Link>
+  //       );
+  //     } else {
+  //       newData["PR"] = <span></span>;
+  //     }
+
+  //     newData["Go version"] = entry.golang_version;
+
+  //     newData["Status"] = (
+  //       <span
+  //         className={twMerge(
+  //           "text-lg text-white px-4 rounded-full",
+  //           entry.status === "failed" && "bg-[#dd1a2a]",
+  //           entry.status === "finished" && "bg-[#00aa00]",
+  //           entry.status === "started" && "bg-[#3a3aed]"
+  //         )}
+  //       >
+  //         {entry.status}
+  //       </span>
+  //     );
+
+  //     setPreviousExecutions((p) => [...p, newData]);
+  //   }
+  // }, []);
+
+  const previousExecutions = data.map((entry) => {
+    const newData = {};
+
+    newData["UUID"] = entry.uuid.slice(0, 8);
+
+    newData["SHA"] = (
+      <Link
+        target="__blank"
+        rel="noopener noreferrer"
+        className="text-primary text"
+        to={`https://github.com/vitessio/vitess/commit/${entry.git_ref}`}
+      >
+        {entry.git_ref.slice(0, 6)}
+      </Link>
+    );
+
+    newData["Source"] = entry.source;
+
+    newData["Started"] = formatDate(entry.started_at) || "N/A";
+
+    newData["Finished"] = formatDate(entry.finished_at) || "N/A";
+
+    newData["Type"] = entry.type_of;
+
+    if (entry.pull_nb) {
+      newData["PR"] = (
         <Link
           target="__blank"
           rel="noopener noreferrer"
-          className="text-primary text"
-          to={`https://github.com/vitessio/vitess/commit/${entry.git_ref}`}
+          className="text-primary"
+          to={`https://github.com/vitessio/vitess/pull/${entry.pull_nb}`}
         >
-          {entry.git_ref.slice(0, 6)}
+          {entry.pull_nb}
         </Link>
       );
-
-      newData["Source"] = entry.source;
-
-      newData["Started"] = formatDate(entry.started_at) || "N/A";
-
-      newData["Finished"] = formatDate(entry.finished_at) || "N/A";
-
-      newData["Type"] = entry.type_of;
-
-      if (entry.pull_nb) {
-        newData["PR"] = (
-          <Link
-            target="__blank"
-            rel="noopener noreferrer"
-            className="text-primary"
-            to={`https://github.com/vitessio/vitess/pull/${entry.pull_nb}`}
-          >
-            {entry.pull_nb}
-          </Link>
-        );
-      } else {
-        newData["PR"] = <span></span>;
-      }
-
-      newData["Go version"] = entry.golang_version;
-
-      newData["Status"] = (
-        <span
-          className={twMerge(
-            "text-lg text-white px-4 rounded-full",
-            entry.status === "failed" && "bg-[#dd1a2a]",
-            entry.status === "finished" && "bg-[#00aa00]",
-            entry.status === "started" && "bg-[#3a3aed]"
-          )}
-        >
-          {entry.status}
-        </span>
-      );
-
-      setPreviousExecutions((p) => [...p, newData]);
+    } else {
+      newData["PR"] = <span></span>;
     }
-  }, []);
+
+    newData["Go version"] = entry.golang_version;
+
+    newData["Status"] = (
+      <span
+        className={twMerge(
+          "text-lg text-white px-4 rounded-full",
+          entry.status === "failed" && "bg-[#dd1a2a]",
+          entry.status === "finished" && "bg-[#00aa00]",
+          entry.status === "started" && "bg-[#3a3aed]"
+        )}
+      >
+        {entry.status}
+      </span>
+    );
+
+    return newData;
+  });
 
   return (
     <section className="p-page mt-20 flex flex-col overflow-y-scroll">
diff --git a/website/src/pages/StatusPage/data.json b/website/src/pages/StatusPage/data.json
new file mode 100644
index 000000000..81bbeb6c2
--- /dev/null
+++ b/website/src/pages/StatusPage/data.json
@@ -0,0 +1,552 @@
+[
+    {
+        "uuid": "875f2043-580c-4d16-9d04-1690daff6383",
+        "source": "cron",
+        "git_ref": "204bc50817a138e98486177a8900bfd0bedaecb7",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-24T00:00:23Z",
+        "finished_at": "2024-04-24T00:12:35Z"
+    },
+    {
+        "uuid": "278890d5-42bb-42ef-bf7d-6b20aca41780",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:59:11Z",
+        "finished_at": "2024-04-23T01:01:05Z"
+    },
+    {
+        "uuid": "ec402e63-1bc9-405a-a7cd-0aa74b169480",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:57:16Z",
+        "finished_at": "2024-04-23T00:59:09Z"
+    },
+    {
+        "uuid": "172a2451-e3f4-4cd3-bc87-4d4f5bf293a3",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:55:23Z",
+        "finished_at": "2024-04-23T00:57:15Z"
+    },
+    {
+        "uuid": "79ab0f77-2915-4b5a-a66f-64e26f72e67f",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:53:28Z",
+        "finished_at": "2024-04-23T00:55:22Z"
+    },
+    {
+        "uuid": "669c009c-0d77-4719-ad73-369f9cb359d2",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:51:34Z",
+        "finished_at": "2024-04-23T00:53:27Z"
+    },
+    {
+        "uuid": "e3f3a946-8c49-46fb-ba7f-dd586de673c6",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:49:39Z",
+        "finished_at": "2024-04-23T00:51:33Z"
+    },
+    {
+        "uuid": "28aea9ae-97a3-4621-a518-f3cc83ef37a9",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:47:46Z",
+        "finished_at": "2024-04-23T00:49:39Z"
+    },
+    {
+        "uuid": "ed38ba2a-5f49-45c6-846d-7acd9929d880",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:45:50Z",
+        "finished_at": "2024-04-23T00:47:45Z"
+    },
+    {
+        "uuid": "27040bfb-05f4-4dd5-8311-b89f28b1e387",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:35:16Z",
+        "finished_at": "2024-04-23T00:45:49Z"
+    },
+    {
+        "uuid": "e240c833-4bb3-45f1-a21a-bb896d840d4d",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:31:27Z",
+        "finished_at": "2024-04-23T00:35:16Z"
+    },
+    {
+        "uuid": "9d49a9f8-ea98-4375-bd49-43cbc58947ce",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:27:37Z",
+        "finished_at": "2024-04-23T00:31:26Z"
+    },
+    {
+        "uuid": "c5846378-52e2-4c63-aead-607e52346548",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:23:44Z",
+        "finished_at": "2024-04-23T00:27:36Z"
+    },
+    {
+        "uuid": "2869067b-8526-47a2-a9c9-d453c488d319",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:19:50Z",
+        "finished_at": "2024-04-23T00:23:42Z"
+    },
+    {
+        "uuid": "722ec96d-886a-4efa-9550-68face81635f",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:15:57Z",
+        "finished_at": "2024-04-23T00:19:48Z"
+    },
+    {
+        "uuid": "9cf13d09-df78-46fd-8e60-43fb5396bfee",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:12:05Z",
+        "finished_at": "2024-04-23T00:15:56Z"
+    },
+    {
+        "uuid": "023343ac-16fd-4bb6-95b4-9cac0de17f6b",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:08:11Z",
+        "finished_at": "2024-04-23T00:12:04Z"
+    },
+    {
+        "uuid": "fb7ca6cd-0050-43c0-9028-ddfd11a73a19",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:04:17Z",
+        "finished_at": "2024-04-23T00:08:10Z"
+    },
+    {
+        "uuid": "b55f5cfa-995f-49c4-b8a9-b9befb6a3685",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-23T00:00:25Z",
+        "finished_at": "2024-04-23T00:04:16Z"
+    },
+    {
+        "uuid": "f830fa3b-3b99-47e0-bc5b-9fd081a57f75",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "finished",
+        "type_of": "tpcc",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-22T00:00:23Z",
+        "finished_at": "2024-04-22T00:10:41Z"
+    },
+    {
+        "uuid": "60a597f1-f93d-4ab7-8745-9730dcdc487e",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "failed",
+        "type_of": "tpcc_fk_unmanaged",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-21T00:09:10Z",
+        "finished_at": "2024-04-21T00:15:16Z"
+    },
+    {
+        "uuid": "66efebb3-1ebe-495c-b427-3f170fd28fcc",
+        "source": "cron",
+        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
+        "status": "failed",
+        "type_of": "tpcc_fk_unmanaged",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-21T00:00:26Z",
+        "finished_at": "2024-04-21T00:09:09Z"
+    },
+    {
+        "uuid": "e956aba8-84c4-43d1-b450-0db25845c410",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-20T00:00:44Z",
+        "finished_at": "2024-04-20T00:09:02Z"
+    },
+    {
+        "uuid": "63b17298-c540-44d2-963c-4ff0f39be986",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:36:18Z",
+        "finished_at": "2024-04-19T00:40:04Z"
+    },
+    {
+        "uuid": "ab9289ae-9942-44e9-b5f2-14f4a921f8b9",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:32:35Z",
+        "finished_at": "2024-04-19T00:36:17Z"
+    },
+    {
+        "uuid": "f9f55b0a-1349-4516-8dfd-f20f045d47a6",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:28:50Z",
+        "finished_at": "2024-04-19T00:32:34Z"
+    },
+    {
+        "uuid": "fcb449c5-7915-4fa7-b353-1a39bb3ce48e",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:25:00Z",
+        "finished_at": "2024-04-19T00:28:49Z"
+    },
+    {
+        "uuid": "b310c643-59af-4d36-91ef-59e7c9618ba6",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:21:14Z",
+        "finished_at": "2024-04-19T00:24:59Z"
+    },
+    {
+        "uuid": "0b05020c-f5f9-4cdd-8a77-00b550de5e06",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:17:33Z",
+        "finished_at": "2024-04-19T00:21:14Z"
+    },
+    {
+        "uuid": "90b45b4d-32bc-4ad8-8099-bc17a5b84223",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:13:50Z",
+        "finished_at": "2024-04-19T00:17:32Z"
+    },
+    {
+        "uuid": "e38aa8c1-e2cd-434a-b985-7c9fdd5558d4",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:10:06Z",
+        "finished_at": "2024-04-19T00:13:49Z"
+    },
+    {
+        "uuid": "ad54a345-d5b6-41aa-a689-2f815845a697",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-19T00:00:26Z",
+        "finished_at": "2024-04-19T00:10:04Z"
+    },
+    {
+        "uuid": "ca403e54-2126-4f51-ad9e-afd19720544d",
+        "source": "cron",
+        "git_ref": "f11de060c218d6663098b4094e246bec9a0e5f26",
+        "status": "failed",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-18T00:07:00Z",
+        "finished_at": "2024-04-18T00:13:06Z"
+    },
+    {
+        "uuid": "913148a4-3652-4be1-bf13-8cebbe339cfc",
+        "source": "cron",
+        "git_ref": "f11de060c218d6663098b4094e246bec9a0e5f26",
+        "status": "failed",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-18T00:00:22Z",
+        "finished_at": "2024-04-18T00:06:59Z"
+    },
+    {
+        "uuid": "c071496a-2c1d-4940-b37c-656aa1b7d2aa",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
+        "status": "finished",
+        "type_of": "tpcc_unsharded",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-17T00:00:21Z",
+        "finished_at": "2024-04-17T00:09:52Z"
+    },
+    {
+        "uuid": "008b6e83-9d97-4679-ab9a-f848c2b68a04",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:58:02Z",
+        "finished_at": "2024-04-16T03:01:50Z"
+    },
+    {
+        "uuid": "42c17cb2-01dc-4732-9a72-61f8ab4be1a9",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:54:10Z",
+        "finished_at": "2024-04-16T02:58:01Z"
+    },
+    {
+        "uuid": "8b04e33c-0fed-4cea-aa1f-69cf5ff8a345",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:50:16Z",
+        "finished_at": "2024-04-16T02:54:08Z"
+    },
+    {
+        "uuid": "2791bc92-9964-4231-93f8-a4e5aa429324",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:46:15Z",
+        "finished_at": "2024-04-16T02:50:15Z"
+    },
+    {
+        "uuid": "03e2225b-41f4-453f-93ba-47d0bc1809c5",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:42:22Z",
+        "finished_at": "2024-04-16T02:46:14Z"
+    },
+    {
+        "uuid": "cd84ea75-72aa-4e80-9a1c-fb990637d554",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:38:23Z",
+        "finished_at": "2024-04-16T02:42:20Z"
+    },
+    {
+        "uuid": "21974123-d1d4-49ea-8076-30c2824176e5",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "finished",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:28:47Z",
+        "finished_at": "2024-04-16T02:38:22Z"
+    },
+    {
+        "uuid": "4f6d632d-b7b3-4539-b9e0-ddc79595fb36",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "failed",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:22:48Z",
+        "finished_at": "2024-04-16T02:28:46Z"
+    },
+    {
+        "uuid": "4545dcf6-feec-46f8-9475-f9bf04587649",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "failed",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:16:49Z",
+        "finished_at": "2024-04-16T02:22:47Z"
+    },
+    {
+        "uuid": "4a9deb8e-e4c1-45df-9296-f28e91c05881",
+        "source": "cron_release-19.0-branch",
+        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
+        "status": "failed",
+        "type_of": "tpcc_fk",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:08:28Z",
+        "finished_at": "2024-04-16T02:16:48Z"
+    },
+    {
+        "uuid": "5e00f904-0b38-4745-85b9-7645a640a25a",
+        "source": "cron",
+        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:06:35Z",
+        "finished_at": "2024-04-16T02:08:27Z"
+    },
+    {
+        "uuid": "00a8ac9f-a1e8-42ef-9978-4f886cc65ea6",
+        "source": "cron",
+        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:04:40Z",
+        "finished_at": "2024-04-16T02:06:34Z"
+    },
+    {
+        "uuid": "970babc6-21db-4606-9572-719fac9eb59a",
+        "source": "cron",
+        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:02:45Z",
+        "finished_at": "2024-04-16T02:04:39Z"
+    },
+    {
+        "uuid": "c19ce5ea-0aa8-4603-8056-d37cb3748a7d",
+        "source": "cron",
+        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T02:00:50Z",
+        "finished_at": "2024-04-16T02:02:44Z"
+    },
+    {
+        "uuid": "1cff1c1d-07b4-4fae-b3c0-48a1c36efbde",
+        "source": "cron",
+        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
+        "status": "finished",
+        "type_of": "oltp-readonly",
+        "pull_nb": 0,
+        "golang_version": "1.22.0",
+        "started_at": "2024-04-16T01:58:56Z",
+        "finished_at": "2024-04-16T02:00:50Z"
+    }
+]
\ No newline at end of file

From edbb73c8b39b7d49cbf740741905fa5d5236ee4b Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Thu, 25 Apr 2024 00:06:44 +0530
Subject: [PATCH 4/9] added bthe filtration logic

---
 website/src/pages/StatusPage/StatusPage.tsx   |  55 +++---
 .../StatusPage/components/ExecutionQueue.tsx  |   9 +-
 .../components/PreviousExecutions.tsx         | 167 ++++++------------
 3 files changed, 92 insertions(+), 139 deletions(-)

diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index d3dc1de81..5dddd4679 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -21,7 +21,18 @@ import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import ExecutionQueue from "./components/PreviousExecutions";
 import PreviousExecutions from "./components/PreviousExecutions";
-import data from "./data.json"
+
+interface dataTypes {
+  uuid: string;
+  git_ref: string;
+  source: string;
+  started_at: string;
+  finished_at: string;
+  type_of: string;
+  pull_nb?: number;
+  golang_version: string;
+  status: string;
+}
 
 export default function StatusPage() {
   const {
@@ -39,7 +50,7 @@ export default function StatusPage() {
     source: '',
   });
 
-  const filterData = (data) => {
+  const filterData = (data: dataTypes[]) => {
     return data.filter((item) => {
       const itemType = item.type_of ? item.type_of.toString() : '';
       const itemSource = item.source ? item.source.toString() : '';
@@ -58,12 +69,13 @@ export default function StatusPage() {
     });
   };
 
-  const handleFilterChange = (e) => {
+  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const { name, value } = e.target;
     setFilters((prevFilters) => ({ ...prevFilters, [name]: value }));
   };
 
-  const filteredData = filterData(data);
+  const filteredDataQueue = filterData(dataQueue) as dataTypes[]; 
+  const filteredPreviousDataExe = filterData(dataPreviousExe) as dataTypes[];
 
   return (
     <>
@@ -77,11 +89,11 @@ export default function StatusPage() {
           Type:
           <select name="type" value={filters.type} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
-            {[...new Set(data.map((item) => item.type_of))].map((type) => (
-              <option key={type} value={type}>
-                {type}
-              </option>
-            ))}
+            {[...new Set(dataPreviousExe.map((item: any) => item.type_of))].map((type) => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
           </select>
         </label>
 
@@ -89,7 +101,7 @@ export default function StatusPage() {
           Source:
           <select name="source" value={filters.source} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
-            {[...new Set(data.map((item) => item.source))].map((source) => (
+            {[...new Set(dataPreviousExe.map((item: any) => item.source))].map((source) => (
               <option key={source} value={source}>
                 {source}
               </option>
@@ -101,7 +113,7 @@ export default function StatusPage() {
           Status:
           <select name="status" value={filters.status} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
             <option value="">All</option>
-            {[...new Set(data.map((item) => item.status))].map((status) => (
+            {[...new Set(dataPreviousExe.map((item: any) => item.status))].map((status) => (
               <option key={status} value={status}>
                 {status}
               </option>
@@ -111,24 +123,19 @@ export default function StatusPage() {
       </div>
 
       {/* EXECUTION QUEUE */}
-      {/* {!isLoadingQueue && dataQueue && dataQueue.length > 0 && (
-        <ExecutionQueue data={filteredData} title={"Execution Queue"} />
-      )} */}
-      <ExecutionQueue data={filteredData} title={"Execution Queue"} />
+      {!isLoadingQueue && dataQueue && dataQueue.length > 0 && (
+        <ExecutionQueue data={filteredDataQueue} title={"Execution Queue"} />
+      )}
 
       {/* PREVIOUS EXECUTIONS */}
-      {/* {!isLoadingPreviousExe &&
+      {!isLoadingPreviousExe &&
         dataPreviousExe &&
         dataPreviousExe.length > 0 && (
           <PreviousExecutions
-            data={filteredData}
-            title={"Previous Executions"}
-          />
-        )} */}
-        <PreviousExecutions
-            data={filteredData}
+            data={filteredPreviousDataExe}
             title={"Previous Executions"}
           />
+        )}
 
       {/* SHOW LOADER BENEATH IF EITHER IS LOADING */}
       {(isLoadingPreviousExe || isLoadingQueue) && (
@@ -141,9 +148,9 @@ export default function StatusPage() {
         </div>
       )}
 
-      {/* {errorQueue && (
+      {errorQueue && (
         <div className="my-10 text-center text-red-500">{errorQueue}</div>
-      )} */}
+      )}
     </>
   );
 }
diff --git a/website/src/pages/StatusPage/components/ExecutionQueue.tsx b/website/src/pages/StatusPage/components/ExecutionQueue.tsx
index 52a9e1db5..5bde503a4 100644
--- a/website/src/pages/StatusPage/components/ExecutionQueue.tsx
+++ b/website/src/pages/StatusPage/components/ExecutionQueue.tsx
@@ -23,7 +23,7 @@ export default function ExecutionQueue(props) {
   const [executionQueue, setExecutionQueue] = useState([]);
 
   useEffect(() => {
-    for (const entry of data) {
+    const transformedData = data.map((entry) => {
       const newData = {};
 
       newData["SHA"] = (
@@ -55,10 +55,11 @@ export default function ExecutionQueue(props) {
       } else {
         newData["PR"] = <span></span>;
       }
+      return newData;
+    })
 
-      setExecutionQueue((p) => [...p, newData]);
-    }
-  }, []);
+    setExecutionQueue(transformedData);
+  },[data])
 
   return (
     <section className="p-page mt-20 flex flex-col">
diff --git a/website/src/pages/StatusPage/components/PreviousExecutions.tsx b/website/src/pages/StatusPage/components/PreviousExecutions.tsx
index 9bffe3462..79468db5a 100644
--- a/website/src/pages/StatusPage/components/PreviousExecutions.tsx
+++ b/website/src/pages/StatusPage/components/PreviousExecutions.tsx
@@ -22,123 +22,68 @@ import DisplayList from "../../../common/DisplayList";
 export default function PreviousExecutions(props) {
   const { data, title } = props;
 
-  // const [previousExecutions, setPreviousExecutions] = useState([]);
-
-  // useEffect(() => {
-  //   for (const entry of data) {
-  //     const newData = {};
-
-  //     newData["UUID"] = entry.uuid.slice(0, 8);
-
-  //     newData["SHA"] = (
-  //       <Link
-  //         target="__blank"
-  //         rel="noopener noreferrer"
-  //         className="text-primary text"
-  //         to={`https://github.com/vitessio/vitess/commit/${entry.git_ref}`}
-  //       >
-  //         {entry.git_ref.slice(0, 6)}
-  //       </Link>
-  //     );
-
-  //     newData["Source"] = entry.source;
-
-  //     newData["Started"] = formatDate(entry.started_at) || "N/A";
-
-  //     newData["Finished"] = formatDate(entry.finished_at) || "N/A";
-
-  //     newData["Type"] = entry.type_of;
-
-  //     if (entry.pull_nb) {
-  //       newData["PR"] = (
-  //         <Link
-  //           target="__blank"
-  //           rel="noopener noreferrer"
-  //           className="text-primary"
-  //           to={`https://github.com/vitessio/vitess/pull/${entry.pull_nb}`}
-  //         >
-  //           {entry.pull_nb}
-  //         </Link>
-  //       );
-  //     } else {
-  //       newData["PR"] = <span></span>;
-  //     }
-
-  //     newData["Go version"] = entry.golang_version;
-
-  //     newData["Status"] = (
-  //       <span
-  //         className={twMerge(
-  //           "text-lg text-white px-4 rounded-full",
-  //           entry.status === "failed" && "bg-[#dd1a2a]",
-  //           entry.status === "finished" && "bg-[#00aa00]",
-  //           entry.status === "started" && "bg-[#3a3aed]"
-  //         )}
-  //       >
-  //         {entry.status}
-  //       </span>
-  //     );
-
-  //     setPreviousExecutions((p) => [...p, newData]);
-  //   }
-  // }, []);
-
-  const previousExecutions = data.map((entry) => {
-    const newData = {};
-
-    newData["UUID"] = entry.uuid.slice(0, 8);
-
-    newData["SHA"] = (
-      <Link
-        target="__blank"
-        rel="noopener noreferrer"
-        className="text-primary text"
-        to={`https://github.com/vitessio/vitess/commit/${entry.git_ref}`}
-      >
-        {entry.git_ref.slice(0, 6)}
-      </Link>
-    );
-
-    newData["Source"] = entry.source;
-
-    newData["Started"] = formatDate(entry.started_at) || "N/A";
-
-    newData["Finished"] = formatDate(entry.finished_at) || "N/A";
-
-    newData["Type"] = entry.type_of;
-
-    if (entry.pull_nb) {
-      newData["PR"] = (
+  const [previousExecutions, setPreviousExecutions] = useState([]);
+
+  useEffect(() => {
+    const transformedData = data.map((entry) => {
+      const newData = {};
+
+      newData["UUID"] = entry.uuid.slice(0, 8);
+
+      newData["SHA"] = (
         <Link
           target="__blank"
           rel="noopener noreferrer"
-          className="text-primary"
-          to={`https://github.com/vitessio/vitess/pull/${entry.pull_nb}`}
+          className="text-primary text"
+          to={`https://github.com/vitessio/vitess/commit/${entry.git_ref}`}
         >
-          {entry.pull_nb}
+          {entry.git_ref.slice(0, 6)}
         </Link>
       );
-    } else {
-      newData["PR"] = <span></span>;
-    }
-
-    newData["Go version"] = entry.golang_version;
-
-    newData["Status"] = (
-      <span
-        className={twMerge(
-          "text-lg text-white px-4 rounded-full",
-          entry.status === "failed" && "bg-[#dd1a2a]",
-          entry.status === "finished" && "bg-[#00aa00]",
-          entry.status === "started" && "bg-[#3a3aed]"
-        )}
-      >
-        {entry.status}
-      </span>
-    );
-
-    return newData;
-  });
+
+      newData["Source"] = entry.source;
+
+      newData["Started"] = formatDate(entry.started_at) || "N/A";
+
+      newData["Finished"] = formatDate(entry.finished_at) || "N/A";
+
+      newData["Type"] = entry.type_of;
+
+      if (entry.pull_nb) {
+        newData["PR"] = (
+          <Link
+            target="__blank"
+            rel="noopener noreferrer"
+            className="text-primary"
+            to={`https://github.com/vitessio/vitess/pull/${entry.pull_nb}`}
+          >
+            {entry.pull_nb}
+          </Link>
+        );
+      } else {
+        newData["PR"] = <span></span>;
+      }
+
+      newData["Go version"] = entry.golang_version;
+
+      newData["Status"] = (
+        <span
+          className={twMerge(
+            "text-lg text-white px-4 rounded-full",
+            entry.status === "failed" && "bg-[#dd1a2a]",
+            entry.status === "finished" && "bg-[#00aa00]",
+            entry.status === "started" && "bg-[#3a3aed]"
+          )}
+        >
+          {entry.status}
+        </span>
+      );
+
+      return newData;
+    });
+
+    setPreviousExecutions(transformedData);
+  }, [data]);
 
   return (
     <section className="p-page mt-20 flex flex-col overflow-y-scroll">

From 1ee233f6a1af01ad2c7054fde7e8ee617198acd8 Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Thu, 25 Apr 2024 00:24:03 +0530
Subject: [PATCH 5/9] remove the hardcoded data

---
 website/src/pages/StatusPage/data.json | 552 -------------------------
 1 file changed, 552 deletions(-)
 delete mode 100644 website/src/pages/StatusPage/data.json

diff --git a/website/src/pages/StatusPage/data.json b/website/src/pages/StatusPage/data.json
deleted file mode 100644
index 81bbeb6c2..000000000
--- a/website/src/pages/StatusPage/data.json
+++ /dev/null
@@ -1,552 +0,0 @@
-[
-    {
-        "uuid": "875f2043-580c-4d16-9d04-1690daff6383",
-        "source": "cron",
-        "git_ref": "204bc50817a138e98486177a8900bfd0bedaecb7",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-24T00:00:23Z",
-        "finished_at": "2024-04-24T00:12:35Z"
-    },
-    {
-        "uuid": "278890d5-42bb-42ef-bf7d-6b20aca41780",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:59:11Z",
-        "finished_at": "2024-04-23T01:01:05Z"
-    },
-    {
-        "uuid": "ec402e63-1bc9-405a-a7cd-0aa74b169480",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:57:16Z",
-        "finished_at": "2024-04-23T00:59:09Z"
-    },
-    {
-        "uuid": "172a2451-e3f4-4cd3-bc87-4d4f5bf293a3",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:55:23Z",
-        "finished_at": "2024-04-23T00:57:15Z"
-    },
-    {
-        "uuid": "79ab0f77-2915-4b5a-a66f-64e26f72e67f",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:53:28Z",
-        "finished_at": "2024-04-23T00:55:22Z"
-    },
-    {
-        "uuid": "669c009c-0d77-4719-ad73-369f9cb359d2",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:51:34Z",
-        "finished_at": "2024-04-23T00:53:27Z"
-    },
-    {
-        "uuid": "e3f3a946-8c49-46fb-ba7f-dd586de673c6",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:49:39Z",
-        "finished_at": "2024-04-23T00:51:33Z"
-    },
-    {
-        "uuid": "28aea9ae-97a3-4621-a518-f3cc83ef37a9",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:47:46Z",
-        "finished_at": "2024-04-23T00:49:39Z"
-    },
-    {
-        "uuid": "ed38ba2a-5f49-45c6-846d-7acd9929d880",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:45:50Z",
-        "finished_at": "2024-04-23T00:47:45Z"
-    },
-    {
-        "uuid": "27040bfb-05f4-4dd5-8311-b89f28b1e387",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:35:16Z",
-        "finished_at": "2024-04-23T00:45:49Z"
-    },
-    {
-        "uuid": "e240c833-4bb3-45f1-a21a-bb896d840d4d",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:31:27Z",
-        "finished_at": "2024-04-23T00:35:16Z"
-    },
-    {
-        "uuid": "9d49a9f8-ea98-4375-bd49-43cbc58947ce",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:27:37Z",
-        "finished_at": "2024-04-23T00:31:26Z"
-    },
-    {
-        "uuid": "c5846378-52e2-4c63-aead-607e52346548",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:23:44Z",
-        "finished_at": "2024-04-23T00:27:36Z"
-    },
-    {
-        "uuid": "2869067b-8526-47a2-a9c9-d453c488d319",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:19:50Z",
-        "finished_at": "2024-04-23T00:23:42Z"
-    },
-    {
-        "uuid": "722ec96d-886a-4efa-9550-68face81635f",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:15:57Z",
-        "finished_at": "2024-04-23T00:19:48Z"
-    },
-    {
-        "uuid": "9cf13d09-df78-46fd-8e60-43fb5396bfee",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:12:05Z",
-        "finished_at": "2024-04-23T00:15:56Z"
-    },
-    {
-        "uuid": "023343ac-16fd-4bb6-95b4-9cac0de17f6b",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:08:11Z",
-        "finished_at": "2024-04-23T00:12:04Z"
-    },
-    {
-        "uuid": "fb7ca6cd-0050-43c0-9028-ddfd11a73a19",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:04:17Z",
-        "finished_at": "2024-04-23T00:08:10Z"
-    },
-    {
-        "uuid": "b55f5cfa-995f-49c4-b8a9-b9befb6a3685",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-23T00:00:25Z",
-        "finished_at": "2024-04-23T00:04:16Z"
-    },
-    {
-        "uuid": "f830fa3b-3b99-47e0-bc5b-9fd081a57f75",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "finished",
-        "type_of": "tpcc",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-22T00:00:23Z",
-        "finished_at": "2024-04-22T00:10:41Z"
-    },
-    {
-        "uuid": "60a597f1-f93d-4ab7-8745-9730dcdc487e",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "failed",
-        "type_of": "tpcc_fk_unmanaged",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-21T00:09:10Z",
-        "finished_at": "2024-04-21T00:15:16Z"
-    },
-    {
-        "uuid": "66efebb3-1ebe-495c-b427-3f170fd28fcc",
-        "source": "cron",
-        "git_ref": "14b36d030ebe605894ff29eba6c7a1ba7d716fba",
-        "status": "failed",
-        "type_of": "tpcc_fk_unmanaged",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-21T00:00:26Z",
-        "finished_at": "2024-04-21T00:09:09Z"
-    },
-    {
-        "uuid": "e956aba8-84c4-43d1-b450-0db25845c410",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "e167ca8fb1ed988c13878ac2d0a1ca8f0e8b6dc1",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-20T00:00:44Z",
-        "finished_at": "2024-04-20T00:09:02Z"
-    },
-    {
-        "uuid": "63b17298-c540-44d2-963c-4ff0f39be986",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:36:18Z",
-        "finished_at": "2024-04-19T00:40:04Z"
-    },
-    {
-        "uuid": "ab9289ae-9942-44e9-b5f2-14f4a921f8b9",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:32:35Z",
-        "finished_at": "2024-04-19T00:36:17Z"
-    },
-    {
-        "uuid": "f9f55b0a-1349-4516-8dfd-f20f045d47a6",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:28:50Z",
-        "finished_at": "2024-04-19T00:32:34Z"
-    },
-    {
-        "uuid": "fcb449c5-7915-4fa7-b353-1a39bb3ce48e",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:25:00Z",
-        "finished_at": "2024-04-19T00:28:49Z"
-    },
-    {
-        "uuid": "b310c643-59af-4d36-91ef-59e7c9618ba6",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:21:14Z",
-        "finished_at": "2024-04-19T00:24:59Z"
-    },
-    {
-        "uuid": "0b05020c-f5f9-4cdd-8a77-00b550de5e06",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:17:33Z",
-        "finished_at": "2024-04-19T00:21:14Z"
-    },
-    {
-        "uuid": "90b45b4d-32bc-4ad8-8099-bc17a5b84223",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:13:50Z",
-        "finished_at": "2024-04-19T00:17:32Z"
-    },
-    {
-        "uuid": "e38aa8c1-e2cd-434a-b985-7c9fdd5558d4",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:10:06Z",
-        "finished_at": "2024-04-19T00:13:49Z"
-    },
-    {
-        "uuid": "ad54a345-d5b6-41aa-a689-2f815845a697",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-19T00:00:26Z",
-        "finished_at": "2024-04-19T00:10:04Z"
-    },
-    {
-        "uuid": "ca403e54-2126-4f51-ad9e-afd19720544d",
-        "source": "cron",
-        "git_ref": "f11de060c218d6663098b4094e246bec9a0e5f26",
-        "status": "failed",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-18T00:07:00Z",
-        "finished_at": "2024-04-18T00:13:06Z"
-    },
-    {
-        "uuid": "913148a4-3652-4be1-bf13-8cebbe339cfc",
-        "source": "cron",
-        "git_ref": "f11de060c218d6663098b4094e246bec9a0e5f26",
-        "status": "failed",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-18T00:00:22Z",
-        "finished_at": "2024-04-18T00:06:59Z"
-    },
-    {
-        "uuid": "c071496a-2c1d-4940-b37c-656aa1b7d2aa",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "0784b659d39a15509c324750540071b6cc28864a",
-        "status": "finished",
-        "type_of": "tpcc_unsharded",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-17T00:00:21Z",
-        "finished_at": "2024-04-17T00:09:52Z"
-    },
-    {
-        "uuid": "008b6e83-9d97-4679-ab9a-f848c2b68a04",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:58:02Z",
-        "finished_at": "2024-04-16T03:01:50Z"
-    },
-    {
-        "uuid": "42c17cb2-01dc-4732-9a72-61f8ab4be1a9",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:54:10Z",
-        "finished_at": "2024-04-16T02:58:01Z"
-    },
-    {
-        "uuid": "8b04e33c-0fed-4cea-aa1f-69cf5ff8a345",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:50:16Z",
-        "finished_at": "2024-04-16T02:54:08Z"
-    },
-    {
-        "uuid": "2791bc92-9964-4231-93f8-a4e5aa429324",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:46:15Z",
-        "finished_at": "2024-04-16T02:50:15Z"
-    },
-    {
-        "uuid": "03e2225b-41f4-453f-93ba-47d0bc1809c5",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:42:22Z",
-        "finished_at": "2024-04-16T02:46:14Z"
-    },
-    {
-        "uuid": "cd84ea75-72aa-4e80-9a1c-fb990637d554",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:38:23Z",
-        "finished_at": "2024-04-16T02:42:20Z"
-    },
-    {
-        "uuid": "21974123-d1d4-49ea-8076-30c2824176e5",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "finished",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:28:47Z",
-        "finished_at": "2024-04-16T02:38:22Z"
-    },
-    {
-        "uuid": "4f6d632d-b7b3-4539-b9e0-ddc79595fb36",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "failed",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:22:48Z",
-        "finished_at": "2024-04-16T02:28:46Z"
-    },
-    {
-        "uuid": "4545dcf6-feec-46f8-9475-f9bf04587649",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "failed",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:16:49Z",
-        "finished_at": "2024-04-16T02:22:47Z"
-    },
-    {
-        "uuid": "4a9deb8e-e4c1-45df-9296-f28e91c05881",
-        "source": "cron_release-19.0-branch",
-        "git_ref": "05e8ad110e6e360740403f29f6bfa50f988f5590",
-        "status": "failed",
-        "type_of": "tpcc_fk",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:08:28Z",
-        "finished_at": "2024-04-16T02:16:48Z"
-    },
-    {
-        "uuid": "5e00f904-0b38-4745-85b9-7645a640a25a",
-        "source": "cron",
-        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:06:35Z",
-        "finished_at": "2024-04-16T02:08:27Z"
-    },
-    {
-        "uuid": "00a8ac9f-a1e8-42ef-9978-4f886cc65ea6",
-        "source": "cron",
-        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:04:40Z",
-        "finished_at": "2024-04-16T02:06:34Z"
-    },
-    {
-        "uuid": "970babc6-21db-4606-9572-719fac9eb59a",
-        "source": "cron",
-        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:02:45Z",
-        "finished_at": "2024-04-16T02:04:39Z"
-    },
-    {
-        "uuid": "c19ce5ea-0aa8-4603-8056-d37cb3748a7d",
-        "source": "cron",
-        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T02:00:50Z",
-        "finished_at": "2024-04-16T02:02:44Z"
-    },
-    {
-        "uuid": "1cff1c1d-07b4-4fae-b3c0-48a1c36efbde",
-        "source": "cron",
-        "git_ref": "9e40015748ede158357bd7291f583db138abc3df",
-        "status": "finished",
-        "type_of": "oltp-readonly",
-        "pull_nb": 0,
-        "golang_version": "1.22.0",
-        "started_at": "2024-04-16T01:58:56Z",
-        "finished_at": "2024-04-16T02:00:50Z"
-    }
-]
\ No newline at end of file

From 811693c83513c33f7c7a616449104d07760489ca Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Fri, 26 Apr 2024 02:57:07 +0530
Subject: [PATCH 6/9] added shadcn `select` component

---
 website/package.json                        |   1 +
 website/src/components/ui/select.tsx        | 158 ++++++++++++++++++++
 website/src/pages/StatusPage/StatusPage.tsx | 139 ++++++++++-------
 3 files changed, 247 insertions(+), 51 deletions(-)
 create mode 100644 website/src/components/ui/select.tsx

diff --git a/website/package.json b/website/package.json
index 2b5f504cd..98bfddbd9 100644
--- a/website/package.json
+++ b/website/package.json
@@ -15,6 +15,7 @@
     "@nivo/line": "^0.83.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "bytes": "^3.1.2",
     "class-variance-authority": "^0.7.0",
diff --git a/website/src/components/ui/select.tsx b/website/src/components/ui/select.tsx
new file mode 100644
index 000000000..7ce251032
--- /dev/null
+++ b/website/src/components/ui/select.tsx
@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/library/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index 5dddd4679..7b3d1cc05 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -21,6 +21,15 @@ import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import ExecutionQueue from "./components/PreviousExecutions";
 import PreviousExecutions from "./components/PreviousExecutions";
+import datas from "./data.json";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 interface dataTypes {
   uuid: string;
@@ -45,36 +54,42 @@ export default function StatusPage() {
   );
 
   const [filters, setFilters] = useState({
-    type: '',
-    status: '',
-    source: '',
+    type: "",
+    status: "",
+    source: "",
   });
 
   const filterData = (data: dataTypes[]) => {
     return data.filter((item) => {
-      const itemType = item.type_of ? item.type_of.toString() : '';
-      const itemSource = item.source ? item.source.toString() : '';
-      const itemStatus = item.status ? item.status.toString() : '';
+      const itemType = item.type_of ? item.type_of.toString() : "";
+      const itemSource = item.source ? item.source.toString() : "";
+      const itemStatus = item.status ? item.status.toString() : "";
 
       const matchesType =
-        filters.type === '' || filters.type === undefined || itemType === filters.type;
+        filters.type === "" ||
+        filters.type === "All" ||
+        itemType === filters.type;
       const matchesSource =
-        filters.source === '' || filters.source === undefined || itemSource === filters.source;
+        filters.source === "" ||
+        filters.source === "All" ||
+        itemSource === filters.source;
       const matchesStatus =
-        filters.status === '' || filters.status === undefined || itemStatus === filters.status;
+        filters.status === "" ||
+        filters.status === "All" ||
+        itemStatus === filters.status;
 
-      return (matchesType || filters.type === '' || filters.type === undefined) &&
-      (matchesSource || filters.source === '' || filters.source === undefined) &&
-      (matchesStatus || filters.status === '' || filters.status === undefined);
+      return matchesType && matchesSource && matchesStatus;
     });
   };
 
-  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setFilters((prevFilters) => ({ ...prevFilters, [name]: value }));
+  const handleFilterChange = (name: string, value: string) => {
+    setFilters((prevFilters) => ({
+      ...prevFilters,
+      [name]: value === "" ? "" : value,
+    }));
   };
 
-  const filteredDataQueue = filterData(dataQueue) as dataTypes[]; 
+  const filteredDataQueue = filterData(dataQueue) as dataTypes[];
   const filteredPreviousDataExe = filterData(dataPreviousExe) as dataTypes[];
 
   return (
@@ -84,42 +99,64 @@ export default function StatusPage() {
       <div className="border-accent border mt-5" />
 
       {/* FILTERS OPTIONS*/}
-      <div>
-        <label>
-          Type:
-          <select name="type" value={filters.type} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
-            <option value="">All</option>
-            {[...new Set(dataPreviousExe.map((item: any) => item.type_of))].map((type) => (
-                <option key={type} value={type}>
+
+      <div className="flex p-5 gap-4 lg:pl-20">
+        <Select
+          value={filters.type}
+          onValueChange={(value) => handleFilterChange("type", value)}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="All">All</SelectItem>
+            {[...new Set(datas.map((item: any) => item.type_of))].map(
+              (type) => (
+                <SelectItem key={type} value={type}>
                   {type}
-                </option>
-              ))}
-          </select>
-        </label>
-
-        <label>
-          Source:
-          <select name="source" value={filters.source} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
-            <option value="">All</option>
-            {[...new Set(dataPreviousExe.map((item: any) => item.source))].map((source) => (
-              <option key={source} value={source}>
-                {source}
-              </option>
-            ))}
-          </select>
-        </label>
-
-        <label>
-          Status:
-          <select name="status" value={filters.status} onChange={handleFilterChange} className="bg-accent rounded-xl p-1">
-            <option value="">All</option>
-            {[...new Set(dataPreviousExe.map((item: any) => item.status))].map((status) => (
-              <option key={status} value={status}>
-                {status}
-              </option>
-            ))}
-          </select>
-        </label>
+                </SelectItem>
+              )
+            )}
+          </SelectContent>
+        </Select>
+
+        <Select
+          onValueChange={(value) => handleFilterChange("source", value)}
+          value={filters.source}
+        >
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Sources" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="All">All</SelectItem>
+            {[...new Set(datas.map((item: any) => item.source))].map(
+              (source) => (
+                <SelectItem key={source} value={source}>
+                  {source}
+                </SelectItem>
+              )
+            )}
+          </SelectContent>
+        </Select>
+
+        <Select
+          onValueChange={(value) => handleFilterChange("status", value)}
+          value={filters.status}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="All">All</SelectItem>
+            {[...new Set(datas.map((item: any) => item.status))].map(
+              (status) => (
+                <SelectItem key={status} value={status}>
+                  {status}
+                </SelectItem>
+              )
+            )}
+          </SelectContent>
+        </Select>
       </div>
 
       {/* EXECUTION QUEUE */}

From 2a64125ec5e7d2ea4109a65c3316bfdcce192375 Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Fri, 26 Apr 2024 23:17:19 +0530
Subject: [PATCH 7/9] added the license and removed the traces of hardcoded
 data

---
 website/src/components/ui/select.tsx        | 16 ++++++++++++++++
 website/src/pages/StatusPage/StatusPage.tsx |  7 +++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/website/src/components/ui/select.tsx b/website/src/components/ui/select.tsx
index 7ce251032..ecd9b9af4 100644
--- a/website/src/components/ui/select.tsx
+++ b/website/src/components/ui/select.tsx
@@ -1,3 +1,19 @@
+/*
+Copyright 2023 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index 7b3d1cc05..a553b56a2 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -21,7 +21,6 @@ import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import ExecutionQueue from "./components/PreviousExecutions";
 import PreviousExecutions from "./components/PreviousExecutions";
-import datas from "./data.json";
 
 import {
   Select,
@@ -110,7 +109,7 @@ export default function StatusPage() {
           </SelectTrigger>
           <SelectContent>
             <SelectItem value="All">All</SelectItem>
-            {[...new Set(datas.map((item: any) => item.type_of))].map(
+            {[...new Set(dataPreviousExe.map((item: any) => item.type_of))].map(
               (type) => (
                 <SelectItem key={type} value={type}>
                   {type}
@@ -129,7 +128,7 @@ export default function StatusPage() {
           </SelectTrigger>
           <SelectContent>
             <SelectItem value="All">All</SelectItem>
-            {[...new Set(datas.map((item: any) => item.source))].map(
+            {[...new Set(dataPreviousExe.map((item: any) => item.source))].map(
               (source) => (
                 <SelectItem key={source} value={source}>
                   {source}
@@ -148,7 +147,7 @@ export default function StatusPage() {
           </SelectTrigger>
           <SelectContent>
             <SelectItem value="All">All</SelectItem>
-            {[...new Set(datas.map((item: any) => item.status))].map(
+            {[...new Set(dataPreviousExe.map((item: any) => item.status))].map(
               (status) => (
                 <SelectItem key={status} value={status}>
                   {status}

From fb28652a1b7ee1f2f155e7c67659d33fbe892de3 Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Mon, 6 May 2024 19:33:39 +0530
Subject: [PATCH 8/9] added some padding :)

---
 website/src/pages/StatusPage/StatusPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index a553b56a2..24615536b 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -99,7 +99,7 @@ export default function StatusPage() {
 
       {/* FILTERS OPTIONS*/}
 
-      <div className="flex p-5 gap-4 lg:pl-20">
+      <div className="flex p-5 gap-4 lg:pl-28">
         <Select
           value={filters.type}
           onValueChange={(value) => handleFilterChange("type", value)}

From 8d7472b4dca13fe9149dcce28ac2acf2e4e0e3cf Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Sat, 11 May 2024 01:21:58 +0530
Subject: [PATCH 9/9] alligned the select option at the center'

---
 website/src/pages/StatusPage/StatusPage.tsx | 154 ++++++++++----------
 1 file changed, 78 insertions(+), 76 deletions(-)

diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index 24615536b..6ea9c8338 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -21,6 +21,7 @@ import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import ExecutionQueue from "./components/PreviousExecutions";
 import PreviousExecutions from "./components/PreviousExecutions";
+import datas from "./data.json";
 
 import {
   Select,
@@ -98,95 +99,96 @@ export default function StatusPage() {
       <div className="border-accent border mt-5" />
 
       {/* FILTERS OPTIONS*/}
-
-      <div className="flex p-5 gap-4 lg:pl-28">
-        <Select
-          value={filters.type}
-          onValueChange={(value) => handleFilterChange("type", value)}
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Type" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="All">All</SelectItem>
-            {[...new Set(dataPreviousExe.map((item: any) => item.type_of))].map(
-              (type) => (
+      <div className="flex flex-col items-center">
+        <div className="flex p-5 gap-4 ">
+          <Select
+            value={filters.type}
+            onValueChange={(value) => handleFilterChange("type", value)}
+          >
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="All">All</SelectItem>
+              {[
+                ...new Set(dataPreviousExe.map((item: any) => item.type_of)),
+              ].map((type) => (
                 <SelectItem key={type} value={type}>
                   {type}
                 </SelectItem>
-              )
-            )}
-          </SelectContent>
-        </Select>
-
-        <Select
-          onValueChange={(value) => handleFilterChange("source", value)}
-          value={filters.source}
-        >
-          <SelectTrigger className="w-[200px]">
-            <SelectValue placeholder="Sources" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="All">All</SelectItem>
-            {[...new Set(dataPreviousExe.map((item: any) => item.source))].map(
-              (source) => (
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select
+            onValueChange={(value) => handleFilterChange("source", value)}
+            value={filters.source}
+          >
+            <SelectTrigger className="w-[200px]">
+              <SelectValue placeholder="Sources" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="All">All</SelectItem>
+              {[
+                ...new Set(dataPreviousExe.map((item: any) => item.source)),
+              ].map((source) => (
                 <SelectItem key={source} value={source}>
                   {source}
                 </SelectItem>
-              )
-            )}
-          </SelectContent>
-        </Select>
-
-        <Select
-          onValueChange={(value) => handleFilterChange("status", value)}
-          value={filters.status}
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Status" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="All">All</SelectItem>
-            {[...new Set(dataPreviousExe.map((item: any) => item.status))].map(
-              (status) => (
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select
+            onValueChange={(value) => handleFilterChange("status", value)}
+            value={filters.status}
+          >
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="All">All</SelectItem>
+              {[
+                ...new Set(dataPreviousExe.map((item: any) => item.status)),
+              ].map((status) => (
                 <SelectItem key={status} value={status}>
                   {status}
                 </SelectItem>
-              )
-            )}
-          </SelectContent>
-        </Select>
-      </div>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
 
-      {/* EXECUTION QUEUE */}
-      {!isLoadingQueue && dataQueue && dataQueue.length > 0 && (
-        <ExecutionQueue data={filteredDataQueue} title={"Execution Queue"} />
-      )}
-
-      {/* PREVIOUS EXECUTIONS */}
-      {!isLoadingPreviousExe &&
-        dataPreviousExe &&
-        dataPreviousExe.length > 0 && (
-          <PreviousExecutions
-            data={filteredPreviousDataExe}
-            title={"Previous Executions"}
-          />
+        {/* EXECUTION QUEUE */}
+        {!isLoadingQueue && dataQueue && dataQueue.length > 0 && (
+          <ExecutionQueue data={filteredDataQueue} title={"Execution Queue"} />
         )}
 
-      {/* SHOW LOADER BENEATH IF EITHER IS LOADING */}
-      {(isLoadingPreviousExe || isLoadingQueue) && (
-        <div className="flex justify-center w-full my-16">
-          <RingLoader
-            loading={isLoadingPreviousExe || isLoadingQueue}
-            color="#E77002"
-            size={300}
-          />
-        </div>
-      )}
+        {/* PREVIOUS EXECUTIONS */}
+        {!isLoadingPreviousExe &&
+          dataPreviousExe &&
+          dataPreviousExe.length > 0 && (
+            <PreviousExecutions
+              data={filteredPreviousDataExe}
+              title={"Previous Executions"}
+            />
+          )}
+
+        {/* SHOW LOADER BENEATH IF EITHER IS LOADING */}
+        {(isLoadingPreviousExe || isLoadingQueue) && (
+          <div className="flex justify-center w-full my-16">
+            <RingLoader
+              loading={isLoadingPreviousExe || isLoadingQueue}
+              color="#E77002"
+              size={300}
+            />
+          </div>
+        )}
 
-      {errorQueue && (
-        <div className="my-10 text-center text-red-500">{errorQueue}</div>
-      )}
+        {errorQueue && (
+          <div className="my-10 text-center text-red-500">{errorQueue}</div>
+        )}
+      </div>
     </>
   );
 }