fix(home): fix home page filters EE-2972 (#6789)

pull/6819/head
Prabhat Khera 3 years ago committed by GitHub
parent 5b77edb76d
commit bebee78152
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -2,6 +2,7 @@ package endpoints
import (
"net/http"
"sort"
"strconv"
"strings"
"time"
@ -12,6 +13,8 @@ import (
"github.com/portainer/libhttp/response"
portainer "github.com/portainer/portainer/api"
"github.com/portainer/portainer/api/http/security"
"github.com/portainer/portainer/api/internal/endpointutils"
"github.com/portainer/portainer/api/internal/utils"
)
const (
@ -20,6 +23,8 @@ const (
EdgeDeviceFilterUntrusted = "untrusted"
)
var endpointGroupNames map[portainer.EndpointGroupID]string
// @id EndpointList
// @summary List environments(endpoints)
// @description List all environments(endpoints) based on the current user authorizations. Will
@ -55,6 +60,8 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
groupID, _ := request.RetrieveNumericQueryParameter(r, "groupId", true)
limit, _ := request.RetrieveNumericQueryParameter(r, "limit", true)
sortField, _ := request.RetrieveQueryParameter(r, "sort", true)
sortOrder, _ := request.RetrieveQueryParameter(r, "order", true)
var endpointTypes []int
request.RetrieveJSONQueryParameter(r, "types", &endpointTypes, true)
@ -67,11 +74,23 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
var endpointIDs []portainer.EndpointID
request.RetrieveJSONQueryParameter(r, "endpointIds", &endpointIDs, true)
var statuses []int
request.RetrieveJSONQueryParameter(r, "status", &statuses, true)
var groupIDs []int
request.RetrieveJSONQueryParameter(r, "groupIds", &groupIDs, true)
endpointGroups, err := handler.DataStore.EndpointGroup().EndpointGroups()
if err != nil {
return &httperror.HandlerError{http.StatusInternalServerError, "Unable to retrieve environment groups from the database", err}
}
// create endpoint groups as a map for more convenient access
endpointGroupNames = make(map[portainer.EndpointGroupID]string, 0)
for _, group := range endpointGroups {
endpointGroupNames[group.ID] = group.Name
}
endpoints, err := handler.DataStore.Endpoint().Endpoints()
if err != nil {
return &httperror.HandlerError{http.StatusInternalServerError, "Unable to retrieve environments from the database", err}
@ -90,12 +109,16 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
filteredEndpoints := security.FilterEndpoints(endpoints, endpointGroups, securityContext)
totalAvailableEndpoints := len(filteredEndpoints)
if groupID != 0 {
filteredEndpoints = filterEndpointsByGroupIDs(filteredEndpoints, []int{groupID})
}
if endpointIDs != nil {
filteredEndpoints = filteredEndpointsByIds(filteredEndpoints, endpointIDs)
}
if groupID != 0 {
filteredEndpoints = filterEndpointsByGroupID(filteredEndpoints, portainer.EndpointGroupID(groupID))
if len(groupIDs) > 0 {
filteredEndpoints = filterEndpointsByGroupIDs(filteredEndpoints, groupIDs)
}
edgeDeviceFilter, _ := request.RetrieveQueryParameter(r, "edgeDeviceFilter", false)
@ -103,6 +126,10 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
filteredEndpoints = filterEndpointsByEdgeDevice(filteredEndpoints, edgeDeviceFilter)
}
if len(statuses) > 0 {
filteredEndpoints = filterEndpointsByStatuses(filteredEndpoints, statuses)
}
if search != "" {
tags, err := handler.DataStore.Tag().Tags()
if err != nil {
@ -123,6 +150,9 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
filteredEndpoints = filteredEndpointsByTags(filteredEndpoints, tagIDs, endpointGroups, tagsPartialMatch)
}
// Sort endpoints by field
sortEndpointsByField(filteredEndpoints, sortField, sortOrder == "desc")
filteredEndpointCount := len(filteredEndpoints)
paginatedEndpoints := paginateEndpoints(filteredEndpoints, start, limit)
@ -160,11 +190,11 @@ func paginateEndpoints(endpoints []portainer.Endpoint, start, limit int) []porta
return endpoints[start:end]
}
func filterEndpointsByGroupID(endpoints []portainer.Endpoint, endpointGroupID portainer.EndpointGroupID) []portainer.Endpoint {
func filterEndpointsByGroupIDs(endpoints []portainer.Endpoint, endpointGroupIDs []int) []portainer.Endpoint {
filteredEndpoints := make([]portainer.Endpoint, 0)
for _, endpoint := range endpoints {
if endpoint.GroupID == endpointGroupID {
if utils.Contains(endpointGroupIDs, int(endpoint.GroupID)) {
filteredEndpoints = append(filteredEndpoints, endpoint)
}
}
@ -190,6 +220,60 @@ func filterEndpointsBySearchCriteria(endpoints []portainer.Endpoint, endpointGro
return filteredEndpoints
}
func filterEndpointsByStatuses(endpoints []portainer.Endpoint, statuses []int) []portainer.Endpoint {
filteredEndpoints := make([]portainer.Endpoint, 0)
for _, endpoint := range endpoints {
status := endpoint.Status
if endpointutils.IsEdgeEndpoint(&endpoint) {
isCheckValid := false
if endpoint.EdgeCheckinInterval != 0 && endpoint.LastCheckInDate != 0 {
isCheckValid = time.Now().Unix()-endpoint.LastCheckInDate <= int64(endpoint.EdgeCheckinInterval*2+20)
}
status = portainer.EndpointStatusDown // Offline
if isCheckValid {
status = portainer.EndpointStatusUp // Online
}
}
if utils.Contains(statuses, int(status)) {
filteredEndpoints = append(filteredEndpoints, endpoint)
}
}
return filteredEndpoints
}
func sortEndpointsByField(endpoints []portainer.Endpoint, sortField string, isSortDesc bool) {
switch sortField {
case "Name":
if isSortDesc {
sort.Stable(sort.Reverse(EndpointsByName(endpoints)))
} else {
sort.Stable(EndpointsByName(endpoints))
}
case "Group":
if isSortDesc {
sort.Stable(sort.Reverse(EndpointsByGroup(endpoints)))
} else {
sort.Stable(EndpointsByGroup(endpoints))
}
case "Status":
if isSortDesc {
sort.Slice(endpoints, func(i, j int) bool {
return endpoints[i].Status > endpoints[j].Status
})
} else {
sort.Slice(endpoints, func(i, j int) bool {
return endpoints[i].Status < endpoints[j].Status
})
}
}
}
func endpointMatchSearchCriteria(endpoint *portainer.Endpoint, tags []string, searchCriteria string) bool {
if strings.Contains(strings.ToLower(endpoint.Name), searchCriteria) {
return true

@ -0,0 +1,43 @@
package endpoints
import (
"strings"
portainer "github.com/portainer/portainer/api"
"github.com/portainer/portainer/api/internal/natsort"
)
type EndpointsByName []portainer.Endpoint
func (e EndpointsByName) Len() int {
return len(e)
}
func (e EndpointsByName) Swap(i, j int) {
e[i], e[j] = e[j], e[i]
}
func (e EndpointsByName) Less(i, j int) bool {
return natsort.Compare(strings.ToLower(e[i].Name), strings.ToLower(e[j].Name))
}
type EndpointsByGroup []portainer.Endpoint
func (e EndpointsByGroup) Len() int {
return len(e)
}
func (e EndpointsByGroup) Swap(i, j int) {
e[i], e[j] = e[j], e[i]
}
func (e EndpointsByGroup) Less(i, j int) bool {
if e[i].GroupID == e[j].GroupID {
return false
}
groupA := endpointGroupNames[e[i].GroupID]
groupB := endpointGroupNames[e[j].GroupID]
return natsort.Compare(strings.ToLower(groupA), strings.ToLower(groupB))
}

@ -0,0 +1,126 @@
// Package natsort implements natural strings sorting
// An extension of the following package found here:
// https://github.com/facette/natsort
// Our extension adds ReverseSort
//
// Original 3-Clause BSD License below:
// Copyright (c) 2015, Vincent Batoufflet and Marc Falzon
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions
// are met:
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
// * Neither the name of the authors nor the names of its contributors
// may be used to endorse or promote products derived from this software
// without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
package natsort
import (
"regexp"
"sort"
"strconv"
)
type natsort []string
func (s natsort) Len() int {
return len(s)
}
func (s natsort) Less(a, b int) bool {
return Compare(s[a], s[b])
}
func (s natsort) Swap(a, b int) {
s[a], s[b] = s[b], s[a]
}
var chunkifyRegexp = regexp.MustCompile(`(\d+|\D+)`)
func chunkify(s string) []string {
return chunkifyRegexp.FindAllString(s, -1)
}
// Sort sorts a list of strings in a natural order
func Sort(l []string) {
sort.Sort(natsort(l))
}
// ReverseSort sorts a list of strings in a natural decending order
func ReverseSort(l []string) {
sort.Sort(sort.Reverse(natsort(l)))
}
// compare returns true if the first string < second (natsort order) e.g. 1.1.1 < 1.11
func Compare(a, b string) bool {
chunksA := chunkify(a)
chunksB := chunkify(b)
nChunksA := len(chunksA)
nChunksB := len(chunksB)
for i := range chunksA {
if i >= nChunksB {
return false
}
aInt, aErr := strconv.Atoi(chunksA[i])
bInt, bErr := strconv.Atoi(chunksB[i])
// If both chunks are numeric, compare them as integers
if aErr == nil && bErr == nil {
if aInt == bInt {
if i == nChunksA-1 {
// We reached the last chunk of A, thus B is greater than A
return true
} else if i == nChunksB-1 {
// We reached the last chunk of B, thus A is greater than B
return false
}
continue
}
return aInt < bInt
}
// So far both strings are equal, continue to next chunk
if chunksA[i] == chunksB[i] {
if i == nChunksA-1 {
// We reached the last chunk of A, thus B is greater than A
return true
} else if i == nChunksB-1 {
// We reached the last chunk of B, thus A is greater than B
return false
}
continue
}
return chunksA[i] < chunksB[i]
}
return false
}

@ -0,0 +1,11 @@
package utils
// Contains returns true if the given int is contained in the given slice of int.
func Contains(s []int, e int) bool {
for _, a := range s {
if a == e {
return true
}
}
return false
}

@ -161,6 +161,7 @@ html {
--bg-app-datatable-tbody: var(--grey-24);
--bg-stepper-item-active: var(--white-color);
--bg-stepper-item-counter: var(--grey-61);
--bg-sortbutton-color: var(--white-color);
--text-main-color: var(--grey-7);
--text-body-color: var(--grey-6);
@ -242,6 +243,7 @@ html {
--border-daterangepicker-after: var(--white-color);
--border-tooltip-color: var(--grey-47);
--border-modal: 0px;
--border-sortbutton: var(--grey-8);
--hover-sidebar-color: var(--grey-37);
--shadow-box-color: 0 3px 10px -2px var(--grey-50);
@ -334,6 +336,7 @@ html {
--bg-app-datatable-tbody: var(--grey-1);
--bg-stepper-item-active: var(--grey-1);
--bg-stepper-item-counter: var(--grey-7);
--bg-sortbutton-color: var(--grey-1);
--text-main-color: var(--white-color);
--text-body-color: var(--white-color);
@ -416,6 +419,7 @@ html {
--border-daterangepicker-after: var(--grey-3);
--border-tooltip-color: var(--grey-3);
--border-modal: 0px;
--border-sortbutton: var(--grey-3);
--hover-sidebar-color: var(--grey-3);
--blue-color: var(--blue-2);
@ -507,6 +511,7 @@ html {
--bg-app-datatable-tbody: var(--black-color);
--bg-stepper-item-active: var(--black-color);
--bg-stepper-item-counter: var(--grey-3);
--bg-sortbutton-color: var(--grey-1);
--text-main-color: var(--white-color);
--text-body-color: var(--white-color);
@ -578,6 +583,7 @@ html {
--border-codemirror-cursor-color: var(--white-color);
--border-modal: 1px solid var(--white-color);
--border-blocklist-color: var(--white-color);
--border-sortbutton: var(--black-color);
--hover-sidebar-color: var(--blue-9);
--hover-sidebar-color: var(--black-color);

@ -8,3 +8,8 @@
display: inline-block;
margin-right: 5px;
}
.searchBar .textSpan {
display: inline-block;
width: 90%;
}

@ -18,7 +18,7 @@ export function FilterSearchBar({
<span className={styles.iconSpan}>
<i className="fa fa-search" aria-hidden="true" />
</span>
<span className={styles.iconSpan}>
<span className={styles.textSpan}>
<input
type="text"
className="searchInput"

@ -1,6 +1,5 @@
.sort-by-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
@ -8,3 +7,12 @@
.sort-by-element {
display: inline-block;
}
.sort-button {
background-color: var(--bg-sortbutton-color);
color: var(--text-ui-select-color);
border: 1px solid var(--border-sortbutton);
display: inline-block;
padding: 8px 10px;
border-radius: 5px;
}

@ -1,7 +1,6 @@
import { useEffect, useState } from 'react';
import { Select } from '@/portainer/components/form-components/ReactSelect';
import { Button } from '@/portainer/components/Button';
import { Filter } from '@/portainer/home/types';
import styles from './SortbySelector.module.css';
@ -13,6 +12,7 @@ interface Props {
placeHolder: string;
sortByDescending: boolean;
sortByButton: boolean;
value?: Filter;
}
export function SortbySelector({
@ -22,16 +22,17 @@ export function SortbySelector({
placeHolder,
sortByDescending,
sortByButton,
value,
}: Props) {
const upIcon = 'fa fa-sort-alpha-up';
const downIcon = 'fa fa-sort-alpha-down';
const [iconStyle, setIconStyle] = useState(upIcon);
const [iconStyle, setIconStyle] = useState(downIcon);
useEffect(() => {
if (sortByDescending) {
setIconStyle(downIcon);
} else {
setIconStyle(upIcon);
} else {
setIconStyle(downIcon);
}
}, [sortByDescending]);
@ -43,11 +44,13 @@ export function SortbySelector({
options={filterOptions}
onChange={(option) => onChange(option as Filter)}
isClearable
value={value}
/>
</div>
<div className={styles.sortbyelement}>
<Button
size="medium"
<div className={styles.sortByElement}>
<button
className={styles.sortButton}
type="button"
disabled={!sortByButton}
onClick={(e) => {
e.preventDefault();
@ -55,7 +58,7 @@ export function SortbySelector({
}}
>
<i className={iconStyle} />
</Button>
</button>
</div>
</div>
);

@ -9,6 +9,7 @@ import type {
EnvironmentId,
EnvironmentType,
EnvironmentSettings,
EnvironmentStatus,
} from '../types';
import { arrayToJson, buildUrl } from './utils';
@ -19,14 +20,24 @@ export interface EnvironmentsQueryParams {
tagIds?: TagId[];
endpointIds?: EnvironmentId[];
tagsPartialMatch?: boolean;
groupId?: EnvironmentGroupId;
groupIds?: EnvironmentGroupId[];
edgeDeviceFilter?: 'all' | 'trusted' | 'untrusted';
status?: EnvironmentStatus[];
sort?: string;
order?: 'asc' | 'desc';
}
export async function getEndpoints(
start: number,
limit: number,
{ types, tagIds, endpointIds, ...query }: EnvironmentsQueryParams = {}
{
types,
tagIds,
endpointIds,
status,
groupIds,
...query
}: EnvironmentsQueryParams = {}
) {
if (tagIds && tagIds.length === 0) {
return { totalCount: 0, value: <Environment[]>[] };
@ -48,6 +59,14 @@ export async function getEndpoints(
params.endpointIds = arrayToJson(endpointIds);
}
if (status) {
params.status = arrayToJson(status);
}
if (groupIds) {
params.groupIds = arrayToJson(groupIds);
}
try {
const response = await axios.get<Environment[]>(url, { params });
const totalCount = response.headers['x-total-count'];
@ -94,7 +113,7 @@ export async function endpointsByGroup(
search: string,
groupId: EnvironmentGroupId
) {
return getEndpoints(start, limit, { search, groupId });
return getEndpoints(start, limit, { search, groupIds: [groupId] });
}
export async function disassociateEndpoint(id: EnvironmentId) {

@ -8,7 +8,6 @@
.filter-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
@ -21,7 +20,7 @@
.filter-right {
padding: 10px;
width: 15%;
width: 20%;
right: 0;
display: inline-block;
margin-left: auto;
@ -33,3 +32,31 @@
width: 5%;
display: inline-block;
}
.clear-button {
display: inline-block;
border: 0px;
padding: 10px;
}
.action-button {
display: flex;
align-items: center;
justify-content: center;
}
.refresh-button {
display: inline-block;
width: fit-content;
}
.kubeconfig-button {
display: inline-block;
width: fit-content;
}
.filterSearchbar {
display: inline-block;
width: 100%;
padding-left: 10px;
}

@ -8,6 +8,7 @@ import {
EnvironmentType,
EnvironmentStatus,
} from '@/portainer/environments/types';
import { EnvironmentGroupId } from '@/portainer/environment-groups/types';
import { Button } from '@/portainer/components/Button';
import { useIsAdmin } from '@/portainer/hooks/useUser';
import {
@ -15,7 +16,10 @@ import {
useSearchBarState,
} from '@/portainer/components/datatables/components/FilterSearchBar';
import { SortbySelector } from '@/portainer/components/datatables/components/SortbySelector';
import { HomepageFilter } from '@/portainer/home/HomepageFilter';
import {
HomepageFilter,
useHomePageFilter,
} from '@/portainer/home/HomepageFilter';
import {
TableActions,
TableContainer,
@ -38,42 +42,97 @@ interface Props {
onRefresh(): void;
}
const PlatformOptions = [
{ value: EnvironmentType.Docker, label: 'Docker' },
{ value: EnvironmentType.Azure, label: 'Azure' },
{ value: EnvironmentType.KubernetesLocal, label: 'Kubernetes' },
];
const status = [
{ value: EnvironmentStatus.Up, label: 'Up' },
{ value: EnvironmentStatus.Down, label: 'Down' },
];
const SortByOptions = [
{ value: 1, label: 'Name' },
{ value: 2, label: 'Group' },
{ value: 3, label: 'Status' },
];
const storageKey = 'home_endpoints';
const allEnvironmentType = [
EnvironmentType.Docker,
EnvironmentType.AgentOnDocker,
EnvironmentType.Azure,
EnvironmentType.EdgeAgentOnDocker,
EnvironmentType.KubernetesLocal,
EnvironmentType.AgentOnKubernetes,
EnvironmentType.EdgeAgentOnKubernetes,
];
export function EnvironmentList({ onClickItem, onRefresh }: Props) {
const isAdmin = useIsAdmin();
const storageKey = 'home_endpoints';
const allEnvironmentType = [
EnvironmentType.Docker,
EnvironmentType.AgentOnDocker,
EnvironmentType.Azure,
EnvironmentType.EdgeAgentOnDocker,
EnvironmentType.KubernetesLocal,
EnvironmentType.AgentOnKubernetes,
EnvironmentType.EdgeAgentOnKubernetes,
];
const [platformType, setPlatformType] = useState(allEnvironmentType);
const [platformType, setPlatformType] = useHomePageFilter(
'platformType',
allEnvironmentType
);
const [searchBarValue, setSearchBarValue] = useSearchBarState(storageKey);
const [pageLimit, setPageLimit] = usePaginationLimitState(storageKey);
const [page, setPage] = useState(1);
const debouncedTextFilter = useDebounce(searchBarValue);
const [statusFilter, setStatusFilter] = useState<number[]>([]);
const [tagFilter, setTagFilter] = useState<number[]>([]);
const [groupFilter, setGroupFilter] = useState<number[]>([]);
const [sortByFilter, setSortByFilter] = useState<string>('');
const [sortByDescending, setSortByDescending] = useState(false);
const [sortByButton, setSortByButton] = useState(false);
const [statusFilter, setStatusFilter] = useHomePageFilter<
EnvironmentStatus[]
>('status', []);
const [tagFilter, setTagFilter] = useHomePageFilter<number[]>('tag', []);
const [groupFilter, setGroupFilter] = useHomePageFilter<EnvironmentGroupId[]>(
'group',
[]
);
const [sortByFilter, setSortByFilter] = useSearchBarState('sortBy');
const [sortByDescending, setSortByDescending] = useHomePageFilter(
'sortOrder',
false
);
const [sortByButton, setSortByButton] = useHomePageFilter(
'sortByButton',
false
);
const [platformState, setPlatformState] = useState<Filter[]>([]);
const [statusState, setStatusState] = useState<Filter[]>([]);
const [tagState, setTagState] = useState<Filter[]>([]);
const [groupState, setGroupState] = useState<Filter[]>([]);
const [platformState, setPlatformState] = useHomePageFilter<Filter[]>(
'type_state',
[]
);
const [statusState, setStatusState] = useHomePageFilter<Filter[]>(
'status_state',
[]
);
const [tagState, setTagState] = useHomePageFilter<Filter[]>('tag_state', []);
const [groupState, setGroupState] = useHomePageFilter<Filter[]>(
'group_state',
[]
);
const [sortByState, setSortByState] = useHomePageFilter<Filter | undefined>(
'sortby_state',
undefined
);
const groupsQuery = useGroups();
const { isLoading, environments, totalCount, totalAvailable } =
useEnvironmentList(
{ page, pageLimit, types: platformType, search: debouncedTextFilter },
{
page,
pageLimit,
types: platformType,
search: debouncedTextFilter,
status: statusFilter,
tagIds: tagFilter?.length ? tagFilter : undefined,
groupIds: groupFilter,
sort: sortByFilter,
order: sortByDescending ? 'desc' : 'asc',
},
true
);
@ -81,29 +140,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
setPage(1);
}, [searchBarValue]);
interface Collection {
Status: number[];
TagIds: number[];
GroupId: number[];
}
const PlatformOptions = [
{ value: EnvironmentType.Docker, label: 'Docker' },
{ value: EnvironmentType.Azure, label: 'Azure' },
{ value: EnvironmentType.KubernetesLocal, label: 'Kubernetes' },
];
const status = [
{ value: EnvironmentStatus.Up, label: 'Up' },
{ value: EnvironmentStatus.Down, label: 'Down' },
];
const SortByOptions = [
{ value: 1, label: 'Name' },
{ value: 2, label: 'Group' },
{ value: 3, label: 'Status' },
];
const groupOptions = [...(groupsQuery.data || [])];
const uniqueGroup = [
...new Map(groupOptions.map((item) => [item.Id, item])).values(),
@ -121,64 +157,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
label,
}));
const collection = {
Status: statusFilter,
TagIds: tagFilter,
GroupId: groupFilter,
};
function multiPropsFilter(
environments: Environment[],
collection: Collection,
sortByFilter: string,
sortByDescending: boolean
) {
const filterKeys = Object.keys(collection);
const filterResult = environments.filter((environment: Environment) =>
filterKeys.every((key) => {
if (!collection[key as keyof Collection].length) return true;
if (Array.isArray(environment[key as keyof Collection])) {
return (environment[key as keyof Collection] as number[]).some(
(keyEle) => collection[key as keyof Collection].includes(keyEle)
);
}
return collection[key as keyof Collection].includes(
environment[key as keyof Collection] as number
);
})
);
switch (sortByFilter) {
case 'Name':
return sortByDescending
? filterResult.sort((a, b) =>
b.Name.toUpperCase() > a.Name.toUpperCase() ? 1 : -1
)
: filterResult.sort((a, b) =>
a.Name.toUpperCase() > b.Name.toUpperCase() ? 1 : -1
);
case 'Group':
return sortByDescending
? filterResult.sort((a, b) => b.GroupId - a.GroupId)
: filterResult.sort((a, b) => a.GroupId - b.GroupId);
case 'Status':
return sortByDescending
? filterResult.sort((a, b) => b.Status - a.Status)
: filterResult.sort((a, b) => a.Status - b.Status);
case 'None':
return filterResult;
default:
return filterResult;
}
}
const filteredEnvironments: Environment[] = multiPropsFilter(
environments,
collection,
sortByFilter,
sortByDescending
);
function platformOnChange(filterOptions: Filter[]) {
setPlatformState(filterOptions);
const dockerBaseType = EnvironmentType.Docker;
@ -192,24 +170,21 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
EnvironmentType.EdgeAgentOnKubernetes,
];
let finalFilterEnvironment: number[] = [];
if (filterOptions.length === 0) {
setPlatformType(allEnvironmentType);
} else {
const filteredEnvironment = [
...new Set(
filterOptions.map(
(filterOptions: { value: number }) => filterOptions.value
)
),
];
if (filteredEnvironment.includes(dockerBaseType)) {
finalFilterEnvironment = [...filteredEnvironment, ...dockerRelateType];
let finalFilterEnvironment = filterOptions.map(
(filterOption) => filterOption.value
);
if (finalFilterEnvironment.includes(dockerBaseType)) {
finalFilterEnvironment = [
...finalFilterEnvironment,
...dockerRelateType,
];
}
if (filteredEnvironment.includes(kubernetesBaseType)) {
if (finalFilterEnvironment.includes(kubernetesBaseType)) {
finalFilterEnvironment = [
...filteredEnvironment,
...finalFilterEnvironment,
...kubernetesRelateType,
];
}
@ -266,7 +241,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
}
function clearFilter() {
setSearchBarValue('');
setPlatformState([]);
setPlatformType(allEnvironmentType);
setStatusState([]);
@ -281,9 +255,11 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
if (filterOptions !== null) {
setSortByFilter(filterOptions.label);
setSortByButton(true);
setSortByState(filterOptions);
} else {
setSortByFilter('None');
setSortByButton(false);
setSortByFilter('');
setSortByButton(true);
setSortByState(undefined);
}
}
@ -304,19 +280,34 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
<i className="fa fa-exclamation-circle blue-icon space-right" />
Click on an environment to manage
</div>
{isAdmin && (
<Button
onClick={onRefresh}
data-cy="home-refreshEndpointsButton"
className={clsx(styles.refreshEnvironmentsButton)}
>
<i className="fa fa-sync space-right" aria-hidden="true" />
Refresh
</Button>
)}
<KubeconfigButton environments={environments} />
<div className={styles.actionButton}>
<div className={styles.refreshButton}>
{isAdmin && (
<Button
onClick={onRefresh}
data-cy="home-refreshEndpointsButton"
className={clsx(styles.refreshEnvironmentsButton)}
>
<i
className="fa fa-sync space-right"
aria-hidden="true"
/>
Refresh
</Button>
)}
</div>
<div className={styles.kubeconfigButton}>
<KubeconfigButton environments={environments} />
</div>
<div className={styles.filterSearchbar}>
<FilterSearchBar
value={searchBarValue}
onChange={setSearchBarValue}
placeholder="Search by name, group, tag, status, URL..."
data-cy="home-endpointsSearchInput"
/>
</div>
</div>
</TableActions>
<div className={styles.filterContainer}>
<div className={styles.filterLeft}>
@ -351,19 +342,13 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
value={groupState}
/>
</div>
<div className={styles.filterLeft}>
<FilterSearchBar
value={searchBarValue}
onChange={setSearchBarValue}
placeholder="Search...."
data-cy="home-endpointsSearchInput"
/>
</div>
<div className={styles.filterButton}>
<Button size="medium" onClick={clearFilter}>
Clear
</Button>
</div>
<button
type="button"
className={styles.clearButton}
onClick={clearFilter}
>
Clear all
</button>
<div className={styles.filterRight}>
<SortbySelector
filterOptions={SortByOptions}
@ -372,6 +357,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
placeHolder="Sort By"
sortByDescending={sortByDescending}
sortByButton={sortByButton}
value={sortByState}
/>
</div>
</div>
@ -379,7 +365,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
{renderItems(
isLoading,
totalCount,
filteredEnvironments.map((env) => (
environments.map((env) => (
<EnvironmentItem
key={env.Id}
environment={env}

@ -1,5 +1,6 @@
import { components, OptionProps } from 'react-select';
import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
import { Select } from '@/portainer/components/form-components/ReactSelect';
import { Filter } from '@/portainer/home/types';
@ -42,3 +43,33 @@ export function HomepageFilter({
/>
);
}
export function useHomePageFilter<T>(
key: string,
defaultValue: T
): [T, (value: T) => void] {
const filterKey = keyBuilder(key);
const [storageValue, setStorageValue] = useLocalStorage(
filterKey,
JSON.stringify(defaultValue),
sessionStorage
);
const value = jsonParse(storageValue, defaultValue);
return [value, setValue];
function setValue(value?: T) {
setStorageValue(JSON.stringify(value));
}
}
function keyBuilder(key: string) {
return `datatable_home_filter_type_${key}`;
}
function jsonParse<T>(value: string, defaultValue: T): T {
try {
return JSON.parse(value);
} catch (e) {
return defaultValue;
}
}

Loading…
Cancel
Save