Skip to content

Commit 7b6d331

Browse files
starpitstarpit
committed
fix: a few design tweaks to the ProfileExplorer
1 parent 1869131 commit 7b6d331

File tree

2 files changed

+80
-68
lines changed

2 files changed

+80
-68
lines changed

‎plugins/plugin-codeflare/src/components/ProfileExplorer.tsx‎

Lines changed: 77 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,10 @@ import { Profiles } from "madwizard"
2020
import { Loading } from "@kui-shell/plugin-client-common"
2121
import {
2222
Card,
23-
CardTitle,
23+
CardActions,
2424
CardBody,
25+
CardHeader,
26+
CardTitle,
2527
Title,
2628
Button,
2729
Flex,
@@ -31,6 +33,7 @@ import {
3133
DescriptionListGroup,
3234
DescriptionListTerm,
3335
DescriptionListDescription,
36+
Divider,
3437
} from "@patternfly/react-core"
3538

3639
import ProfileSelect from "./ProfileSelect"
@@ -70,8 +73,8 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
7073
this.init()
7174
}
7275

73-
private readonly _handleBoot = handleBoot.bind(this)
74-
private readonly _handleShutdown = handleShutdown.bind(this)
76+
private readonly _handleBoot = () => handleBoot(this.state.selectedProfile)
77+
private readonly _handleShutdown = () => handleShutdown(this.state.selectedProfile)
7578

7679
private updateDebouncer: null | ReturnType<typeof setTimeout> = null
7780

@@ -131,6 +134,69 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
131134
}
132135
}
133136

137+
private title() {
138+
return (
139+
<Title headingLevel="h2" size="xl">
140+
{this.state.selectedProfile}
141+
</Title>
142+
)
143+
}
144+
145+
private actions() {
146+
return (
147+
<Title headingLevel="h2" size="md">
148+
Status: pending
149+
</Title>
150+
)
151+
}
152+
153+
private body() {
154+
// TODO: Retrieve real data and abstract to its own component
155+
return (
156+
<DescriptionList className="codeflare--profile-explorer--description">
157+
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
158+
<DescriptionListTerm>Cluster Context</DescriptionListTerm>
159+
<DescriptionListDescription>api-codeflare-train-v11-codeflare-openshift-com</DescriptionListDescription>
160+
</DescriptionListGroup>
161+
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
162+
<DescriptionListTerm>Cluster Namespace</DescriptionListTerm>
163+
<DescriptionListDescription>nvidia-gpu-operator</DescriptionListDescription>
164+
</DescriptionListGroup>
165+
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
166+
<DescriptionListTerm>Memory per Worker</DescriptionListTerm>
167+
<DescriptionListDescription>32Gi</DescriptionListDescription>
168+
</DescriptionListGroup>
169+
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
170+
<DescriptionListTerm>Worker Count</DescriptionListTerm>
171+
<DescriptionListDescription>4-4</DescriptionListDescription>
172+
</DescriptionListGroup>
173+
</DescriptionList>
174+
)
175+
}
176+
177+
private footer() {
178+
return (
179+
<Flex>
180+
<FlexItem>
181+
<Button variant="link" isSmall className="codeflare--profile-explorer--boot-btn" onClick={this._handleBoot}>
182+
Boot
183+
</Button>
184+
<Button
185+
variant="link"
186+
isSmall
187+
className="codeflare--profile-explorer--shutdown-btn"
188+
onClick={this._handleShutdown}
189+
>
190+
Shutdown
191+
</Button>
192+
</FlexItem>
193+
<FlexItem flex={{ default: "flex_1" }}>
194+
<DashboardSelect selectedProfile={this.state.selectedProfile} />
195+
</FlexItem>
196+
</Flex>
197+
)
198+
}
199+
134200
public render() {
135201
if (this.state && this.state.catastrophicError) {
136202
return "Internal Error"
@@ -144,69 +210,14 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
144210
</FlexItem>
145211

146212
<FlexItem>
147-
<Card className="top-pad left-pad right-pad bottompad">
148-
<CardTitle>
149-
<Flex>
150-
<FlexItem flex={{ default: "flex_1" }}>
151-
<Title headingLevel="h2" size="md">
152-
{this.state.selectedProfile}
153-
</Title>
154-
</FlexItem>
155-
<FlexItem>
156-
<Title headingLevel="h2" size="md">
157-
Status: pending
158-
</Title>
159-
</FlexItem>
160-
</Flex>
161-
</CardTitle>
162-
<CardBody>
163-
{/* TODO: Retrieve real data and abstract to its own component */}
164-
<DescriptionList className="codeflare--profile-explorer--description">
165-
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
166-
<DescriptionListTerm>Cluster Context</DescriptionListTerm>
167-
<DescriptionListDescription>
168-
api-codeflare-train-v11-codeflare-openshift-com
169-
</DescriptionListDescription>
170-
</DescriptionListGroup>
171-
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
172-
<DescriptionListTerm>Cluster Namespace</DescriptionListTerm>
173-
<DescriptionListDescription>nvidia-gpu-operator</DescriptionListDescription>
174-
</DescriptionListGroup>
175-
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
176-
<DescriptionListTerm>Memory per Worker</DescriptionListTerm>
177-
<DescriptionListDescription>32Gi</DescriptionListDescription>
178-
</DescriptionListGroup>
179-
<DescriptionListGroup className="codeflare--profile-explorer--description--group">
180-
<DescriptionListTerm>Worker Count</DescriptionListTerm>
181-
<DescriptionListDescription>4-4</DescriptionListDescription>
182-
</DescriptionListGroup>
183-
</DescriptionList>
184-
</CardBody>
185-
<CardFooter>
186-
<Flex>
187-
<FlexItem>
188-
<Button
189-
variant="primary"
190-
className="codeflare--profile-explorer--boot-btn"
191-
onClick={() => this._handleBoot(this.state.selectedProfile)}
192-
>
193-
Boot
194-
</Button>
195-
</FlexItem>
196-
<FlexItem>
197-
<Button
198-
variant="secondary"
199-
className="codeflare--profile-explorer--shutdown-btn"
200-
onClick={() => this._handleShutdown(this.state.selectedProfile)}
201-
>
202-
Shutdown
203-
</Button>
204-
</FlexItem>
205-
<FlexItem>
206-
<DashboardSelect selectedProfile={this.state.selectedProfile} />
207-
</FlexItem>
208-
</Flex>
209-
</CardFooter>
213+
<Card className="top-pad left-pad right-pad bottompad" isSelectableRaised isSelected>
214+
<CardHeader>
215+
<CardTitle>{this.title()}</CardTitle>
216+
<CardActions hasNoOffset>{this.actions()}</CardActions>
217+
</CardHeader>
218+
<CardBody>{this.body()}</CardBody>
219+
<Divider />
220+
<CardFooter>{this.footer()}</CardFooter>
210221
</Card>
211222
</FlexItem>
212223
</Flex>

‎plugins/plugin-codeflare/web/scss/components/ProfileExplorer/_index.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@
1515
*/
1616

1717
.codeflare--profile-explorer {
18-
&--boot-btn {
19-
color: var(--color-base00) !important;
18+
hr.pf-c-divider {
19+
margin: 0;
20+
border: none;
2021
}
2122
.pf-c-description-list__text {
2223
overflow: hidden;

0 commit comments

Comments
 (0)