Skip to content

Commit 8b2d34a

Browse files
JasminaPiricJasminaPiric
committed
refactor: Create new Deployment page layout
Changed Deployment page tab view to dedicated sections for the containers and events Signed-off-by: Jasmina <jasmina.piric@secomind.com>
1 parent 20344f4 commit 8b2d34a

6 files changed

Lines changed: 63 additions & 64 deletions

File tree

‎frontend/src/components/DeploymentDetails.tsx‎

Lines changed: 37 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
// SPDX-License-Identifier: Apache-2.0
1818

1919
import { useCallback, useMemo, useState } from "react";
20-
import { Card, Col, Row, Tab, Tabs } from "react-bootstrap";
20+
import { Card, Col, Row } from "react-bootstrap";
2121
import Tree, { useTreeState } from "react-hyper-tree";
2222
import { FormattedMessage, useIntl } from "react-intl";
2323
import {
@@ -55,6 +55,7 @@ import { parseDeploymentState } from "@/components/DeploymentState";
5555
import Icon from "@/components/Icon";
5656
import ResourceStateIcon from "@/components/ResourceStateIcon";
5757
import { Link, Route, useNavigate } from "@/Navigation";
58+
import FullHeightCard from "@/components/FullHeightCard";
5859

5960
/* eslint-disable relay/unused-fields */
6061
const DEPLOYMENT_DETAILS_EVENTS_FRAGMENT = graphql`
@@ -845,8 +846,8 @@ const DeploymentDetails = ({
845846
}, [setShowUpgradeModal]);
846847

847848
return (
848-
<div>
849-
<Card className="mb-4">
849+
<div className="d-flex flex-column h-100">
850+
<Card className="mb-4 flex-shrink-0">
850851
<Card.Body>
851852
<Row className="d-flex align-items-center justify-content-between flex-wrap">
852853
<Col
@@ -1008,52 +1009,40 @@ const DeploymentDetails = ({
10081009
/>
10091010
</ConfirmModal>
10101011
)}
1011-
1012-
<Tabs
1013-
defaultActiveKey="containers"
1014-
id="deployment-details-tabs"
1015-
className="mb-3"
1012+
<div
1013+
className="flex-md-fill"
1014+
style={{
1015+
minHeight: 0,
1016+
}}
10161017
>
1017-
<Tab
1018-
eventKey="containers"
1019-
title={intl.formatMessage({
1020-
id: "components.DeploymentDetails.containersTab",
1021-
defaultMessage: "Containers",
1022-
})}
1023-
>
1024-
<div>
1025-
{containerNodes.length === 0 ? (
1026-
<div className="p-2">
1027-
<FormattedMessage
1028-
id="components.DeploymentDetails.noContainers"
1029-
defaultMessage="No containers"
1030-
/>
1031-
</div>
1032-
) : (
1033-
containerNodes.map((node, idx) => (
1034-
<ContainerDeploymentItem
1035-
key={node.id || idx}
1036-
index={idx}
1037-
containerFragmentKey={node}
1038-
imageDeployment={node.imageDeployment}
1039-
containerState={node.state || ""}
1040-
isReady={node.isReady}
1041-
/>
1042-
))
1043-
)}
1044-
</div>
1045-
</Tab>
1046-
1047-
<Tab
1048-
eventKey="events"
1049-
title={intl.formatMessage({
1050-
id: "components.DeploymentDetails.eventsTab",
1051-
defaultMessage: "Events",
1052-
})}
1053-
>
1054-
<DeploymentEventsCard events={events} />
1055-
</Tab>
1056-
</Tabs>
1018+
<Row className="align-items-stretch h-100">
1019+
<FullHeightCard md={4} xs={12} className="h-100">
1020+
<Card.Body className="d-flex flex-column overflow-auto me-3">
1021+
{containerNodes.length === 0 ? (
1022+
<div className="p-2">
1023+
<FormattedMessage
1024+
id="components.DeploymentDetails.noContainers"
1025+
defaultMessage="No containers"
1026+
/>
1027+
</div>
1028+
) : (
1029+
containerNodes.map((node, idx) => (
1030+
<ContainerDeploymentItem
1031+
key={node.id || idx}
1032+
index={idx}
1033+
containerFragmentKey={node}
1034+
imageDeployment={node.imageDeployment}
1035+
containerState={node.state || ""}
1036+
isReady={node.isReady}
1037+
/>
1038+
))
1039+
)}
1040+
</Card.Body>
1041+
</FullHeightCard>
1042+
1043+
<DeploymentEventsCard events={events} className="h-100" />
1044+
</Row>
1045+
</div>
10571046
</div>
10581047
);
10591048
};

‎frontend/src/components/DeploymentEventsCard.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717
// SPDX-License-Identifier: Apache-2.0
1818

1919
.device-event-container {
20-
height: 50em;
21-
overflow-y: scroll;
20+
flex-grow: 1;
21+
overflow: auto;
22+
min-height: 0;
2223
}
2324

2425
.event-badge {

‎frontend/src/components/DeploymentEventsCard.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,13 +142,15 @@ const DeploymentEventsView = ({
142142

143143
interface DeploymentEventsCardProps {
144144
events: Event[];
145+
className?: string;
145146
}
146147

147148
const DeploymentEventsCard = ({
148149
events,
150+
className,
149151
}: DeploymentEventsCardProps): React.ReactElement => (
150-
<FullHeightCard xs={12} className="mb-4">
151-
<Card.Body className="d-flex flex-column">
152+
<FullHeightCard md={8} xs={12} className={className}>
153+
<Card.Body className="d-flex flex-column overflow-hidden">
152154
<DeploymentEventsView events={events} />
153155
</Card.Body>
154156
</FullHeightCard>

‎frontend/src/components/Page.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,13 @@ import "./Page.scss";
3333

3434
type PageProps = {
3535
children?: React.ReactNode;
36+
className?: string;
37+
style?: React.CSSProperties;
3638
};
3739

38-
const Page = ({ children }: PageProps) => {
40+
const Page = ({ children, className = "", style }: PageProps) => {
3941
return (
40-
<div data-testid="page" className="p-4">
42+
<div data-testid="page" className={`p-4 ${className}`} style={style}>
4143
{children}
4244
</div>
4345
);
@@ -59,10 +61,16 @@ const PageHeader = ({ children, title }: PageHeaderProps) => {
5961

6062
type PageMainProps = {
6163
children?: React.ReactNode;
64+
className?: string;
65+
style?: React.CSSProperties;
6266
};
6367

64-
const PageMain = ({ children }: PageMainProps) => {
65-
return <main className="mt-4">{children}</main>;
68+
const PageMain = ({ children, className = "", style }: PageMainProps) => {
69+
return (
70+
<main className={`mt-4 ${className}`} style={style}>
71+
{children}
72+
</main>
73+
);
6674
};
6775

6876
type PageLoadingErrorProps = {

‎frontend/src/i18n/langs/en.json‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -485,9 +485,6 @@
485485
"components.DeploymentDetails.containerWithIndex": {
486486
"defaultMessage": "Container {index}"
487487
},
488-
"components.DeploymentDetails.containersTab": {
489-
"defaultMessage": "Containers"
490-
},
491488
"components.DeploymentDetails.deleteErrorOffline": {
492489
"defaultMessage": "The device is disconnected. You cannot delete an application while it is offline."
493490
},
@@ -506,9 +503,6 @@
506503
"components.DeploymentDetails.deviceMappings": {
507504
"defaultMessage": "Device Mappings"
508505
},
509-
"components.DeploymentDetails.eventsTab": {
510-
"defaultMessage": "Events"
511-
},
512506
"components.DeploymentDetails.networks": {
513507
"defaultMessage": "Networks"
514508
},

‎frontend/src/pages/Deployment.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,16 @@ const DeploymentContent = ({
137137
const [errorFeedback, setErrorFeedback] = useState<React.ReactNode>(null);
138138

139139
return (
140-
<Page>
140+
<Page className="h-100 d-flex flex-column overflow-hidden">
141141
<Page.Header
142142
title={`${deployment.release?.application?.name}: ${deployment.release?.version}`}
143143
/>
144-
<Page.Main>
144+
<Page.Main
145+
className="d-flex flex-column flex-grow-1"
146+
style={{
147+
minHeight: 0,
148+
}}
149+
>
145150
<Alert
146151
show={!!errorFeedback}
147152
variant="danger"

0 commit comments

Comments
 (0)