Skip to content

Commit

Permalink
Remember VM state filter settings
Browse files Browse the repository at this point in the history 
Fixes cockpit-project#1032
  • Loading branch information
@subhoghoshX
subhoghoshX committed May 8, 2023
1 parent 15c55ab commit 4ffd854
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 10 deletions.
8 changes: 4 additions & 4 deletions src/components/aggregateStatusCards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ export class AggregateStatusCards extends React.Component {
className='ct-card-info'
isSelectable
onKeyDown={event => this.onCardSelect(event, 'storages')}
onClick={() => cockpit.location.go(['storages'])}>
onClick={() => cockpit.location.go(['storages'], cockpit.location.options)}>
<CardHeader>
<Flex alignItems={{ default: 'alignItemsCenter' }}>
<ServerIcon size="md" />
<Button onClick={() => cockpit.location.go(['storages'])} variant="link">
<Button variant="link">
{cockpit.format(cockpit.ngettext("$0 Storage pool", "$0 Storage pools", this.props.storagePools.length), this.props.storagePools.length)}
</Button>
</Flex>
Expand All @@ -67,11 +67,11 @@ export class AggregateStatusCards extends React.Component {
className='ct-card-info'
isSelectable
onKeyDown={event => this.onCardSelect(event, 'networks')}
onClick={() => cockpit.location.go(['networks'])}>
onClick={() => cockpit.location.go(['networks'], cockpit.location.options)}>
<CardHeader>
<Flex alignItems={{ default: 'alignItemsCenter' }}>
<NetworkIcon size="md" />
<Button onClick={() => cockpit.location.go(['networks'])} variant="link">
<Button variant="link">
{cockpit.format(cockpit.ngettext("$0 Network", "$0 Networks", this.props.networks.length), this.props.networks.length)}
</Button>
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion src/components/networks/networkList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export class NetworkList extends React.Component {
<Page>
<PageBreadcrumb stickyOnBreakpoint={{ default: "top" }}>
<Breadcrumb variant={PageSectionVariants.light} className='machines-listing-breadcrumb'>
<BreadcrumbItem to='#'>
<BreadcrumbItem to={'#' + cockpit.location.encode('/', cockpit.location.options.status ? { status: cockpit.location.options.status } : {})}>
{_("Virtual machines")}
</BreadcrumbItem>
<BreadcrumbItem isActive>
Expand Down
2 changes: 1 addition & 1 deletion src/components/storagePools/storagePoolList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class StoragePoolList extends React.Component {
<Page>
<PageBreadcrumb stickyOnBreakpoint={{ default: "top" }}>
<Breadcrumb className='machines-listing-breadcrumb'>
<BreadcrumbItem to='#'>
<BreadcrumbItem to={'#' + cockpit.location.encode('/', cockpit.location.options.status ? { status: cockpit.location.options.status } : {})}>
{_("Virtual machines")}
</BreadcrumbItem>
<BreadcrumbItem isActive>
Expand Down
4 changes: 3 additions & 1 deletion src/components/vm/vmDetailsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,8 @@ export const VmDetailsPage = ({
);
});

console.log(cockpit.location.encode('/', cockpit.location.options));

return (
<WithDialogs>
<Page id="vm-details"
Expand All @@ -239,7 +241,7 @@ export const VmDetailsPage = ({
<PageGroup>
<PageBreadcrumb>
<Breadcrumb className='machines-listing-breadcrumb'>
<BreadcrumbItem to='#'>
<BreadcrumbItem to={'#' + cockpit.location.encode('/', cockpit.location.options.status ? { status: cockpit.location.options.status } : {})}>
{_("Virtual machines")}
</BreadcrumbItem>
<BreadcrumbItem isActive>
Expand Down
44 changes: 41 additions & 3 deletions src/components/vms/hostvmslist.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core/dis
import { Select, SelectOption } from "@patternfly/react-core/dist/esm/deprecated/components/Select";
import { Page, PageSection } from "@patternfly/react-core/dist/esm/components/Page";
import { WithDialogs } from 'dialogs.jsx';
import { usePageLocation } from 'hooks';

import VmActions from '../vm/vmActions.jsx';
import { updateVm } from '../../actions/store-actions.js';
Expand Down Expand Up @@ -65,11 +66,22 @@ const VmState = ({ vm, dismissError }) => {

const _ = cockpit.gettext;

function getStatusFilterOption(options) {
if (!options.status) {
const defaultSelection = { value: _("All"), toString: function() { return this.value } };
return defaultSelection;
}

return { value: rephraseUI('resourceStates', options.status), apiState: options.status, toString: function() { return this.value } };
}

/**
* List of all VMs defined on this host
*/
const HostVmsList = ({ vms, config, ui, storagePools, actions, networks, onAddErrorNotification }) => {
const [statusSelected, setStatusSelected] = useState({ value: _("All"), toString: function() { return this.value } });
const { options } = usePageLocation();

const [statusSelected, setStatusSelected] = useState(getStatusFilterOption(options));
const [currentTextFilter, setCurrentTextFilter] = useState("");
const [statusIsExpanded, setStatusIsExpanded] = useState(false);
const combinedVms = [...vms, ...dummyVmsFilter(vms, ui.vms)];
Expand All @@ -92,6 +104,29 @@ const HostVmsList = ({ vms, config, ui, storagePools, actions, networks, onAddEr
.map(state => { return { value: rephraseUI('resourceStates', state), apiState: state } })
.sort((a, b) => (prioritySorting[a.apiState] || 0) - (prioritySorting[b.apiState] || 0) || a.value.localeCompare(b.value)));

useState(() => {
function onNavigate() {
const { path, options } = cockpit.location;

if (path.length == 1) return;

setStatusSelected(getStatusFilterOption(options));
}

cockpit.addEventListener("locationchanged", onNavigate);

return () => cockpit.removeEventListener("locationchanged", onNavigate);
}, []);

const onStatusFilterChange = (selection) => {
if (selection.value === _("All")) {
delete options.status;
cockpit.location.go([], { ...options });
} else {
cockpit.location.go([], { ...options, status: selection.apiState });
}
};

const toolBar = (
<Toolbar>
<ToolbarContent>
Expand All @@ -109,7 +144,10 @@ const HostVmsList = ({ vms, config, ui, storagePools, actions, networks, onAddEr
<Select variant="single"
toggleId="vm-state-select-toggle"
onToggle={(_event, statusIsExpanded) => setStatusIsExpanded(statusIsExpanded)}
onSelect={(event, selection) => { setStatusIsExpanded(false); setStatusSelected(selection) }}
onSelect={(event, selection) => {
setStatusIsExpanded(false);
onStatusFilterChange(selection);
}}
selections={statusSelected}
isOpen={statusIsExpanded}
aria-labelledby="vm-state-select">
Expand Down Expand Up @@ -167,7 +205,7 @@ const HostVmsList = ({ vms, config, ui, storagePools, actions, networks, onAddEr
isInline
isDisabled={vm.isUi && !vm.createInProgress}
component="a"
href={'#' + cockpit.format("vm?name=$0&connection=$1", encodeURIComponent(vm.name), vm.connectionName)}
href={'#' + cockpit.format(`vm?name=$0&connection=$1${options.status ? '&status=$2' : ''}`, encodeURIComponent(vm.name), vm.connectionName, options.status)}
className="vm-list-item-name">{vm.name}</Button>
},
{ title: rephraseUI('connections', vm.connectionName) },
Expand Down
58 changes: 58 additions & 0 deletions test/check-machines-lifecycle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,64 @@ class TestMachinesLifecycle(VirtualMachinesCase):
b.wait_in_text(".pf-c-popover", "VM subVmTest2 failed to start")
b.click('#vm-subVmTest2-system-state button[aria-label=Close]')

def testVmFilterSettingsOnNavigate(self):
b = self.browser

self.createVm("subVmTest1")
self.createVm("subVmTest2", running=False)

self.login_and_go("/machines")
self.waitPageInit()

self.waitVmRow("subVmTest1")
self.waitVmRow("subVmTest2")

b.select_PF4("#vm-state-select-toggle", "Running")

# go to storagePoolList page and back to home page
b.click("#card-pf-storage-pools")
b.click(".pf-c-breadcrumb__link")

self.waitVmRow("subVmTest1")
self.waitVmRow("subVmTest2", "system", False)

# go to networkList page and back to home page
b.click("#card-pf-networks")
b.click(".pf-c-breadcrumb__link")

self.waitVmRow("subVmTest1")
self.waitVmRow("subVmTest2", "system", False)

# go to VM details page and back to home page
b.click("#vm-subVmTest1-system-name")
b.click(".pf-c-breadcrumb__link")

self.waitVmRow("subVmTest1")
self.waitVmRow("subVmTest2", "system", False)

b.select_PF4("#vm-state-select-toggle", "Shut off")

# go to storagePoolList page and back to home page
b.click("#card-pf-storage-pools")
b.click(".pf-c-breadcrumb__link")

self.waitVmRow("subVmTest1", "system", False)
self.waitVmRow("subVmTest2")

# go to networkList page and back to home page
b.click("#card-pf-networks")
b.click(".pf-c-breadcrumb__link")

self.waitVmRow("subVmTest1", "system", False)
self.waitVmRow("subVmTest2")

# go to VM details page and back to home page
b.click("#vm-subVmTest2-system-name")
b.click(".pf-c-breadcrumb__link")

self.waitVmRow("subVmTest1", "system", False)
self.waitVmRow("subVmTest2")

def testCloneSessionConnection(self):
self.testClone(connectionName='session')

Expand Down

0 comments on commit 4ffd854

Please sign in to comment.