Loading...
33 | }
34 |
35 | if (init === true) {
36 | return props.element
37 | } else {
38 | return The URL of the Bearer Token entered is invalid.
69 | ) 70 | //Once submitted information returns, users are let into the main clusterui 71 | if (submit === true) { 72 | return
45 |
46 | {item.title}
47 |
48 |
49 | {item.description}
50 |
51 |
52 |
74 |
102 |
108 | Log Instance:
109 | {clusterLog.name}{" "}
110 |
111 |
112 |
113 |
114 | {clusterLog.log.map((log: Log, i: number) => (
115 |
116 |
117 | Date:
118 | {log.date}
119 |
120 |
121 | 122 | Podname: 123 | {log.name} 124 | 125 |
126 | 127 | Log: 128 | {log.logs} 129 | 130 |
131 |
132 |
133 | ))}
134 |
135 |
145 |
154 |
155 |
156 |
157 | )
158 | }
159 |
--------------------------------------------------------------------------------
/client/src/features/cluster-log/containers/ClusterLogContainer.js:
--------------------------------------------------------------------------------
1 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2 | import { useState, useEffect } from "react";
3 | import { Button, Box } from "@mui/material";
4 | // import Row from "../Row"
5 | // import {ClusterLog} from "../clusterLogsApiSlice"
6 | import { useGetClusterLogsQuery, } from "../clusterLogsApiSlice";
7 | import ClusterLog from "../components/ClusterLog";
8 | export default function LogPage() {
9 | const [dirInfo, setdirInfo] = useState([]);
10 | const [log, setLog] = useState([]);
11 | const [deleted, setDeleted] = useState("");
12 | useEffect(() => {
13 | fetch("http://localhost:8080/api/getLogs")
14 | .then(process => process.json())
15 | .then(data => {
16 | //console.log(data);
17 | setdirInfo(data);
18 | })
19 | .catch(error => {
20 | console.log(error);
21 | });
22 | }, [log, deleted]);
23 | const createLogHandler = () => {
24 | fetch("http://localhost:8080/api/createLogs", {
25 | method: "POST",
26 | })
27 | .then(process => process.json())
28 | .then(data => {
29 | //console.log(data);
30 | setLog(data);
31 | })
32 | .catch(error => {
33 | console.log(error);
34 | });
35 | };
36 | const store = [];
37 | for (let i = dirInfo.length; i > 0; i--) {
38 | if (dirInfo[i] !== (null || undefined)) {
39 | store.push(_jsx(Box, { children: _jsx(ClusterLog, { setDeleted: setDeleted, logName: dirInfo[i] }) }, i * 123));
40 | }
41 | }
42 | const { data: clusterLog, isLoading: clusterLogIsLoading, isError: clusterLogError, refetch: refetchClusterLogs, } = useGetClusterLogsQuery();
43 | console.log("useGetClusterLogsQuery.data: ", clusterLog);
44 | return (_jsxs("div", { style: { position: "absolute", left: "250px", top: "100px" }, children: [_jsx("h1", { style: {
45 | textAlign: "center",
46 | marginLeft: "32px",
47 | marginBottom: "16px",
48 | minWidth: "700px",
49 | }, children: "Logs" }), _jsx(Button, { style: {
50 | display: "flex",
51 | left: "290px",
52 | marginLeft: "32px",
53 | marginBottom: "16px",
54 | }, variant: "contained", color: "primary", type: "button", onClick: createLogHandler, children: "Create a Log" }), store] }));
55 | }
56 |
--------------------------------------------------------------------------------
/client/src/features/cluster-log/containers/ClusterLogContainer.test.js:
--------------------------------------------------------------------------------
1 | import { jsx as _jsx } from "react/jsx-runtime";
2 | import { afterEach, test } from "vitest";
3 | import { screen, cleanup } from "@testing-library/react";
4 | import { renderWithProviders } from "../../../utils/test-utils";
5 | import ClusterLogContainer from "../containers/ClusterLogContainer";
6 | afterEach(() => {
7 | cleanup();
8 | });
9 | test("Cluster Log Container should render", () => {
10 | renderWithProviders(_jsx(ClusterLogContainer, {}));
11 | // buttons to load correctly
12 | const createLogButton = screen.getByRole("button", { name: /Create A Log/i });
13 | const deleteLogButton = screen.getByRole("button", {
14 | name: /Delete All Logs/i,
15 | });
16 | // Test for Body text
17 | expect(createLogButton).toBeInTheDocument();
18 | expect(deleteLogButton).toBeInTheDocument();
19 | });
20 |
--------------------------------------------------------------------------------
/client/src/features/cluster-log/containers/ClusterLogContainer.test.tsx:
--------------------------------------------------------------------------------
1 | import { afterEach, test } from "vitest"
2 | import { screen, cleanup } from "@testing-library/react"
3 | import { renderWithProviders } from "../../../utils/test-utils"
4 |
5 | import ClusterLogContainer from "../containers/ClusterLogContainer"
6 |
7 | afterEach(() => {
8 | cleanup()
9 | })
10 |
11 | test("Cluster Log Container should render", () => {
12 | renderWithProviders(121 | 122 | Podname: 123 | {log.name} 124 | 125 |
126 | 127 | Log: 128 | {log.logs} 129 | 130 |
131 |
132 |
126 |
189 | )
190 | }
191 |
--------------------------------------------------------------------------------
/client/src/features/cluster-log/containers/clusterLogContainer.js:
--------------------------------------------------------------------------------
1 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2 | // import type React from "react"
3 | import { useState } from "react";
4 | import { Button } from "@mui/material";
5 | // Alert Dialog imports
6 | import * as React from "react";
7 | import Dialog from "@mui/material/Dialog";
8 | import DialogActions from "@mui/material/DialogActions";
9 | import DialogContent from "@mui/material/DialogContent";
10 | import DialogContentText from "@mui/material/DialogContentText";
11 | import DialogTitle from "@mui/material/DialogTitle";
12 | import { useGetClusterLogsQuery } from "../clusterLogsApiSlice";
13 | import ClusterLog from "../components/ClusterLog";
14 | export default function LogPage() {
15 | const [open, setOpen] = useState(false);
16 | //creates a log in the backend once the create log button is pressed.
17 | const createLogHandler = () => {
18 | async function sendCreateLogRequest() {
19 | try {
20 | await fetch("http://localhost:8080/api/createLogs", {
21 | method: "POST",
22 | });
23 | await refetchClusterLogs();
24 | }
25 | catch (error) {
26 | throw new Error(`Something went wrong: ${error.message}`);
27 | }
28 | }
29 | sendCreateLogRequest();
30 | };
31 | //RTK Query to grab log info and to refetch if desired
32 | const { data: clusterLogs, refetch: refetchClusterLogs } = useGetClusterLogsQuery();
33 | //handlers for dialogues and for state modifications.
34 | function AlertDialog() {
35 | const handleClickOpen = () => {
36 | setOpen(true);
37 | };
38 | const handleClose = () => {
39 | setOpen(false);
40 | };
41 | const handleCloseCancel = () => {
42 | setOpen(false);
43 | };
44 | const handleCloseConfirm = () => {
45 | setOpen(false);
46 | deleteLogHandler();
47 | };
48 | return (
49 | // delete all confirmation prompt
50 | _jsxs(React.Fragment, { children: [_jsx(Button, { variant: "outlined", onClick: handleClickOpen, children: "Delete Logs" }), _jsxs(Dialog, { open: open, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [_jsx(DialogTitle, { id: "alert-dialog-title", children: "Are you sure you want to delete all logs?" }), _jsx(DialogContent, { children: _jsx(DialogContentText, { id: "alert-dialog-description", children: "This action is irreversable, please confirm you would like to delete ALL logs." }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleCloseCancel, children: "Cancel" }), _jsx(Button, { onClick: handleCloseConfirm, autoFocus: true, children: "Confirm" })] })] })] }));
51 | }
52 | const confirmDeleteAll = () => {
53 | setOpen(true);
54 | };
55 | //deletes all the logs if the user accepts the confirmation prompt
56 | const deleteLogHandler = async () => {
57 | if (!clusterLogs || clusterLogs.length === 0) {
58 | return;
59 | }
60 | try {
61 | await Promise.all(clusterLogs.map(async (log) => {
62 | try {
63 | await fetch(`http://localhost:8080/api/deleteLogs/${log.name}`, {
64 | method: "DELETE",
65 | });
66 | }
67 | catch (error) {
68 | throw new Error(`Something went wrong: ${error.message}`);
69 | }
70 | }));
71 | await refetchClusterLogs();
72 | }
73 | catch (error) {
74 | throw new Error(`Something went wrong: ${error.message}`);
75 | }
76 | };
77 | return (
78 | // holds, styles, and displays the logs and buttons
79 | _jsxs("div", { style: {
80 | position: "relative",
81 | left: "225px",
82 | top: "90px",
83 | width: "100vw",
84 | height: "100vh",
85 | }, children: [_jsx("h1", { style: {
86 | position: "absolute",
87 | textAlign: "center",
88 | marginLeft: "32px",
89 | marginBottom: "16px",
90 | minWidth: "700px",
91 | left: "-50px",
92 | top: "35px",
93 | }, children: "Logs" }), _jsxs("div", { className: "log-button-container", children: [_jsx(Button, { style: {
94 | display: "absolute",
95 | left: "130px",
96 | top: "100px",
97 | marginLeft: "32px",
98 | marginBottom: "16px",
99 | }, variant: "contained", color: "secondary", type: "button", onClick: createLogHandler, children: "Create a Log" }), _jsx(Button, { id: "delete-all-logs-button", style: {
100 | display: "absolute",
101 | left: "190px",
102 | top: "100px",
103 | marginLeft: "32px",
104 | marginBottom: "16px",
105 | }, variant: "contained", color: "error", type: "button", onClick: confirmDeleteAll, disabled: !clusterLogs || clusterLogs.length === 0 ? true : false, children: "Delete all Logs" })] }), clusterLogs?.map((clusterLog, i) => (_jsx(ClusterLog, { clusterLog: clusterLog }, `clusterLog:${i}`))), _jsx("div", { className: "alert-dialog", style: {
106 | display: "flex",
107 | justifyContent: "center",
108 | marginTop: "16px",
109 | }, children: open === true && _jsx(AlertDialog, {}) })] }));
110 | }
111 |
--------------------------------------------------------------------------------
/client/src/features/cluster-view/clusterViewApiSlice.js:
--------------------------------------------------------------------------------
1 | import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
2 | import { createSlice } from "@reduxjs/toolkit";
3 | // Define an API service for the cluster view
4 | export const clusterApi = createApi({
5 | reducerPath: "clusterApi",
6 | baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:8080/" }),
7 | endpoints: builder => ({
8 | getKubernetesNodes: builder.query({
9 | query: () => "api/nodes",
10 | }),
11 | getKubernetesPods: builder.query({
12 | query: () => "api/pods",
13 | }),
14 | getKubernetesServices: builder.query({
15 | query: () => "api/services",
16 | }),
17 | }),
18 | });
19 | // Auto-generated hooks for the API queries
20 | export const { useGetKubernetesNodesQuery, useGetKubernetesPodsQuery, useGetKubernetesServicesQuery, } = clusterApi;
21 | const initialState = {
22 | pods: ["pod_1"],
23 | };
24 | export const clusterViewSlice = createSlice({
25 | name: "clusterView",
26 | initialState,
27 | reducers: {},
28 | });
29 | // Selectors for any additional state managed in this slice
30 | export const selectPods = (state) => state.clusterView.pods;
31 | export default clusterViewSlice.reducer;
32 |
--------------------------------------------------------------------------------
/client/src/features/cluster-view/clusterViewApiSlice.ts:
--------------------------------------------------------------------------------
1 | import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"
2 | import { createSlice } from "@reduxjs/toolkit"
3 |
4 | // Define the structure of the Node object
5 | export interface KubernetesNode {
6 | creationTimestamp: string
7 | name: string
8 | labels: { [key: string]: string }
9 | podCIDR: string
10 | addresses: { type: string; address: string }[]
11 | allocatable: { [key: string]: string }
12 | capacity: {
13 | [key: string]: string
14 | }
15 | conditions: { type: string; status: string }[]
16 | }
17 |
18 | export interface KubernetesPod {
19 | name: string
20 | creationTimestamp: string
21 | namespace: string
22 | labels: { [key: string]: string }
23 | nodeName: string
24 | restartPolicy: string
25 | hostIP: string
26 | podIP: string
27 | phase: string
28 | startTime: string
29 | uid: string
30 | conditions: Conditions[]
31 | }
32 |
33 | export interface KubernetesServices {
34 | name: String
35 | namespace: String
36 | labels: { [key: string]: string } | undefined
37 | creationTimestamp: Date | undefined
38 | clusterIP: String | undefined
39 | ports: string[] | undefined
40 | selector: { [key: string]: string } | undefined
41 | type: String | undefined
42 | }
43 |
44 | interface Conditions {
45 | lastProbeTime: string | null
46 | lastTransitionTime: Date
47 | status: Boolean
48 | type: string
49 | }
50 |
51 | // Define an API service for the cluster view
52 | export const clusterApi = createApi({
53 | reducerPath: "clusterApi",
54 | baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:8080/" }),
55 | endpoints: builder => ({
56 | getKubernetesNodes: builder.query137 | Logs 138 |
139 |
140 |
155 |
172 |
173 | {clusterLogs?.map((clusterLog, i) => (
174 |
186 | {open === true &&
188 |
80 | {data.name.length > 10 ? `${data.name.slice(0, 20)}...` : data.name}
81 |
82 |
83 | 109 | Time Created: 110 | {data["creationTimestamp"] ? data.creationTimestamp : null} 111 |
112 | Capacity: 113 |
114 | 115 | CPU: 116 | 117 | {data.capacity["cpu"].toString()} 118 |
119 | 120 | ephemeral-storage: 121 | 122 | {data.capacity["ephemeral-storage"]} 123 |
124 | 125 | hugepages-1Gi: 126 | 127 | {data.capacity["hugepages-1Gi"]} 128 |
129 | 130 | hugepages-2Mi: 131 | 132 | {data.capacity["hugepages-2Mi"]} 133 |
134 | 135 | memory: 136 | 137 | {data.capacity["memory"]} 138 |
139 | 140 | pods: 141 | 142 | {data.capacity["pods"]} 143 |
181 | {data.name.length > 10 ? `${data.name.slice(0, 20)}...` : data.name}
182 |
183 |
184 | 203 | Time Created: 204 | {data.creationTimestamp ? data.creationTimestamp : null} 205 |
206 | phase: {data.phase} 207 |
208 | restartPolicy: {data.restartPolicy} 209 |
210 | uid: {data.uid} 211 |
222 | {data.name.length > 10 ? `${data.name.slice(0, 20)}...` : data.name}
223 |
224 |
179 |
187 | )
188 | }
189 |
--------------------------------------------------------------------------------
/client/src/features/grafana-dashboard/Grafana.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | min-height: 100vh;
12 | }
13 |
14 | .wrapper {
15 | display: flex;
16 | flex-direction: column;
17 | justify-content: center;
18 | align-items: center;
19 | border: 1px solid rgb(229, 209, 255);
20 | padding: 20px;
21 | gap: 20px;
22 | width: 100%;
23 | max-width: 600px;
24 | margin: 0 auto;
25 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.241);
26 | }
27 |
28 | .wrapper form {
29 | display: flex;
30 | flex-direction: column;
31 | width: 100%;
32 | }
33 |
34 | .wrapper h2 {
35 | margin-top: 15px;
36 | font-size: 1.8rem;
37 | margin-bottom: 20px;
38 | text-align: center;
39 | }
40 |
41 | .wrapper input[type="text"] {
42 | width: 100%;
43 | padding: 12px 16px;
44 | border-radius: 12px;
45 | /* border: 1px solid #ccc; */
46 | font-size: 1rem;
47 | outline: none;
48 | transition: border-color 0.3s ease;
49 | }
50 |
51 | .wrapper input[type="text"]:focus {
52 | border-color: #6200ea;
53 | box-shadow: 0 0 8px rgba(98, 0, 234, 0.2);
54 | }
55 |
56 | .wrapper button {
57 | padding: 12px 24px;
58 | background-color: #7f00ff;
59 | color: white;
60 | border: none;
61 | border-radius: 12px;
62 | font-size: 1rem;
63 | cursor: pointer;
64 | transition:
65 | background-color 0.3s ease,
66 | transform 0.3s ease;
67 | width: 100%;
68 | margin-top: 20px;
69 | }
70 |
71 | .wrapper button:hover {
72 | background-color: #4a00b4;
73 | }
74 |
75 | .wrapper button:active {
76 | background-color: #3a008c;
77 | transform: translateY(2px);
78 | }
79 |
80 | @media (max-width: 768px) {
81 | .wrapper {
82 | width: 90%;
83 | padding: 15px;
84 | }
85 |
86 | .wrapper h2 {
87 | font-size: 1.5rem;
88 | }
89 |
90 | .wrapper button {
91 | font-size: 0.9rem;
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/client/src/features/grafana-dashboard/GrafanaDashboardApiSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | const initialState = {
3 | src: ''
4 | };
5 | const iframeSlice = createSlice({
6 | name: 'iframe',
7 | initialState,
8 | reducers: {
9 | setIframeSrc: (state, action) => {
10 | state.src = action.payload;
11 | },
12 | },
13 | });
14 | export const { setIframeSrc } = iframeSlice.actions;
15 | export default iframeSlice.reducer;
16 |
--------------------------------------------------------------------------------
/client/src/features/grafana-dashboard/GrafanaDashboardApiSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import type { PayloadAction } from '@reduxjs/toolkit'
3 |
4 | // Define the initial state for the iframe URL
5 | interface IframeState {
6 | src: string;
7 | }
8 |
9 | const initialState: IframeState = {
10 | src: ''
11 | };
12 |
13 | const iframeSlice = createSlice({
14 | name: 'iframe',
15 | initialState,
16 | reducers: {
17 | setIframeSrc: (state, action: PayloadAction
180 |
181 |
185 |
186 |
30 |
44 | )
45 | }
46 |
47 | const Dashboard = () => {
48 | return (
49 |
60 | )
61 | }
62 |
63 | return <>{iframeURL !== "" ? Connect Your Grafana Dashboard
31 | 43 |
20 |
23 |
33 | The content of the Popover.
34 |
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/client/src/features/landing-page/LandingPage.js:
--------------------------------------------------------------------------------
1 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2 | import { AppBar, Toolbar, Typography, Button, Container, Grid, Box, } from "@mui/material";
3 | import logoSVG from "../../public/logo.svg";
4 | import logoPNG from "../../public/logo.png";
5 | import "./landingpage.css";
6 | import MeetTheTeam from "./components/MeetTheTeam";
7 | import ReadMe from "./components/ReadMe";
8 | export default function LandingPage() {
9 | return (_jsxs(Box, { sx: { minWidth: "750px" }, children: [_jsx(AppBar, { position: "sticky", sx: {
10 | background: "linear-gradient(to bottom, white 70%, rgba(255, 255, 255, 0))",
11 | transition: "background-color 0.5s ease",
12 | }, color: "transparent", elevation: 0, style: { width: "100vw" }, children: _jsxs(Toolbar, { sx: { justifyContent: "space-between" }, children: [_jsx("img", { src: logoSVG, alt: "App logo", style: { width: "50px", marginRight: "15px" } }), _jsx(Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: "K8STATE" }), _jsx(Button, { color: "inherit", onClick: () => document
13 | .getElementById("team-section")
14 | ?.scrollIntoView({ behavior: "smooth" }), children: "Meet The Team" }), _jsx(Button, { color: "inherit", onClick: () => document
15 | .getElementById("readme-section")
16 | ?.scrollIntoView({ behavior: "smooth" }), children: "Setting Up" })] }) }), _jsx(Container, { className: "landingpage", maxWidth: "lg", sx: { pt: 6 }, children: _jsxs(Grid, { container: true, spacing: 4, alignItems: "center", justifyContent: "center", direction: "column", textAlign: "center", children: [_jsx(Grid, { item: true, xs: 12, children: _jsx("img", { className: "logo-main App-logo-float", src: logoPNG, alt: "App logo", style: {
17 | width: "100%",
18 | maxWidth: "300px",
19 | marginBottom: "20px",
20 | paddingTop: "15vh",
21 | } }) }), _jsxs(Grid, { item: true, xs: 12, children: [_jsxs(Typography, { variant: "h1", component: "h1", gutterBottom: true, children: ["K", _jsx("span", { style: { color: "#ad97d0" }, children: "8" }), "STATE"] }), _jsx(Typography, { variant: "h4", component: "p", gutterBottom: true, children: "Revolutionize Kubernetes Management" }), _jsx(Typography, { variant: "subtitle1", component: "p", gutterBottom: true, children: "Experience cluster visualization that moves as fast as you do." }), _jsx(Button, { "aria-label": "Get Started", variant: "contained", color: "primary", size: "large", sx: { marginRight: "10px" }, href: "clusterui", children: "Get Started" }), _jsx(Button, { "aria-label": "Visit GitHub", variant: "outlined", color: "primary", size: "large", href: "https://github.com/oslabs-beta/k8state", children: "Visit GitHub" })] })] }) }), _jsx("section", { id: "readme-section", children: _jsx(ReadMe, {}) }), _jsx("section", { id: "team-section", children: _jsx(MeetTheTeam, {}) }), _jsx("footer", { className: "footer", children: _jsxs(Container, { maxWidth: "lg", children: [_jsx(Typography, { variant: "body2", color: "#ad97d0", align: "center", children: "Developed For Engineers by Engineers" }), _jsx(Typography, { variant: "body2", color: "textSecondary", align: "center", children: "Released under the MIT License." }), _jsx(Typography, { variant: "body2", color: "textSecondary", align: "center", children: "Copyright \u00A9 2024 K8STATE Contributors" })] }) })] }));
22 | }
23 |
--------------------------------------------------------------------------------
/client/src/features/landing-page/LandingPage.test.js:
--------------------------------------------------------------------------------
1 | import { jsx as _jsx } from "react/jsx-runtime";
2 | import { afterEach, test } from "vitest";
3 | import { screen, cleanup } from "@testing-library/react";
4 | import LandingPage from "./LandingPage";
5 | import { renderWithProviders } from "../../utils/test-utils";
6 | afterEach(() => {
7 | cleanup();
8 | });
9 | test("Landing Page should render", async () => {
10 | renderWithProviders(_jsx(LandingPage, {}));
11 | // Check if Body rendered correctly with proper text
12 | expect(screen.getByText(/Revolutionize Kubernetes Management/i)).toBeInTheDocument();
13 | expect(screen.getByText(/Experience cluster visualization that moves as fast as you do./i)).toBeInTheDocument();
14 | // Check if Footer rendered correctly with proper text
15 | expect(screen.getByText(/Developed For Engineers by Engineers/i)).toBeInTheDocument();
16 | expect(screen.getByText(/Released under the MIT License./i)).toBeInTheDocument();
17 | expect(screen.getByText(/Copyright © 2024 K8STATE Contributors/i)).toBeInTheDocument();
18 | });
19 | test("Landing Page should have correct link to Get Started click", async () => {
20 | // Render the LandingPage component
21 | renderWithProviders(_jsx(LandingPage, {}));
22 | // Find the "Get Started" link by its aria-label
23 | const getStartedLink = screen.getByLabelText("Get Started");
24 | // Check if the href attribute is correct
25 | expect(getStartedLink).toHaveAttribute("href", "clusterui");
26 | // Check if the link is still present
27 | expect(getStartedLink).toBeInTheDocument();
28 | });
29 | test("Landing Page should correct link to GitHub", async () => {
30 | // Render the LandingPage component
31 | renderWithProviders(_jsx(LandingPage, {}));
32 | // Find the "Get Started" link by its aria-label
33 | const getStartedLink = screen.getByLabelText("Visit GitHub");
34 | // Check if the href attribute is correct
35 | expect(getStartedLink).toHaveAttribute("href", "https://github.com/oslabs-beta/k8state");
36 | expect(getStartedLink).toBeInTheDocument();
37 | });
38 |
--------------------------------------------------------------------------------
/client/src/features/landing-page/LandingPage.test.tsx:
--------------------------------------------------------------------------------
1 | import { afterEach, test } from "vitest"
2 | import { screen, cleanup } from "@testing-library/react"
3 | import LandingPage from "./LandingPage"
4 | import { renderWithProviders } from "../../utils/test-utils"
5 |
6 | afterEach(() => {
7 | cleanup()
8 | })
9 |
10 | test("Landing Page should render", async () => {
11 | renderWithProviders(Meet the Team
53 | 54 |
55 | {teamMembers.map((member) => (
56 |
57 |
78 |
58 | 
63 |
64 |
76 | ))}
77 | {member.name}
65 |{member.role}
66 | 67 |
68 |
69 | GitHub
70 |
71 |
72 | LinkedIn
73 |
74 |
75 | How to Run the Application
9 |## If this application is already running locally, you can skip this section. ##
10 |
11 |
43 | 12 | Follow these steps to clone and run the K8State application on your local machine: 13 |
14 |-
15 |
- Clone the repository: 16 |
- Navigate to the client directory: 19 |
- Install dependencies: 23 |
- Start the client: 26 |
- Navigate to the server directory: 29 |
- Install dependencies: 33 |
- Start the development server: 36 |
- Access the app: 39 |
git clone https://github.com/oslabs-beta/k8state.gitcd k8statecd clientnpm installnpm run devcd ..cd servernpm installnpm run serverOnce the server is running, open http://localhost:3000 in your browser to view the application.
40 | 41 |73 | Change Cluster Address and Key 74 |
75 |
76 | ) =>
91 | setEnvAddress(e.target.value)
92 | }
93 | focused
94 | style={{
95 | position: "absolute",
96 | top: "-150px",
97 | left: "45px",
98 | width: "300px",
99 | }}
100 | />
101 | ) =>
107 | setEnvKey(e.target.value)
108 | }
109 | focused
110 | style={{
111 | position: "absolute",
112 | top: "-60px",
113 | left: "45px",
114 | width: "300px",
115 | }}
116 | />
117 |
147 |
124 |
125 |
144 |
145 |
146 |
155 |
156 | {envAlert && (
157 |
158 | {envAlertMessage}
159 |
160 | )}
161 |
162 |
163 |