From 39154632f4e95d40bdfdf811053e50668d74f243 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Mon, 2 Mar 2026 11:58:06 +0800 Subject: [PATCH 1/3] Add switches --- .../src/app/components/checkbox/CheckBox.jsx | 42 +++++++++++++++++ .../app/components/checkbox/styles.module.css | 46 +++++++++++++++++++ .../components/icons/switchIcons/checked.jsx | 30 ++++++++++++ .../icons/switchIcons/unchecked.jsx | 39 ++++++++++++++++ .../app/components/topHeader/TopHeader.jsx | 2 +- .../projects/view/add-from-scratch/page.jsx | 6 ++- .../view/add-from-scratch/styles.module.css | 6 +-- .../variableStyles.module.css | 5 +- 8 files changed, 169 insertions(+), 7 deletions(-) create mode 100644 frontend/src/app/components/checkbox/CheckBox.jsx create mode 100644 frontend/src/app/components/checkbox/styles.module.css create mode 100644 frontend/src/app/components/icons/switchIcons/checked.jsx create mode 100644 frontend/src/app/components/icons/switchIcons/unchecked.jsx diff --git a/frontend/src/app/components/checkbox/CheckBox.jsx b/frontend/src/app/components/checkbox/CheckBox.jsx new file mode 100644 index 0000000..e1a10e6 --- /dev/null +++ b/frontend/src/app/components/checkbox/CheckBox.jsx @@ -0,0 +1,42 @@ +"use client"; +import { useState } from "react"; +import CheckIcon from "../icons/check"; +import styles from "./styles.module.css"; +import CloseIcon from "../icons/close"; +import CheckedIcon from "../icons/switchIcons/checked"; +import UnCheckedIcon from "../icons/switchIcons/unchecked"; + +const CustomCheckbox = ({ checked, onChange, id }) => { + const [isChecked, setIsChecked] = useState(false); + return ( + <> + { + setIsChecked(!isChecked); + onChange; + }} + /> + + + + ); +}; + +export default CustomCheckbox; diff --git a/frontend/src/app/components/checkbox/styles.module.css b/frontend/src/app/components/checkbox/styles.module.css new file mode 100644 index 0000000..aa0ae6f --- /dev/null +++ b/frontend/src/app/components/checkbox/styles.module.css @@ -0,0 +1,46 @@ +.switch { + display: flex; + width: 53px; + + height: 33px; + align-items: center; + background-color: white; + cursor: pointer; + padding: 0 2px; + border-radius: 150px; + position: relative; + border: 2px solid #6d6d6d; + overflow: hidden; +} + +.check { + display: none; +} + +/* The knob (replaces ::before) */ +.knob { + width: 25px; + height: 25px; + background-color: #6d6d6d; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + transition: all 0.15s ease-in-out; +} +.knob:hover { + box-shadow: 0 0 0px 5px #33333327; + background-color: #333; +} + +.check:checked + .switch .knob { + transform: translateX(75%); + background-color: white; +} + +/* Optional background change */ +.check:checked + .switch { + background-color: #8187ff; + border: 2px solid #8187ff; +} diff --git a/frontend/src/app/components/icons/switchIcons/checked.jsx b/frontend/src/app/components/icons/switchIcons/checked.jsx new file mode 100644 index 0000000..89629b7 --- /dev/null +++ b/frontend/src/app/components/icons/switchIcons/checked.jsx @@ -0,0 +1,30 @@ +import React from "react"; + +const CheckedIcon = ({ + width = 20, + height = 20, + color = "white", + strokeWidth = 1.5, + ...props +}) => { + return ( + + + + ); +}; + +export default CheckedIcon; diff --git a/frontend/src/app/components/icons/switchIcons/unchecked.jsx b/frontend/src/app/components/icons/switchIcons/unchecked.jsx new file mode 100644 index 0000000..6bec211 --- /dev/null +++ b/frontend/src/app/components/icons/switchIcons/unchecked.jsx @@ -0,0 +1,39 @@ +import React from "react"; + +const UnCheckedIcon = ({ + width = 20, + height = 20, + color = "white", + strokeWidth = 1.5, + + viewBox = "0 0 28 28", + ...props +}) => { + return ( + + + + + ); +}; + +export default UnCheckedIcon; diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx index 0373e35..12a55eb 100644 --- a/frontend/src/app/components/topHeader/TopHeader.jsx +++ b/frontend/src/app/components/topHeader/TopHeader.jsx @@ -65,7 +65,7 @@ const TopHeader = (props) => { {props.state === "add" ? ( <>
- +

{props.buttonText}

router.back()}> diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx index 3c918bc..a99ad52 100644 --- a/frontend/src/app/projects/view/add-from-scratch/page.jsx +++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx @@ -9,11 +9,12 @@ import AddVariableModal from "./variableModals/AddVariableModal/AddVariableModal import AddVolumeModal from "./variableModals/AddVolumes/AddVolumeModal"; import AddConfigMapModal from "./variableModals/AddConfigMap/AddConfigMapModal"; import DeleteIcon from "@/app/components/icons/delete"; +import CustomCheckbox from "@/app/components/checkbox/CheckBox"; const AddServices = () => { const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false); const [triggerAddVariable, setTriggerAddVariable] = useState(false); const [triggerAddVolume, setTriggerAddVolume] = useState(false); - const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(true); + const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false); return (
{triggerAddVariable && ( @@ -123,6 +124,7 @@ const AddServices = () => {

Auto Scaling

+
@@ -147,6 +149,7 @@ const AddServices = () => {

Readiness

+
@@ -176,6 +179,7 @@ const AddServices = () => {

Liveness

+
diff --git a/frontend/src/app/projects/view/add-from-scratch/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/styles.module.css index a02fb33..39bf989 100644 --- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css +++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css @@ -18,7 +18,7 @@ } .projectDetails { display: flex; - padding: 0 24px; + padding: 0 36px; flex-direction: column; align-items: flex-start; gap: 10px; @@ -146,7 +146,7 @@ } .additionalDetails { display: flex; - padding: 0 36px 50px 36px; + padding: 20px; flex-direction: column; align-items: flex-start; gap: 16px; @@ -154,7 +154,7 @@ } .additionalDetails > div { display: flex; - padding: 24px; + padding: 20px; flex-direction: column; align-items: flex-start; gap: 10px; diff --git a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css index 98754a4..e90ceb2 100644 --- a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css +++ b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css @@ -138,7 +138,7 @@ } .variablesContent { display: flex; - padding-bottom: 50px; + padding-bottom: auto; flex-direction: column; align-items: flex-start; align-self: stretch; @@ -167,7 +167,8 @@ } .environmentVariablesContainer { display: flex; - padding-bottom: 50px; + min-height: 200px; + padding-bottom: auto; flex-direction: column; align-items: flex-start; align-self: stretch; From f16b78834c4ee94de672a49ac483f977b0391107 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Mon, 2 Mar 2026 11:58:42 +0800 Subject: [PATCH 2/3] --- .../src/app/projects/view/AddServicesModal/styles.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/projects/view/AddServicesModal/styles.module.css b/frontend/src/app/projects/view/AddServicesModal/styles.module.css index 377c64c..19262a9 100644 --- a/frontend/src/app/projects/view/AddServicesModal/styles.module.css +++ b/frontend/src/app/projects/view/AddServicesModal/styles.module.css @@ -18,10 +18,10 @@ gap: 48px; border-radius: 8px; background: #21232f; - animation-name: dropDownAnimation; + animation-name: modalAnimation; animation-duration: 200ms; } -@keyframes dropDownAnimation { +@keyframes modalAnimation { 0% { opacity: 0; transform: translateY(-10%); From 1023990822bedb4dcec3956dd486b53fd7faf2d6 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Mon, 2 Mar 2026 15:33:21 +0800 Subject: [PATCH 3/3] Add components --- .../app/components/checkbox/styles.module.css | 2 +- .../app/components/fields/styles.module.css | 9 + .../src/app/components/icons/arrowDown.jsx | 28 ++ frontend/src/app/components/icons/warning.jsx | 38 ++ .../src/app/components/select/SelectField.jsx | 71 ++++ .../app/components/select/styles.module.css | 83 ++++ .../components/topHeader/styles.module.css | 8 +- frontend/src/app/projects/add/page.jsx | 67 +-- .../app/projects/view/[servicesId]/page.jsx | 396 ++++++++++++++++++ .../view/[servicesId]/styles.module.css | 219 ++++++++++ .../[servicesId]/variableStyles.module.css | 253 +++++++++++ .../projects/view/add-from-scratch/page.jsx | 48 ++- .../view/add-from-scratch/styles.module.css | 23 +- frontend/src/app/projects/view/page.jsx | 79 +--- .../AddConfigMap/AddConfigMapModal.jsx | 3 +- .../AddConfigMap/styles.module.css | 35 ++ .../AddVariableModal/AddVariableModal.jsx | 20 +- .../AddVariableModal/styles.module.css | 14 + .../AddVolumes/AddVolumeModal.jsx | 1 - .../AddVolumes/styles.module.css | 1 + 20 files changed, 1234 insertions(+), 164 deletions(-) create mode 100644 frontend/src/app/components/icons/arrowDown.jsx create mode 100644 frontend/src/app/components/icons/warning.jsx create mode 100644 frontend/src/app/components/select/SelectField.jsx create mode 100644 frontend/src/app/components/select/styles.module.css create mode 100644 frontend/src/app/projects/view/[servicesId]/page.jsx create mode 100644 frontend/src/app/projects/view/[servicesId]/styles.module.css create mode 100644 frontend/src/app/projects/view/[servicesId]/variableStyles.module.css rename frontend/src/app/projects/view/{add-from-scratch => }/variableModals/AddConfigMap/AddConfigMapModal.jsx (97%) rename frontend/src/app/projects/view/{add-from-scratch => }/variableModals/AddConfigMap/styles.module.css (85%) rename frontend/src/app/projects/view/{add-from-scratch => }/variableModals/AddVariableModal/AddVariableModal.jsx (82%) rename frontend/src/app/projects/view/{add-from-scratch => }/variableModals/AddVariableModal/styles.module.css (92%) rename frontend/src/app/projects/view/{add-from-scratch => }/variableModals/AddVolumes/AddVolumeModal.jsx (97%) rename frontend/src/app/projects/view/{add-from-scratch => }/variableModals/AddVolumes/styles.module.css (99%) diff --git a/frontend/src/app/components/checkbox/styles.module.css b/frontend/src/app/components/checkbox/styles.module.css index aa0ae6f..e1d38db 100644 --- a/frontend/src/app/components/checkbox/styles.module.css +++ b/frontend/src/app/components/checkbox/styles.module.css @@ -35,7 +35,7 @@ } .check:checked + .switch .knob { - transform: translateX(75%); + transform: translateX(78%); background-color: white; } diff --git a/frontend/src/app/components/fields/styles.module.css b/frontend/src/app/components/fields/styles.module.css index 1fd8258..7ecc249 100644 --- a/frontend/src/app/components/fields/styles.module.css +++ b/frontend/src/app/components/fields/styles.module.css @@ -25,6 +25,15 @@ border: 1px solid #959aff; background: rgba(75, 79, 109, 0.25); } +.input:active::placeholder, +.input:focus::placeholder { + color: #4b4f6d; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} .input:hover { background: rgba(75, 79, 109, 0.25); } diff --git a/frontend/src/app/components/icons/arrowDown.jsx b/frontend/src/app/components/icons/arrowDown.jsx new file mode 100644 index 0000000..e83b8d8 --- /dev/null +++ b/frontend/src/app/components/icons/arrowDown.jsx @@ -0,0 +1,28 @@ +const ArrowDownIcon = ({ + width = 18, + height = 18, + color = "#4C4F6B", + + ...props +}) => { + return ( + + + + ); +}; + +export default ArrowDownIcon; diff --git a/frontend/src/app/components/icons/warning.jsx b/frontend/src/app/components/icons/warning.jsx new file mode 100644 index 0000000..58b78af --- /dev/null +++ b/frontend/src/app/components/icons/warning.jsx @@ -0,0 +1,38 @@ +import React from "react"; + +const WarningIcon = (props) => { + return ( + + + + + + ); +}; + +export default WarningIcon; diff --git a/frontend/src/app/components/select/SelectField.jsx b/frontend/src/app/components/select/SelectField.jsx new file mode 100644 index 0000000..d155bc6 --- /dev/null +++ b/frontend/src/app/components/select/SelectField.jsx @@ -0,0 +1,71 @@ +"use client"; +import React, { useState, useRef, useEffect } from "react"; +import styles from "./styles.module.css"; +import ArrowDownIcon from "../icons/arrowDown"; + +const SelectField = ({ label, options, ...props }) => { + const [showOptions, setShowOptions] = useState(false); + const [dropUp, setDropUp] = useState(false); + + const selectRef = useRef(null); + + const [currentSelected, setCurrentSelected] = useState({ + label: label, + value: "", + }); + + useEffect(() => { + if (showOptions && selectRef.current) { + const rect = selectRef.current.getBoundingClientRect(); + const spaceBelow = window.innerHeight - rect.bottom; + const spaceAbove = rect.top; + const dropdownHeight = 150; + + if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) { + setDropUp(true); + } else { + setDropUp(false); + } + } + }, [showOptions]); + + return ( +
setShowOptions(!showOptions)} + {...props} + > + + + + {showOptions && ( +
+ {options.map((opt, key) => { + return ( +
{ + setCurrentSelected(opt); + setShowOptions(false); + }} + > +

{opt.label}

+
+ ); + })} +
+ )} +
+ ); +}; + +export default SelectField; diff --git a/frontend/src/app/components/select/styles.module.css b/frontend/src/app/components/select/styles.module.css new file mode 100644 index 0000000..750fdb0 --- /dev/null +++ b/frontend/src/app/components/select/styles.module.css @@ -0,0 +1,83 @@ +.select { + display: flex; + padding: 12px; + align-items: flex-start; + align-items: center; + justify-content: space-between; + gap: 10px; + align-self: stretch; + border-radius: 4px; + border: 1px solid #4b4f6d; + background-color: transparent; + position: relative; +} +.label { + color: #858699; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.selected { + color: white; +} +.optionsContainer { + display: flex; + padding: 6px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + position: absolute; + width: 100%; + left: 0; + border-radius: 6px; + border: 1px solid #353a4c; + background: #282b39; + animation-name: showDD; + animation-duration: 200ms; + z-index: 20; +} + +@keyframes showDD { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } +} +.optionsContainer > div { + display: flex; + padding: 8px; + align-items: center; + gap: 10px; + align-self: stretch; + border-radius: 4px; +} +.optionsContainer p { + color: #acb0ff; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.optionsContainer > div:hover, +.optionsContainer > div:hover p { + background: #3c4159; + color: white; +} +.optionsContainer { + top: 0%; + margin-top: 6px; +} + +/* When flipping upward */ +.dropUp { + bottom: 0%; + top: auto; + margin-bottom: 6px; +} diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css index 2e358cb..e109419 100644 --- a/frontend/src/app/components/topHeader/styles.module.css +++ b/frontend/src/app/components/topHeader/styles.module.css @@ -44,7 +44,7 @@ display: flex; justify-content: flex-end; align-items: center; - gap: 10px; + gap: 5px; } .searchBarContainer { display: flex; @@ -55,14 +55,14 @@ } .button { display: flex; - padding: 8px 12px; + padding: 7px 15px; justify-content: center; align-items: center; - gap: 8px; + gap: 10px; + border-radius: 6px; border-radius: 6px; border: 0.5px solid #8187ff; background: rgba(83, 89, 242, 0.25); - cursor: pointer; } .button:hover { background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%); diff --git a/frontend/src/app/projects/add/page.jsx b/frontend/src/app/projects/add/page.jsx index 8d9a2e8..d691efc 100644 --- a/frontend/src/app/projects/add/page.jsx +++ b/frontend/src/app/projects/add/page.jsx @@ -3,6 +3,9 @@ import globalStyle from "../../globalStyle.module.css"; import TopHeader from "@/app/components/topHeader/TopHeader"; import styles from "./styles.module.css"; import TopToolTip from "@/app/components/topToolTip/TopToolTip"; +import TextField from "@/app/components/fields/textfield"; +import SelectField from "@/app/components/select/SelectField"; +import WarningIcon from "@/app/components/icons/warning"; const AddProject = () => { return (
@@ -24,37 +27,9 @@ const AddProject = () => {

- +
- - - - - +

The name is already in used. You can try another.

@@ -66,7 +41,7 @@ const AddProject = () => {

- +
@@ -76,9 +51,14 @@ const AddProject = () => {

- +
@@ -88,17 +68,14 @@ const AddProject = () => {

- +
diff --git a/frontend/src/app/projects/view/[servicesId]/page.jsx b/frontend/src/app/projects/view/[servicesId]/page.jsx new file mode 100644 index 0000000..809b5ab --- /dev/null +++ b/frontend/src/app/projects/view/[servicesId]/page.jsx @@ -0,0 +1,396 @@ +"use client"; +import React, { useState } from "react"; +import globalStyle from "@/app/globalStyle.module.css"; +import TopHeader from "@/app/components/topHeader/TopHeader"; +import styles from "./styles.module.css"; +import variableStyles from "./variableStyles.module.css"; +import TextField from "@/app/components/fields/textfield"; +import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal"; +import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal"; +import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"; +import CustomCheckbox from "@/app/components/checkbox/CheckBox"; +import DeleteIcon from "@/app/components/icons/delete"; +import SelectField from "@/app/components/select/SelectField"; +const AddServices = () => { + const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false); + const [triggerAddVariable, setTriggerAddVariable] = useState(false); + const [triggerAddVolume, setTriggerAddVolume] = useState(false); + const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false); + const sampleData = [ + { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, + { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, + { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, + { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, + { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, + { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, + ]; + return ( +
+ {triggerAddVariable && ( + + )} + {triggerAddVolume && ( + + )} + {triggeAddConfigMap && ( + + )} +
+
+ +
+
+
+
+

Project Details

+
+
+
+
+

Name

+ +
+
+

Version

+ +
+
+
+
+

+ Image (Optional) +

+ +
+
+
+
+

Port

+ +
+
+
+
+

Ingress

+ +
+
+

Ingress

+ +
+
+
+
+
+
+

Resource

+
+
+
+
+

CPU Request (MB)

+ +
+
+

CPU Limit (MB)

+ +
+
+
+
+

Memory Request (MB)

+ +
+
+

Memory Limit (MB)

+ +
+
+
+
+
+
+
+
+
+

Auto Scaling

+ +
+
+
+
+
+
+

Minimum pods

+ + +
+
+

Maximum pods

+ +
+
+
+
+
+
+
+
+
+
+

Readiness

+ +
+
+
+
+
+
+

Readiness Path

+ +
+
+

Readiness Port

+ +
+
+
+
+
+
+
+
+
+
+

Liveness

+ +
+
+
+
+
+
+

Liveness Path

+ +
+
+

Liveness Port

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+
+ setTriggerVariableDropDown(!triggerVariableDropDown) + } + > + + + + +
+ {triggerVariableDropDown && ( +
+
{ + setTriggerAddVariable(true); + setTriggerVariableDropDown( + !triggerVariableDropDown, + ); + }} + > +

Environment Variables

+
+
{ + setTriggerAddVolume(true); + setTriggerVariableDropDown( + !triggerVariableDropDown, + ); + }} + > +

Volumes

+
+
{ + setTriggerAddConfigMap(true); + setTriggerVariableDropDown( + !triggerVariableDropDown, + ); + }} + > +

Config Maps

+
+
+ )} +
+
+
+
+
+
+
+
+

Environment Variables

+
+
+
+

Key

+

Value

+
+
+
+ {/*
+
+

No Environment Variables added

+
+
*/} + {sampleData.map((data, key) => { + return ( +
+

{data.key}

+

{data.value}

+ +
+ ); + })} +
+
+
+
+
+
+

Volumes

+
+
+
+

Name

+

Path

+

Size/Type

+

Access Mode

+

Storage Class

+
+
+
+
+
+

No volume added

+
+
+
+
+
+
+
+
+

Config maps

+
+ +
+
+
+

No config map added

+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; + +export default AddServices; diff --git a/frontend/src/app/projects/view/[servicesId]/styles.module.css b/frontend/src/app/projects/view/[servicesId]/styles.module.css new file mode 100644 index 0000000..13bab16 --- /dev/null +++ b/frontend/src/app/projects/view/[servicesId]/styles.module.css @@ -0,0 +1,219 @@ +.contentContainer { + display: flex; + align-items: flex-start; + flex: 1 0 0; + align-self: stretch; +} +.fieldsContainerCreateNew { + display: flex; + padding-top: 36px; + flex-direction: column; + width: 550px; + align-items: flex-start; + gap: 36px; + background: #191a24; + height: calc(100vh - 175px); + overflow-y: scroll; + scrollbar-width: none; +} +.projectDetails { + display: flex; + padding: 0 36px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; +} +.projectDetailsHeader { + display: flex; + padding-bottom: 24px; + align-items: flex-start; + gap: 17px; + align-self: stretch; +} +.projectDetailsHeader p { + color: #d2d3e1; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + letter-spacing: 0.2px; +} +.fieldsCreateNew { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + align-self: stretch; +} +.resource { + display: flex; + padding: 0 36px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; +} +.resourceFields { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + align-self: stretch; +} +.fieldsCreateNew > div, +.resourceFields > div { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + align-self: stretch; +} + +.fieldsCreateNew > div > div, +.resourceFields > div > div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 12px; + flex: 1 0 0; +} +.fieldsCreateNew > div > div p, +.resourceFields > div > div p { + color: #d2d3e1; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.16px; +} +.fieldsCreateNew > div > div p > span, +.resourceFields > div > div p > span { + color: #85869b; +} + +.fieldsCreateNew > div > div select, +.resourceFields > div > div select { + display: flex; + padding: 12px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; + border-radius: 4px; + border: 1px solid #4b4f6d; + background-color: transparent; + color: white; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.16px; +} + +.repositoryForm { + display: flex; + padding: 12px; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + align-self: stretch; + border-radius: 4px; + border: 1px dashed #5980f1; + color: #5980f1; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.16px; + cursor: pointer; +} +.repositoryForm:hover { + background: rgba(83, 89, 242, 0.1); +} +.additionalDetails { + display: flex; + padding: 16px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + align-self: stretch; +} +.additionalDetails > div { + display: flex; + padding: 20px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + align-self: stretch; + border-radius: 6px; + background: #1d1e2a; +} +.additionalDetails > div > div { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + align-self: stretch; +} +.additionalDetailsHeader { + display: flex; + padding-bottom: 24px; + align-items: flex-start; + gap: 17px; + align-self: stretch; +} +.additionalDetailsHeader div { + display: flex; + justify-content: space-between; + align-items: center; + flex: 1 0 0; +} + +.additionalDetailsHeader p { + color: #d2d3e1; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + letter-spacing: 0.2px; +} +.additionalDetailsFields { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 32px; + align-self: stretch; +} +.additionalDetailsFields > div { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + align-self: stretch; +} +.additionalDetailsFields > div > div { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + align-self: stretch; +} +.additionalDetailsFields > div > div > div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 12px; + flex: 1; +} +.additionalDetailsFields p { + color: #d2d3e1; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.16px; +} diff --git a/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css b/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css new file mode 100644 index 0000000..e90ceb2 --- /dev/null +++ b/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css @@ -0,0 +1,253 @@ +.variables { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1 0 0; + align-self: stretch; + + background: #161720; +} +.variablesHeader { + display: flex; + padding: 8px 14px 8px 8px; + align-items: center; + gap: 10px; + align-self: stretch; + background: #161720; +} +.variablesHeader > div { + display: flex; + justify-content: space-between; + align-items: center; + flex: 1 0 0; +} +.searchContainer > div { + display: flex; + width: 310px; + padding: 8px 12px; + align-items: center; + gap: 9px; +} +.searchInputGroup { + display: flex; + align-items: center; + gap: 9px; +} +.searchInputGroup input { + color: white; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: -0.09px; + outline: none; + background-color: transparent; + border: none; +} +.searchInputGroup input::placeholder { + color: #85869b; +} +.variablesHeaderDropDown { + display: flex; + width: 40px; + height: 40px; + flex-direction: column; + align-items: flex-end; + position: relative; + gap: 6px; +} +.variableHeaderDropdownButton { + display: flex; + padding: 8px; + justify-content: center; + align-items: center; + gap: 12px; + border-radius: 6px; + cursor: pointer; + background: #5359f2; + border: 1px solid #5358f200; +} +.variableHeaderDropdownButton:hover { + border-radius: 6px; + border: 1px solid #5359f2; + background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%); +} +.dropDownContainer { + display: flex; + padding: 8px; + flex-direction: column; + align-items: flex-start; + gap: 6px; + border-radius: 6px; + background: #2d3144; + box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25); + animation-name: dropDownAnimation; + animation-duration: 200ms; +} +@keyframes dropDownAnimation { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.dropDownContainer > div { + display: flex; + padding: 8px 12px; + align-items: center; + gap: 10px; + align-self: stretch; + text-wrap: nowrap; + width: 100%; +} +.dropDownContainer > div:hover { + background: #3c4159; +} +.dropDownContainer > div > div { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + color: #acb0ff; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.variablesContentContainer { + display: flex; + padding: 8px; + align-items: flex-start; + flex: 1 0 0; + align-self: stretch; +} +.variablesContentContainer > div { + display: flex; + padding-bottom: 16px; + flex-direction: column; + align-items: flex-start; + gap: 8px; + height: calc(100vh - 242px); + overflow: auto; + flex: 1 0 0; +} +.variablesContent { + display: flex; + padding-bottom: auto; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + border-radius: 4px; + background: #1d1e2a; +} +.variable { + display: flex; + padding: 8px 0; + align-items: center; + align-self: stretch; + border-bottom: 0.5px solid #2e3042; + width: 100%; +} +.variable p { + display: flex; + align-items: center; + flex: 1 0 0; + align-self: stretch; + color: #d2d3e1; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.15px; +} +.environmentVariablesContainer { + display: flex; + min-height: 200px; + padding-bottom: auto; + flex-direction: column; + align-items: flex-start; + align-self: stretch; +} +.environmentVariablesHeader { + display: flex; + padding: 12px 16px; + align-items: flex-start; + gap: 17px; + align-self: stretch; +} +.environmentVariablesHeader p { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 5px; + flex: 1 0 0; + color: #fff; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.envVariablesHeader { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; +} +.envVariablesHeader > div { + display: flex; + padding: 12px 16px; + align-items: flex-start; + align-self: stretch; + border-bottom: 1px solid #2c2e3f; +} +.envVariablesHeader > div p { + display: flex; + align-items: flex-start; + flex: 1 0 0; + color: #85869b; + font-family: Inter; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.variableList { + display: flex; + padding: 0 16px 16px 16px; + flex-direction: column; + align-items: center; + align-self: stretch; +} +.emptyVariableList { + display: flex; + padding: 24px 16px 0 16px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + flex: 1 0 0; +} +.emptyVariableList > div { + display: flex; + justify-content: center; + align-items: center; + align-self: stretch; +} +.emptyVariableList > div > div { + display: flex; + justify-content: center; + align-items: flex-start; + flex: 1 0 0; + color: #85869b; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +} diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx index a99ad52..83355f2 100644 --- a/frontend/src/app/projects/view/add-from-scratch/page.jsx +++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx @@ -5,11 +5,12 @@ import TopHeader from "@/app/components/topHeader/TopHeader"; import styles from "./styles.module.css"; import variableStyles from "./variableStyles.module.css"; import TextField from "@/app/components/fields/textfield"; -import AddVariableModal from "./variableModals/AddVariableModal/AddVariableModal"; -import AddVolumeModal from "./variableModals/AddVolumes/AddVolumeModal"; -import AddConfigMapModal from "./variableModals/AddConfigMap/AddConfigMapModal"; +import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal"; +import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal"; +import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"; import DeleteIcon from "@/app/components/icons/delete"; import CustomCheckbox from "@/app/components/checkbox/CheckBox"; +import SelectField from "@/app/components/select/SelectField"; const AddServices = () => { const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false); const [triggerAddVariable, setTriggerAddVariable] = useState(false); @@ -78,15 +79,25 @@ const AddServices = () => {

Ingress

- +

Ingress

- +
@@ -131,13 +142,13 @@ const AddServices = () => {
-

Name

+

Minimum pods

- +
-

Version

- +

Maximum pods

+
@@ -157,17 +168,12 @@ const AddServices = () => {

Readiness Path

- + +

Readiness Port

- +
diff --git a/frontend/src/app/projects/view/add-from-scratch/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/styles.module.css index 39bf989..d1e2f5d 100644 --- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css +++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css @@ -146,7 +146,7 @@ } .additionalDetails { display: flex; - padding: 20px; + padding: 16px; flex-direction: column; align-items: flex-start; gap: 16px; @@ -228,24 +228,3 @@ line-height: normal; letter-spacing: 0.16px; } -.additionalDetailsFields input { - display: flex; - padding: 12px; - flex-direction: column; - align-items: flex-start; - width: 100%; - gap: 10px; - align-self: stretch; - background-color: transparent; - border-radius: 4px; - border: 1px solid #4b4f6d; - color: white; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - letter-spacing: 0.16px; -} -.additionalDetailsFields input::placeholder { - color: #85869b; -} diff --git a/frontend/src/app/projects/view/page.jsx b/frontend/src/app/projects/view/page.jsx index 1bcfe38..871e0d8 100644 --- a/frontend/src/app/projects/view/page.jsx +++ b/frontend/src/app/projects/view/page.jsx @@ -4,10 +4,15 @@ import globalStyle from "../../globalStyle.module.css"; import TopHeader from "@/app/components/topHeader/TopHeader"; import styles from "./styles.module.css"; import AddServicesModal from "./AddServicesModal/AddServicesModal"; +import { useRouter, usePathname } from "next/navigation"; const AddProject = () => { const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false); + const router = useRouter(); + + const pathName = usePathname(); const sampleData = [ { + id: 1, name: "accounting-service", version: "v1", health: { @@ -24,6 +29,7 @@ const AddProject = () => { ports: "3000:3000, 50054:50054", }, { + id: 2, name: "accounting-service", version: "v1", health: { @@ -40,6 +46,7 @@ const AddProject = () => { ports: "3000:3000, 50054:50054", }, { + id: 3, name: "accounting-service", version: "v1", health: { @@ -56,70 +63,7 @@ const AddProject = () => { ports: "3000:3000, 50054:50054", }, { - name: "accounting-service", - version: "v1", - health: { - overall: "Healthy", - liveness: "Unreachable", - readiness: "Ready", - }, - status: { - deployment: "Healthy", - replicas: "1/1", - }, - image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service", - ingress: "", - ports: "3000:3000, 50054:50054", - }, - { - name: "accounting-service", - version: "v1", - health: { - overall: "Healthy", - liveness: "Unreachable", - readiness: "Ready", - }, - status: { - deployment: "Healthy", - replicas: "1/1", - }, - image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service", - ingress: "", - ports: "3000:3000, 50054:50054", - }, - { - name: "accounting-service", - version: "v1", - health: { - overall: "Healthy", - liveness: "Unreachable", - readiness: "Ready", - }, - status: { - deployment: "Healthy", - replicas: "1/1", - }, - image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service", - ingress: "", - ports: "3000:3000, 50054:50054", - }, - { - name: "accounting-service", - version: "v1", - health: { - overall: "Healthy", - liveness: "Unreachable", - readiness: "Ready", - }, - status: { - deployment: "Healthy", - replicas: "1/1", - }, - image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service", - ingress: "", - ports: "3000:3000, 50054:50054", - }, - { + id: 4, name: "accounting-service", version: "v1", health: { @@ -173,7 +117,12 @@ const AddProject = () => { {sampleData.map((services, index) => { return ( - + + router.push(`${pathName}/${services.id}`) + } + > {services.name} {services.version} diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx b/frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx similarity index 97% rename from frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx rename to frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx index 4061ff7..93e5653 100644 --- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx +++ b/frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx @@ -5,12 +5,11 @@ import TextField from "@/app/components/fields/textfield"; import AddIcon from "@/app/components/icons/add"; import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton"; const AddConfigMapModal = (props) => { - const [isGeneric, setIsGeneric] = useState(true); return (
-

Volumes

+

Config Maps

props.setTriggerAddConfigMap(false)} />
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css b/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css similarity index 85% rename from frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css rename to frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css index 4c1b441..12d9922 100644 --- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css +++ b/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css @@ -174,6 +174,41 @@ line-height: normal; letter-spacing: 0.16px; } +.verticalInput textarea { + display: flex; + height: 120px; + padding: 12px; + width: 100%; + flex-direction: column; + align-items: flex-start; + background-color: transparent; + gap: 10px; + align-self: stretch; + border-radius: 4px; + border: 1px solid #4b4f6d; + resize: none; + color: #85869b; + font-size: 16px; + font-family: inter; + font-style: normal; + font-weight: 400; + outline: none; + line-height: normal; + letter-spacing: 0.16px; +} +.verticalInput textarea:focus { + border-radius: 6px; + border: 1px solid #959aff; + background: rgba(75, 79, 109, 0.25); +} +.verticalInput textarea:focus::placeholder { + color: #4b4f6d; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} .radioButtonsContainer { display: flex; align-items: flex-start; diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx similarity index 82% rename from frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx rename to frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx index a478a53..71e4ec8 100644 --- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx +++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx @@ -4,8 +4,8 @@ import CloseIcon from "@/app/components/icons/close"; import TextField from "@/app/components/fields/textfield"; import AddIcon from "@/app/components/icons/add"; import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton"; +import SelectField from "@/app/components/select/SelectField"; const AddVariableModal = (props) => { - const [isGeneric, setIsGeneric] = useState(true); return (
@@ -73,11 +73,25 @@ const AddVariableModal = (props) => {

Protocol

- +

Service

- +
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css b/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css similarity index 92% rename from frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css rename to frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css index 597ca7e..a3f0a6d 100644 --- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css +++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css @@ -170,9 +170,23 @@ font-family: inter; font-style: normal; font-weight: 400; + outline: none; line-height: normal; letter-spacing: 0.16px; } +.verticalInput textarea:focus { + border-radius: 6px; + border: 1px solid #959aff; + background: rgba(75, 79, 109, 0.25); +} +.verticalInput textarea:focus::placeholder { + color: #4b4f6d; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} .authenticationContainer { display: flex; padding: 12px 12px 32px 12px; diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx b/frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx similarity index 97% rename from frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx rename to frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx index 6f2ffdd..307b824 100644 --- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx +++ b/frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx @@ -5,7 +5,6 @@ import TextField from "@/app/components/fields/textfield"; import AddIcon from "@/app/components/icons/add"; import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton"; const AddVolumeModal = (props) => { - const [isGeneric, setIsGeneric] = useState(true); return (
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css b/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css similarity index 99% rename from frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css rename to frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css index fae6e73..947bdea 100644 --- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css +++ b/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css @@ -173,6 +173,7 @@ line-height: normal; letter-spacing: 0.16px; } + .authenticationContainer { display: flex; padding: 12px 12px 32px 12px;