= ({
-outline-offset-4
${styles.row.running[variant]}`
)}
+ onMouseEnter={() => setHoveredRow(row.original)}
+ onMouseLeave={() => setHoveredRow(null)}
>
{row.getVisibleCells().map((cell, index) => (
= ({
+ className,
+ variant = "light",
+ layer: { namespace, name },
+ run,
+}) => {
+ const styles = {
+ light: `bg-nuances-50
+ text-nuances-black
+ fill-nuances-black
+ border-primary-500`,
+ dark: `bg-nuances-400
+ text-nuances-50
+ fill-nuances-50
+ border-nuances-black`,
+ };
+
+ const [selectedAttempts, setSelectedAttempts] = useState([]);
+ const [activeAttempt, setActiveAttempt] = useState(null);
+ /* TODO: The states above should eventually be moved to search params.
+ An unresolved bug in the useSearchParams hook is causing rerenders which
+ triggers the useEffect and resets the selectedAttempts and activeAttempt states. */
+ const [displayLogsCopiedTooltip, setDisplayLogsCopiedTooltip] =
+ useState(false);
+
+ const attemptsQuery = useQuery({
+ queryKey: reactQueryKeys.attempts(run),
+ queryFn: () => fetchAttempts(run),
+ });
+
+ const logsQuery = useQuery({
+ queryKey: reactQueryKeys.logs(run, activeAttempt),
+ queryFn: () => fetchLogs(run, activeAttempt),
+ enabled: activeAttempt !== null && !attemptsQuery.isFetching,
+ });
+
+ useEffect(() => {
+ setActiveAttempt(null);
+ setSelectedAttempts([]);
+
+ if (attemptsQuery.data && attemptsQuery.data.count > 0) {
+ setActiveAttempt(attemptsQuery.data.count - 1);
+ setSelectedAttempts([attemptsQuery.data.count - 1]);
+ }
+ }, [attemptsQuery.data]);
+
+ const handleCopy = () => {
+ if (logsQuery.isSuccess) {
+ navigator.clipboard.writeText(logsQuery.data.results.join("")); // TODO: check if this works properly
+ setDisplayLogsCopiedTooltip(true);
+ }
+ };
+
+ const handleClose = (attempt: number) => {
+ setSelectedAttempts(selectedAttempts.filter((a) => a !== attempt));
+ setActiveAttempt(activeAttempt === attempt ? null : activeAttempt);
+ };
+
+ return (
+
+ {/* TODO: add overflow-auto to the div below, need to make proper floating dropdowns before */}
+
+
+ {name}
+ {namespace}
+ 0}
+ variant={variant}
+ >
+
+
+
+
+ logsQuery.refetch()}
+ />
+ setDisplayLogsCopiedTooltip(false)}
+ >
+
+
+
+
+
+
+
+ {selectedAttempts
+ .sort((a, b) => b - a)
+ .map((attempt) => (
+ setActiveAttempt(attempt)}
+ onClose={() => handleClose(attempt)}
+ />
+ ))}
+
+
+
+
+ {activeAttempt !== null &&
+ logsQuery.isSuccess &&
+ logsQuery.data.results.map((log, i) => (
+
+ |
+ {i + 1}
+ |
+ {log} |
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default ModalLogsTerminal;
diff --git a/ui/src/components/widgets/Running.tsx b/ui/src/components/widgets/Running.tsx
new file mode 100644
index 00000000..8816f00e
--- /dev/null
+++ b/ui/src/components/widgets/Running.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+import SyncIcon from "@/assets/icons/SyncIcon";
+
+const Running: React.FC = () => {
+ return (
+
+ Running
+
+
+ );
+};
+
+export default Running;
diff --git a/ui/src/components/tags/Tag.tsx b/ui/src/components/widgets/Tag.tsx
similarity index 89%
rename from ui/src/components/tags/Tag.tsx
rename to ui/src/components/widgets/Tag.tsx
index 514a61e7..7924cbc5 100644
--- a/ui/src/components/tags/Tag.tsx
+++ b/ui/src/components/widgets/Tag.tsx
@@ -9,13 +9,13 @@ export interface TagProps {
const Tag: React.FC = ({ variant }) => {
const styles = {
success: `bg-status-success-default
- text-nuances-black`,
+ text-nuances-black`,
warning: `bg-status-warning-default
- text-nuances-black`,
+ text-nuances-black`,
error: `bg-status-error-default
- text-nuances-white`,
+ text-nuances-white`,
disabled: `bg-nuances-50
- text-nuances-200`,
+ text-nuances-200`,
};
const getContent = () => {
diff --git a/ui/src/layout/Layout.tsx b/ui/src/layout/Layout.tsx
index 135f387f..f4a0bf82 100644
--- a/ui/src/layout/Layout.tsx
+++ b/ui/src/layout/Layout.tsx
@@ -12,7 +12,7 @@ const Layout: React.FC = () => {
className={`
flex
${theme === "light" ? "bg-primary-100" : "bg-nuances-black"}
- `}
+ `}
>
diff --git a/ui/src/pages/layers/Layers.tsx b/ui/src/pages/Layers.tsx
similarity index 77%
rename from ui/src/pages/layers/Layers.tsx
rename to ui/src/pages/Layers.tsx
index dddc71e1..4dc23916 100644
--- a/ui/src/pages/layers/Layers.tsx
+++ b/ui/src/pages/Layers.tsx
@@ -7,16 +7,16 @@ import { reactQueryKeys } from "@/clients/reactQueryConfig";
import { ThemeContext } from "@/contexts/ThemeContext";
-import Button from "@/components/buttons/Button";
-import Input from "@/components/inputs/Input";
-import Dropdown from "@/components/inputs/Dropdown";
-import Toggle from "@/components/buttons/Toggle";
+import Button from "@/components/core/Button";
+import Input from "@/components/core/Input";
+import Dropdown from "@/components/core/Dropdown";
+import Toggle from "@/components/core/Toggle";
import NavigationButton from "@/components/navigation/NavigationButton";
import Card from "@/components/cards/Card";
import Table from "@/components/tables/Table";
-import StateDropdown from "@/pages/layers/components/StateDropdown";
-import RepositoriesDropdown from "@/pages/layers/components/RepositoriesDropdown";
+import StateDropdown from "@/components/dropdowns/StateDropdown";
+import RepositoriesDropdown from "@/components/dropdowns/RepositoriesDropdown";
import { LayerState } from "@/clients/layers/types";
@@ -108,8 +108,6 @@ const Layers: React.FC = () => {
{
{
`}
>
{view === "grid" ? (
-
+
{layersQuery.isLoading ? (
Array.from({ length: 100 }).map((_, index) => (
))
) : layersQuery.isError ? (
- An error has occurred
+
+ An error has occurred.
+
) : layersQuery.isSuccess ? (
- layersQuery.data.results.map((layer, index) => (
-
- ))
+ layersQuery.data.results.length > 0 ? (
+ layersQuery.data.results.map((layer, index) => (
+
+ ))
+ ) : (
+
+ No layers found
+
+ )
) : (
<>
)}
@@ -258,9 +282,37 @@ const Layers: React.FC = () => {
{layersQuery.isLoading ? (
) : layersQuery.isError ? (
- An error has occurred
+
+ An error has occurred.
+
) : layersQuery.isSuccess ? (
-
+ layersQuery.data.results.length > 0 ? (
+
+ ) : (
+
+
+ No layers found
+
+
+ )
) : (
<>
)}
diff --git a/ui/src/pages/login/Login.tsx b/ui/src/pages/Login.tsx
similarity index 98%
rename from ui/src/pages/login/Login.tsx
rename to ui/src/pages/Login.tsx
index fd83b800..7d9e2bfa 100644
--- a/ui/src/pages/login/Login.tsx
+++ b/ui/src/pages/Login.tsx
@@ -3,8 +3,8 @@ import { useNavigate } from "react-router-dom";
import { ThemeContext } from "@/contexts/ThemeContext";
-import Input from "@/components/inputs/Input";
-import Button from "@/components/buttons/Button";
+import Input from "@/components/core/Input";
+import Button from "@/components/core/Button";
import SocialButton from "@/components/buttons/SocialButton";
import Burrito from "@/assets/illustrations/Burrito";
diff --git a/ui/src/pages/Logs.tsx b/ui/src/pages/Logs.tsx
new file mode 100644
index 00000000..761f6dc4
--- /dev/null
+++ b/ui/src/pages/Logs.tsx
@@ -0,0 +1,335 @@
+import React, { useContext, useCallback, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+
+import { fetchLayers } from "@/clients/layers/client";
+import { reactQueryKeys } from "@/clients/reactQueryConfig";
+
+import { ThemeContext } from "@/contexts/ThemeContext";
+
+import Button from "@/components/core/Button";
+import Input from "@/components/core/Input";
+import Dropdown from "@/components/core/Dropdown";
+import RepositoriesDropdown from "@/components/dropdowns/RepositoriesDropdown";
+import DateDropdown from "@/components/dropdowns/DateDropdown";
+import Toggle from "@/components/core/Toggle";
+import RunCardLoader from "@/components/loaders/RunCardLoader";
+import RunCard from "@/components/cards/RunCard";
+import LogsTerminal from "@/components/tools/LogsTerminal";
+
+import SearchIcon from "@/assets/icons/SearchIcon";
+
+import { Layer } from "@/clients/layers/types";
+
+const Logs: React.FC = () => {
+ const { theme } = useContext(ThemeContext);
+ const { layerId, runId } = useParams();
+ const [searchParams, setSerchParams] = useSearchParams();
+ const navigate = useNavigate();
+
+ const search = useMemo (
+ () => searchParams.get("search") || "",
+ [searchParams]
+ );
+
+ const setSearch = useCallback(
+ (search: string) => {
+ searchParams.set("search", search);
+ setSerchParams(searchParams);
+ },
+ [searchParams, setSerchParams]
+ );
+
+ const repositoryFilter = useMemo(() => {
+ const param = searchParams.get("repositories");
+ return param ? param.split(",") : [];
+ }, [searchParams]);
+
+ const setRepositoryFilter = useCallback(
+ (repositoryFilter: string[]) => {
+ searchParams.set("repositories", repositoryFilter.join(","));
+ setSerchParams(searchParams);
+ },
+ [searchParams, setSerchParams]
+ );
+
+ const dateFilter = useMemo<"ascending" | "descending" | null>(() => {
+ const param = searchParams.get("date");
+ return param === "ascending"
+ ? "ascending"
+ : param === "descending"
+ ? "descending"
+ : null;
+ }, [searchParams]);
+
+ const setDateFilter = useCallback(
+ (dateFilter: "ascending" | "descending" | null) => {
+ searchParams.set("date", dateFilter || "");
+ setSerchParams(searchParams);
+ },
+ [searchParams, setSerchParams]
+ );
+
+ const hidePRFilter = useMemo(
+ () => searchParams.get("hidepr") !== "false",
+ [searchParams]
+ );
+
+ const setHidePRFilter = useCallback(
+ (hidePRFilter: boolean) => {
+ searchParams.set("hidepr", hidePRFilter.toString());
+ setSerchParams(searchParams);
+ },
+ [searchParams, setSerchParams]
+ );
+
+ const layersQuery = useQuery({
+ queryKey: reactQueryKeys.layers,
+ queryFn: fetchLayers,
+ select: (data) => ({
+ ...data,
+ results: data.results
+ .filter((layer) =>
+ layer.name.toLowerCase().includes(search.toLowerCase())
+ )
+ .filter(
+ (layer) =>
+ repositoryFilter.length === 0 ||
+ repositoryFilter.includes(layer.repository)
+ )
+ .filter((layer) => !hidePRFilter || !layer.isPR)
+ .sort((a, b) =>
+ dateFilter === "ascending"
+ ? new Date(a.lastRunAt).getTime() - new Date(b.lastRunAt).getTime()
+ : dateFilter === "descending"
+ ? new Date(b.lastRunAt).getTime() - new Date(a.lastRunAt).getTime()
+ : 0
+ ),
+ }),
+ });
+
+ const handleActive = (layer: Layer, run?: string) => {
+ navigate({
+ pathname: `/logs/${layer.id}${
+ run
+ ? `/${run}`
+ : layer.latestRuns.length > 0
+ ? `/${layer.latestRuns[0].id}`
+ : ""
+ }`,
+ search: searchParams.toString(),
+ });
+ };
+
+ return (
+
+
+
+
+ Logs
+
+
+
+ }
+ value={search}
+ onChange={(e) => setSearch(e.target.value)}
+ />
+
+
+
+ {`
+ ${
+ layersQuery.isSuccess ? layersQuery.data.results.length : 0
+ } layers
+ `}
+
+
+
+ Filter by
+
+
+
+
+
+
+
+
+
+ setHidePRFilter(!hidePRFilter)}
+ label="Hide Pull Requests"
+ />
+
+
+
+
+
+ {layersQuery.isLoading ? (
+ Array.from({ length: 100 }).map((_, index) => (
+
+ ))
+ ) : layersQuery.isError ? (
+
+ An error has occurred
+
+ ) : layersQuery.isSuccess ? (
+ layersQuery.data.results.length > 0 ? (
+ layersQuery.data.results.map((layer, index) => (
+ handleActive(layer)}
+ handleActive={handleActive}
+ layer={layer}
+ />
+ ))
+ ) : (
+
+ No layers found
+
+ )
+ ) : (
+ <>
+ )}
+
+ {layersQuery.isSuccess &&
+ layersQuery.data.results.length > 0 &&
+ (layerId &&
+ layersQuery.data.results.some((layer) => layer.id === layerId) ? (
+ runId ? (
+ ((activeLayerObject) =>
+ activeLayerObject && (
+
+ ))(
+ layersQuery.data.results.find((layer) => layer.id === layerId)
+ )
+ ) : (
+
+
+ There is no run for this layer...
+
+
+ )
+ ) : (
+
+
+ Select a layer...
+
+
+ ))}
+
+ |