From 4ffd8543e997ad93d2267cc2e8eee607d3e51781 Mon Sep 17 00:00:00 2001
From: Subho <contact.subhoghosh@gmail.com>
Date: Tue, 18 Apr 2023 21:37:46 +0530
Subject: [PATCH] Remember VM state filter settings

Fixes #1032
---
 src/components/aggregateStatusCards.jsx       |  8 +--
 src/components/networks/networkList.jsx       |  2 +-
 .../storagePools/storagePoolList.jsx          |  2 +-
 src/components/vm/vmDetailsPage.jsx           |  4 +-
 src/components/vms/hostvmslist.jsx            | 44 +++++++++++++-
 test/check-machines-lifecycle                 | 58 +++++++++++++++++++
 6 files changed, 108 insertions(+), 10 deletions(-)

diff --git a/src/components/aggregateStatusCards.jsx b/src/components/aggregateStatusCards.jsx
index 298674559..ce15dfe89 100644
--- a/src/components/aggregateStatusCards.jsx
+++ b/src/components/aggregateStatusCards.jsx
@@ -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>
@@ -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>
diff --git a/src/components/networks/networkList.jsx b/src/components/networks/networkList.jsx
index 916571c0e..46c09c5f8 100644
--- a/src/components/networks/networkList.jsx
+++ b/src/components/networks/networkList.jsx
@@ -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>
diff --git a/src/components/storagePools/storagePoolList.jsx b/src/components/storagePools/storagePoolList.jsx
index f476a9390..95ee6ec8d 100644
--- a/src/components/storagePools/storagePoolList.jsx
+++ b/src/components/storagePools/storagePoolList.jsx
@@ -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>
diff --git a/src/components/vm/vmDetailsPage.jsx b/src/components/vm/vmDetailsPage.jsx
index 91b4ad661..eae56e8af 100644
--- a/src/components/vm/vmDetailsPage.jsx
+++ b/src/components/vm/vmDetailsPage.jsx
@@ -231,6 +231,8 @@ export const VmDetailsPage = ({
         );
     });
 
+    console.log(cockpit.location.encode('/', cockpit.location.options));
+
     return (
         <WithDialogs>
             <Page id="vm-details"
@@ -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>
diff --git a/src/components/vms/hostvmslist.jsx b/src/components/vms/hostvmslist.jsx
index 9e4833d94..108c56ae3 100644
--- a/src/components/vms/hostvmslist.jsx
+++ b/src/components/vms/hostvmslist.jsx
@@ -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';
@@ -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)];
@@ -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>
@@ -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">
@@ -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) },
diff --git a/test/check-machines-lifecycle b/test/check-machines-lifecycle
index 18870b899..cdfff6b6e 100755
--- a/test/check-machines-lifecycle
+++ b/test/check-machines-lifecycle
@@ -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')