From f413594615aac4cb229235bf946eeb18de9590c5 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 +++++++++++++++++--
 5 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/components/aggregateStatusCards.jsx b/src/components/aggregateStatusCards.jsx
index 265c87a6b..8c17d0c9a 100644
--- a/src/components/aggregateStatusCards.jsx
+++ b/src/components/aggregateStatusCards.jsx
@@ -42,10 +42,10 @@ 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>
                         <ServerIcon size="md" />
-                        <Button onClick={() => cockpit.location.go(['storages'])} variant="link">
+                        <Button variant="link">
                             <span className="card-pf-title-link">
                                 {cockpit.format(cockpit.ngettext("$0 Storage pool", "$0 Storage pools", this.props.storagePools.length), this.props.storagePools.length)}
                             </span>
@@ -67,10 +67,10 @@ 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>
                         <NetworkIcon size="md" />
-                        <Button onClick={() => cockpit.location.go(['networks'])} variant="link">
+                        <Button variant="link">
                             <span className="card-pf-title-link">
                                 {cockpit.format(cockpit.ngettext("$0 Network", "$0 Networks", this.props.networks.length), this.props.networks.length)}
                             </span>
diff --git a/src/components/networks/networkList.jsx b/src/components/networks/networkList.jsx
index d9831c7ea..250ca935c 100644
--- a/src/components/networks/networkList.jsx
+++ b/src/components/networks/networkList.jsx
@@ -49,7 +49,7 @@ export class NetworkList extends React.Component {
                   isBreadcrumbGrouped
                   breadcrumb={
                       <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 b4bebdc0d..a6a0d718f 100644
--- a/src/components/storagePools/storagePoolList.jsx
+++ b/src/components/storagePools/storagePoolList.jsx
@@ -50,7 +50,7 @@ export class StoragePoolList extends React.Component {
                       isBreadcrumbGrouped
                       breadcrumb={
                           <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 c51271463..73cb18c7e 100644
--- a/src/components/vm/vmDetailsPage.jsx
+++ b/src/components/vm/vmDetailsPage.jsx
@@ -233,6 +233,8 @@ export const VmDetailsPage = ({
         );
     });
 
+    console.log(cockpit.location.encode('/', cockpit.location.options));
+
     return (
         <WithDialogs>
             <Page id="vm-details"
@@ -240,7 +242,7 @@ export const VmDetailsPage = ({
                   data-pools-count={storagePools.length}
                   breadcrumb={
                       <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 286838738..fcc92e8e0 100644
--- a/src/components/vms/hostvmslist.jsx
+++ b/src/components/vms/hostvmslist.jsx
@@ -30,6 +30,7 @@ import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/dist
 import { Page, PageSection } from "@patternfly/react-core/dist/esm/components/Page";
 import { Text, TextVariants } from "@patternfly/react-core/dist/esm/components/Text";
 import { WithDialogs } from 'dialogs.jsx';
+import { usePageLocation } from 'hooks';
 
 import VmActions from '../vm/vmActions.jsx';
 import { updateVm } from '../../actions/store-actions.js';
@@ -66,11 +67,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)];
@@ -93,6 +105,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>
@@ -110,7 +145,10 @@ const HostVmsList = ({ vms, config, ui, storagePools, actions, networks, onAddEr
                         <Select variant={SelectVariant.single}
                                 toggleId="vm-state-select-toggle"
                                 onToggle={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">
@@ -173,7 +211,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) },