From d7f65cb1a7b4431948a24bc2ba2e760cdb71bca4 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Tue, 17 Mar 2026 20:13:43 +0800 Subject: [PATCH] fixed --- .../app/components/topHeader/TopHeader.jsx | 2 +- frontend/src/app/globals.css | 1 + .../view/AddServicesModal/styles.module.css | 4 +- .../view/[servicesId]/LogsModal/logsModas.jsx | 74 +++ .../[servicesId]/LogsModal/styles.module.css | 152 ++++++ .../app/projects/view/[servicesId]/page.jsx | 6 + .../projects/view/add-from-scratch/page.jsx | 488 ++---------------- .../view/add-from-scratch/projectDetails.jsx | 295 +++++++++++ .../view/add-from-scratch/settings.jsx | 170 ++++++ .../view/add-from-scratch/styles.module.css | 52 +- .../variableStyles.module.css | 2 +- .../src/app/projects/view/styles.module.css | 2 +- 12 files changed, 786 insertions(+), 462 deletions(-) create mode 100644 frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx create mode 100644 frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css create mode 100644 frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx create mode 100644 frontend/src/app/projects/view/add-from-scratch/settings.jsx diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx index 3f83cac..2eb3cf9 100644 --- a/frontend/src/app/components/topHeader/TopHeader.jsx +++ b/frontend/src/app/components/topHeader/TopHeader.jsx @@ -171,7 +171,7 @@ const TopHeader = (props) => { {triggerDropDownMenu && (
-
+
props?.setTriggerLogsModal?.(true)}>

View Logs

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 73a4924..99ad07d 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -16,6 +16,7 @@ html, body { max-width: 100vw; overflow-x: hidden; + font-size: 16px; } body { diff --git a/frontend/src/app/projects/view/AddServicesModal/styles.module.css b/frontend/src/app/projects/view/AddServicesModal/styles.module.css index 19262a9..e6946f3 100644 --- a/frontend/src/app/projects/view/AddServicesModal/styles.module.css +++ b/frontend/src/app/projects/view/AddServicesModal/styles.module.css @@ -8,11 +8,13 @@ display: flex; align-items: center; justify-content: center; + padding: 5px; background-color: #00000037; } .modal { display: inline-flex; padding: 24px 24px 32px 24px; + flex-direction: column; align-items: flex-start; gap: 48px; @@ -70,7 +72,7 @@ } .content { display: flex; - width: 545px; + flex-direction: column; align-items: flex-start; gap: 16px; diff --git a/frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx b/frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx new file mode 100644 index 0000000..5563cdd --- /dev/null +++ b/frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx @@ -0,0 +1,74 @@ +import CloseIcon from "@/app/components/icons/close"; +import React from "react"; +import styles from "./styles.module.css"; + +const LogsModal = (props) => { + return ( +
+
+
+
+
+

Server Logs: gateway-api

+
+ + + +

Connected

+
+
+
+ props?.setTriggerLogsModal?.(false)} + /> +
+
+
+
+
+ +

Auto Scroll

+
+
+ + + +

124 Lines

+
+
+
+
+
+ ); +}; + +export default LogsModal; diff --git a/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css new file mode 100644 index 0000000..4e575f9 --- /dev/null +++ b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css @@ -0,0 +1,152 @@ +.modalContainer { + width: 100vw; + height: 100vh; + position: absolute; + z-index: 50; + left: 0; + top: 0; + display: flex; + align-items: center; + padding: 10px; + justify-content: center; + background-color: #0000004d; +} +.container { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 1200px; + border-radius: 6px; + background: #21232f; + height: 100%; + animation-name: dropDownAnimation; + animation-duration: 200ms; +} +@keyframes dropDownAnimation { + 0% { + opacity: 0; + transform: translateY(-5%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.header { + display: flex; + padding: 12px 12px 12px 16px; + justify-content: space-between; + align-items: flex-start; + align-self: stretch; +} +.close { + cursor: pointer; +} +.statusContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + flex: 1 0 0; +} +.statusContainer > div { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; +} +.statusContainer > div > p { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + color: #d2d3e1; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.statusContainer > div > div { + display: flex; + padding: 1px 6px; + justify-content: center; + align-items: center; + gap: 6px; + border-radius: 100px; + background: rgba(66, 180, 78, 0.1); +} +.statusContainer > div > div > p { + color: #72fd7f; + text-align: center; + font-feature-settings: + "liga" off, + "clig" off; + font-family: Inter; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 22px; /* 183.333% */ +} +.logContentContainer { + width: 100%; + background-color: rebeccapurple; + flex: 1; + overflow-y: auto; +} +.footer { + display: flex; + padding: 12px 16px; + align-items: center; + gap: 48px; + align-self: stretch; +} +.footer > div { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + flex: 1 0 0; +} +.autoScroll { + display: flex; + align-items: center; + gap: 12px; +} +.autoScroll input[type="checkbox"] { + accent-color: #5980f1; + height: 16px; + width: 16px; + background: white; +} + +.autoScroll p { + color: #fff; + + /* Base/Medium */ + font-family: Inter; + font-size: 0.9rem; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 150% */ + letter-spacing: 0.08px; +} +.linesCount { + display: flex; + padding: 4px 8px; + justify-content: center; + align-items: center; + gap: 6px; + border-radius: 6px; + background: rgba(0, 101, 244, 0.1); +} +.linesCount p { + color: #fff; + font-family: Inter; + font-size: 0.9rem; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.07px; +} diff --git a/frontend/src/app/projects/view/[servicesId]/page.jsx b/frontend/src/app/projects/view/[servicesId]/page.jsx index 0dc3ed6..a6b69b8 100644 --- a/frontend/src/app/projects/view/[servicesId]/page.jsx +++ b/frontend/src/app/projects/view/[servicesId]/page.jsx @@ -12,11 +12,13 @@ import CustomCheckbox from "@/app/components/checkbox/CheckBox"; import DeleteIcon from "@/app/components/icons/delete"; import SelectField from "@/app/components/select/SelectField"; import ActionButton from "@/app/components/actionButton/ActionButton"; +import LogsModal from "./LogsModal/logsModas"; const AddServices = () => { const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false); const [triggerAddVariable, setTriggerAddVariable] = useState(false); const [triggerAddVolume, setTriggerAddVolume] = useState(false); const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false); + const [triggerLogsModal, setTriggerLogsModal] = useState(false); const sampleData = [ { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" }, @@ -27,6 +29,9 @@ const AddServices = () => { ]; return (
+ {triggerLogsModal && ( + + )} {triggerAddVariable && ( )} @@ -44,6 +49,7 @@ const AddServices = () => { state="view" topbarTitle="View Services" requiredButtons={["back", "title", "edit", "download"]} + setTriggerLogsModal={setTriggerLogsModal} />
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 0c3a0d1..1a4a182 100644 --- a/frontend/src/app/projects/view/add-from-scratch/page.jsx +++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx @@ -3,18 +3,14 @@ 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 DeleteIcon from "@/app/components/icons/delete"; -import CustomCheckbox from "@/app/components/checkbox/CheckBox"; -import SelectField from "@/app/components/select/SelectField"; import useServicesForm from "@/app/hooks/useServicesForm"; import Alert from "@/app/components/alerts/Alert"; +import ProjectDetails from "./projectDetails"; +import Settings from "./settings"; const AddServices = () => { - const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false); const [triggerAddVariable, setTriggerAddVariable] = useState(false); const [triggerAddVolume, setTriggerAddVolume] = useState(false); const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false); @@ -67,456 +63,40 @@ const AddServices = () => { topbarTitle="Create New Services" requiredButtons={["title", "save"]} /> -
-
-
-
-

Project Details

-
-
-
-
-

- Repository (Optional) -

- -
-
-
-
-

Name

- -
-
-

Version

- -
-
-
-
-

- Image (Optional) -

- -
-
-
-
-

Port

- -
-
-
-
-

Ingress

- -
-
-

Ingress

- -
-
-
-
-
-
-

Resource

-
-
-
-
-

CPU Request (MB)

- -
-
-

CPU Limit (MB)

- -
-
-
-
-

Memory Request (MB)

- -
-
-

Memory Limit (MB)

- -
-
-
-
-
-
-
-
-
-

Auto Scaling

- setDisableScaling(!disableScaling)} - /> -
-
-
-
-
-
-

Minimum pods

- - -
-
-

Maximum pods

- -
-
-
-
-
-
-
-
-
-
-

Readiness

- - setDisableReadiness(!disableReadiness) - } - /> -
-
-
-
-
-
-

Readiness Path

- - -
-
-

Readiness Port

- -
-
-
-
-
-
-
-
-
-
-

Liveness

- - setDisableLiveness(!disableLiveness) - } - /> -
-
-
-
-
-
-

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

-
-
- {/*
-

REQUEST_SERVICE_GRPC

-

request-service:50053

- -
*/} -
-
-
-
-
-
-

Volumes

-
-
-
-

Name

-

Path

-

Size/Type

-

Access Mode

-

Storage Class

-
-
-
-
-
-

No volume added

-
-
-
-
-
-
-
-
-

Config maps

-
- -
-
-
-

No config map added

-
-
-
-
-
-
+
+
+
+

Project Details

+

Settings

+
+ + +
diff --git a/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx b/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx new file mode 100644 index 0000000..0be6b74 --- /dev/null +++ b/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx @@ -0,0 +1,295 @@ +"use client"; +import React, { useState } from "react"; +import styles from "./styles.module.css"; +import TextField from "@/app/components/fields/textfield"; +import CustomCheckbox from "@/app/components/checkbox/CheckBox"; +import SelectField from "@/app/components/select/SelectField"; + +const ProjectDetails = ({ + register, + handleSubmit, + errors, + onSubmit, + triggerAlert, + disableScaling, + disableReadiness, + disableLiveness, + setDisableScaling, + setDisableReadiness, + setDisableLiveness, + setTriggerAlert, + minPods, + maxPods, + readinessPath, + readinessPort, + livenessPort, + livenessPath, +}) => { + return ( +
+
+
+
+

Project Details

+
+
+
+
+

+ Repository (Optional) +

+ +
+
+
+
+

Name

+ +
+
+

Version

+ +
+
+
+
+

+ Image (Optional) +

+ +
+
+
+
+

Port

+ +
+
+
+
+

Ingress

+ +
+
+

Ingress

+ +
+
+
+
+
+
+

Resource

+
+
+
+
+

CPU Request (MB)

+ +
+
+

CPU Limit (MB)

+ +
+
+
+
+

Memory Request (MB)

+ +
+
+

Memory Limit (MB)

+ +
+
+
+
+
+
+
+
+
+

Auto Scaling

+ setDisableScaling(!disableScaling)} + /> +
+
+
+
+
+
+

Minimum pods

+ + +
+
+

Maximum pods

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

Readiness

+ setDisableReadiness(!disableReadiness)} + /> +
+
+
+
+
+
+

Readiness Path

+ + +
+
+

Readiness Port

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

Liveness

+ setDisableLiveness(!disableLiveness)} + /> +
+
+
+
+
+
+

Liveness Path

+ +
+
+

Liveness Port

+ +
+
+
+
+
+
+
+
+
+ ); +}; + +export default ProjectDetails; diff --git a/frontend/src/app/projects/view/add-from-scratch/settings.jsx b/frontend/src/app/projects/view/add-from-scratch/settings.jsx new file mode 100644 index 0000000..a288f4d --- /dev/null +++ b/frontend/src/app/projects/view/add-from-scratch/settings.jsx @@ -0,0 +1,170 @@ +"use client"; +import React, { useState } from "react"; +import variableStyles from "./variableStyles.module.css"; +const Settings = ({ + setTriggerAddVariable, + setTriggerAddVolume, + setTriggerAddConfigMap, +}) => { + const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false); + + return ( +
+
+
+
+
+ + + + + + + +
+
+
+
+ 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

+
+
+ {/*
+

REQUEST_SERVICE_GRPC

+

request-service:50053

+ +
*/} +
+
+
+
+
+
+

Volumes

+
+
+
+

Name

+

Path

+

Size/Type

+

Access Mode

+

Storage Class

+
+
+
+
+
+

No volume added

+
+
+
+
+
+
+
+
+

Config maps

+
+ +
+
+
+

No config map added

+
+
+
+
+
+
+
+
+ ); +}; + +export default Settings; 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 0e062b5..ae940e1 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 @@ -1,24 +1,68 @@ +.content { + display: flex; + padding: 0 16px; + flex-direction: column; + align-items: flex-start; + height: calc(100vh - 170px); + /* ✅ fills remaining space */ + min-height: 0; + align-self: stretch; +} .contentContainer { display: flex; align-items: flex-start; - flex: 1 0 0; + flex: 1; + background-color: red; align-self: stretch; } + +.heading { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + padding: 0 16px; + align-self: stretch; + background: #191a24; +} +.heading > div { + display: flex; + align-items: flex-start; + gap: 16px; + align-self: stretch; +} +.heading p { + display: flex; + padding: 24px 4px 16px 4px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 5px; + color: #85869b; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.18px; +} .fieldsContainerCreateNew { display: flex; padding-top: 36px; flex-direction: column; - width: 550px; align-items: flex-start; gap: 36px; background: #191a24; - height: calc(100vh - 175px); + height: 100%; + min-height: 0; + background-color: red; overflow-y: scroll; scrollbar-width: none; } + .projectDetails { display: flex; - padding: 0 36px; + padding: 0 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 bb0ea1e..e28c2b5 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 @@ -23,7 +23,7 @@ } .searchContainer > div { display: flex; - width: 310px; + width: 100%; padding: 8px 12px; align-items: center; gap: 9px; diff --git a/frontend/src/app/projects/view/styles.module.css b/frontend/src/app/projects/view/styles.module.css index db6bc8c..da6a197 100644 --- a/frontend/src/app/projects/view/styles.module.css +++ b/frontend/src/app/projects/view/styles.module.css @@ -18,7 +18,7 @@ text-wrap: nowrap; color: #85869b; font-family: Inter; - z-index: 5; + z-index: 3; font-size: var(--table-font-size); font-style: normal; font-weight: 500;