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 Apr 19, 2023
1 parent 9414485 commit f413594
Show file tree
Hide file tree
Showing 5 changed files with 50 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,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>
Expand All @@ -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>
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 @@ -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>
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 @@ -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>
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 @@ -233,14 +233,16 @@ export const VmDetailsPage = ({
);
});

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

return (
<WithDialogs>
<Page id="vm-details"
className="vm-details"
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>
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 @@ -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';
Expand Down Expand Up @@ -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)];
Expand All @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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) },
Expand Down

0 comments on commit f413594

Please sign in to comment.