Skip to content

Commit a3efbd1

Browse files
mvollmermvollmer
committed
all: Don't put most ListingTables into CardBodies
Instead of a CardBody with class "contains-list", we now add ListingTable components as direct children to their Cards. This makes them mostly look like they did with PF5.
1 parent e5e57a3 commit a3efbd1

File tree

4 files changed

+59
-67
lines changed

4 files changed

+59
-67
lines changed

‎src/components/networks/networkList.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
import React from 'react';
2020
import PropTypes from 'prop-types';
2121
import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core/dist/esm/components/Breadcrumb";
22-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
22+
import { Card, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
2323
import { Page, PageBreadcrumb, PageSection, PageSectionVariants } from "@patternfly/react-core/dist/esm/components/Page";
2424
import { WithDialogs } from 'dialogs.jsx';
2525

@@ -60,8 +60,7 @@ export class NetworkList extends React.Component {
6060
<CardHeader actions={{ actions: unlocked && <CreateNetworkAction /> }}>
6161
<CardTitle component="h2">{_("Networks")}</CardTitle>
6262
</CardHeader>
63-
<CardBody className="contains-list">
64-
<ListingTable aria-label={_("Networks")}
63+
<ListingTable aria-label={_("Networks")}
6564
variant='compact'
6665
columns={[
6766
{ title: _("Name"), header: true, props: { width: 15 } },
@@ -76,7 +75,6 @@ export class NetworkList extends React.Component {
7675
.sort(sortFunction)
7776
.map(network => getNetworkRow({ network, resourceHasError }))
7877
} />
79-
</CardBody>
8078
</Card>
8179
</PageSection>
8280
</Page>

‎src/components/storagePools/storagePoolList.jsx

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
import React from 'react';
2020
import PropTypes from 'prop-types';
2121
import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core/dist/esm/components/Breadcrumb";
22-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
22+
import { Card, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
2323
import { Page, PageBreadcrumb, PageSection } from "@patternfly/react-core/dist/esm/components/Page";
2424
import { WithDialogs } from 'dialogs.jsx';
2525

@@ -61,27 +61,25 @@ export class StoragePoolList extends React.Component {
6161
<CardHeader actions={{ actions }}>
6262
<CardTitle component="h2">{_("Storage pools")}</CardTitle>
6363
</CardHeader>
64-
<CardBody className="contains-list">
65-
<ListingTable aria-label={_("Storage pools")}
66-
variant='compact'
67-
columns={[
68-
{ title: _("Name"), header: true, props: { width: 15 } },
69-
{ title: _("Size"), props: { width: 40 } },
70-
{ title: _("Connection"), props: { width: 15 } },
71-
{ title: _("State"), props: { width: 15 } },
72-
{ title: "", props: { width: 15, "aria-label": _("Actions") } },
73-
]}
74-
emptyCaption={_("No storage pool is defined on this host")}
75-
rows={storagePools
76-
.sort(sortFunction)
77-
.map(storagePool => {
78-
const filterVmsByConnection = vms.filter(vm => vm.connectionName == storagePool.connectionName);
64+
<ListingTable aria-label={_("Storage pools")}
65+
variant='compact'
66+
columns={[
67+
{ title: _("Name"), header: true, props: { width: 15 } },
68+
{ title: _("Size"), props: { width: 40 } },
69+
{ title: _("Connection"), props: { width: 15 } },
70+
{ title: _("State"), props: { width: 15 } },
71+
{ title: "", props: { width: 15, "aria-label": _("Actions") } },
72+
]}
73+
emptyCaption={_("No storage pool is defined on this host")}
74+
rows={storagePools
75+
.sort(sortFunction)
76+
.map(storagePool => {
77+
const filterVmsByConnection = vms.filter(vm => vm.connectionName == storagePool.connectionName);
7978

80-
return getStoragePoolRow({ storagePool, vms: filterVmsByConnection });
81-
})
82-
}
83-
/>
84-
</CardBody>
79+
return getStoragePoolRow({ storagePool, vms: filterVmsByConnection });
80+
})
81+
}
82+
/>
8583
</Card>
8684
</PageSection>
8785
</Page>

‎src/components/vm/vmDetailsPage.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -230,9 +230,7 @@ export const VmDetailsPage = ({
230230
<CardHeader actions={{ actions: card.actions }}>
231231
<CardTitle component="h2">{card.title}</CardTitle>
232232
</CardHeader>
233-
<CardBody className={["disks-card", "hostdevs-card", "networks-card", "snapshots-card", "filesystems-card"].includes(card.className) ? "contains-list" : ""}>
234-
{card.body}
235-
</CardBody>
233+
{["disks-card", "hostdevs-card", "networks-card", "snapshots-card", "filesystems-card"].includes(card.className) ? card.body : <CardBody>{card.body}</CardBody>}
236234
<CardFooter />
237235
</Card>
238236
);

‎src/components/vms/hostvmslist.jsx

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
2121
import cockpit from 'cockpit';
2222

2323
import { Button } from "@patternfly/react-core/dist/esm/components/Button";
24-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
24+
import { Card, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
2525
import { Divider } from "@patternfly/react-core/dist/esm/components/Divider";
2626
import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput";
2727
import { Gallery } from "@patternfly/react-core/dist/esm/layouts/Gallery";
@@ -154,63 +154,61 @@ const HostVmsList = ({ vms, config, ui, storagePools, actions, networks, onAddEr
154154
<CardHeader actions={{ actions: toolBar }}>
155155
<CardTitle component="h2">{_("Virtual machines")}</CardTitle>
156156
</CardHeader>
157-
<CardBody className="contains-list">
158-
<ListingTable aria-label={_("Virtual machines")}
159-
variant='compact'
160-
columns={[
161-
{ title: _("Name"), header: true, props: { width: 25 } },
162-
{ title: _("Connection"), props: { width: 25 } },
163-
{ title: _("State"), props: { width: 25 } },
164-
{ title: "", props: { width: 25, "aria-label": _("Actions") } },
165-
]}
166-
emptyCaption={_("No VM is running or defined on this host")}
167-
rows={ combinedVmsFiltered
168-
.sort(sortFunction)
169-
.map(vm => {
170-
const vmActions = (
171-
<VmActions
157+
<ListingTable aria-label={_("Virtual machines")}
158+
variant='compact'
159+
columns={[
160+
{ title: _("Name"), header: true, props: { width: 25 } },
161+
{ title: _("Connection"), props: { width: 25 } },
162+
{ title: _("State"), props: { width: 25 } },
163+
{ title: "", props: { width: 25, "aria-label": _("Actions") } },
164+
]}
165+
emptyCaption={_("No VM is running or defined on this host")}
166+
rows={ combinedVmsFiltered
167+
.sort(sortFunction)
168+
.map(vm => {
169+
const vmActions = (
170+
<VmActions
172171
vm={vm}
173172
vms={vms}
174173
config={config}
175174
storagePools={storagePools}
176175
onAddErrorNotification={onAddErrorNotification}
177-
/>
178-
);
176+
/>
177+
);
179178

180-
return {
181-
columns: [
182-
{
183-
title: <Button id={`${vmId(vm.name)}-${vm.connectionName}-name`}
179+
return {
180+
columns: [
181+
{
182+
title: <Button id={`${vmId(vm.name)}-${vm.connectionName}-name`}
184183
variant="link"
185184
isInline
186185
isDisabled={vm.isUi && !vm.createInProgress}
187186
component="a"
188187
href={'#' + cockpit.format("vm?name=$0&connection=$1", encodeURIComponent(vm.name), vm.connectionName)}
189188
className="vm-list-item-name">{vm.name}</Button>
190-
},
191-
{ title: rephraseUI('connections', vm.connectionName) },
192-
{
193-
title: (
194-
<VmState vm={vm}
189+
},
190+
{ title: rephraseUI('connections', vm.connectionName) },
191+
{
192+
title: (
193+
<VmState vm={vm}
195194
vms={vms}
196195
dismissError={() => store.dispatch(updateVm({
197196
connectionName: vm.connectionName,
198197
name: vm.name,
199198
error: null
200199
}))} />
201-
),
200+
),
201+
},
202+
{ title: vmActions },
203+
],
204+
props: {
205+
key: cockpit.format("$0-$1-row", vmId(vm.name), vm.connectionName),
206+
'data-row-id': cockpit.format("$0-$1", vmId(vm.name), vm.connectionName),
207+
'data-vm-transient': !vm.persistent,
202208
},
203-
{ title: vmActions },
204-
],
205-
props: {
206-
key: cockpit.format("$0-$1-row", vmId(vm.name), vm.connectionName),
207-
'data-row-id': cockpit.format("$0-$1", vmId(vm.name), vm.connectionName),
208-
'data-vm-transient': !vm.persistent,
209-
},
210-
};
211-
}) }
212-
/>
213-
</CardBody>
209+
};
210+
}) }
211+
/>
214212
</Card>
215213
</Gallery>
216214
</PageSection>

0 commit comments

Comments
 (0)