Portainer
/
portainer
mirror of https://github.com/portainer/portainer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(home): remove margins from env list [EE-4868] (#8285)

pull/8294/head
Chaim Lev-Ari 2023-01-11 10:59:56 +02:00 committed by GitHub
parent 7793b98813
commit 4bdf30c038
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 102 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/react/components/PaginationControls/PaginationControls.tsx
View File

@ -1,3 +1,5 @@
import clsx from 'clsx';
import { ItemsPerPageSelector } from './ItemsPerPageSelector';
import { PageSelector } from './PageSelector';
@ -9,6 +11,7 @@ interface Props {
showAll?: boolean;
totalCount: number;
isPageInputVisible?: boolean;
className?: string;
}
export function PaginationControls({
@ -19,9 +22,10 @@ export function PaginationControls({
onPageChange,
totalCount,
isPageInputVisible,
className,
}: Props) {
return (
<div className="paginationControls">
<div className={clsx('paginationControls', className)}>
<div className="form-inline flex">
<ItemsPerPageSelector
value={pageLimit}

197
app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
View File

@ -140,110 +140,107 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
return (
<>
{totalAvailable === 0 && <NoEnvironmentsInfoPanel isAdmin={isAdmin} />}
<div className="row">
<div className="col-sm-12">
<TableContainer>
<div className="px-4">
<TableTitle
className="!px-0"
icon={HardDrive}
label="Environments"
description={
<div className="w-full text-sm text-gray-7">
Click on an environment to manage
</div>
}
>
<div className="flex gap-4">
<SearchBar
className="!bg-transparent !m-0"
value={searchBarValue}
onChange={setSearchBarValue}
placeholder="Search by name, group, tag, status, URL..."
data-cy="home-endpointsSearchInput"
/>
{isAdmin && (
<Button
onClick={onRefresh}
data-cy="home-refreshEndpointsButton"
size="medium"
color="light"
icon={RefreshCcw}
className="!m-0"
>
Refresh
</Button>
)}
<KubeconfigButton
environments={environments}
envQueryParams={queryWithSort}
/>
<AMTButton
environments={environments}
envQueryParams={queryWithSort}
/>
<TableContainer>
<div className="px-4">
<TableTitle
className="!px-0"
icon={HardDrive}
label="Environments"
description={
<div className="w-full text-sm text-gray-7">
Click on an environment to manage
</div>
}
>
<div className="flex gap-4">
<SearchBar
className="!bg-transparent !m-0"
value={searchBarValue}
onChange={setSearchBarValue}
placeholder="Search by name, group, tag, status, URL..."
data-cy="home-endpointsSearchInput"
/>
{isAdmin && (
<Button
onClick={onRefresh}
data-cy="home-refreshEndpointsButton"
size="medium"
color="light"
icon={RefreshCcw}
className="!m-0"
>
Refresh
</Button>
)}
<KubeconfigButton
environments={environments}
envQueryParams={queryWithSort}
/>
{updateAvailable && <UpdateBadge />}
</div>
</TableTitle>
<div className="-mt-3">
<EnvironmentListFilters
setPlatformTypes={setPlatformTypes}
platformTypes={platformTypes}
setConnectionTypes={setConnectionTypes}
connectionTypes={connectionTypes}
statusOnChange={statusOnChange}
statusState={statusState}
tagOnChange={tagOnChange}
tagState={tagState}
groupOnChange={groupOnChange}
groupState={groupState}
setAgentVersions={setAgentVersions}
agentVersions={agentVersions}
clearFilter={clearFilter}
sortOnchange={sortOnchange}
sortOnDescending={sortOnDescending}
sortByDescending={sortByDescending}
sortByButton={sortByButton}
sortByState={sortByState}
/>
</div>
<div
className="blocklist !p-0 mt-5 !space-y-2"
data-cy="home-endpointList"
>
{renderItems(
isLoading,
totalCount,
environments.map((env) => (
<EnvironmentItem
key={env.Id}
environment={env}
groupName={
groupsQuery.data?.find((g) => g.Id === env.GroupId)
?.Name
}
onClickBrowse={() => onClickBrowse(env)}
isActive={env.Id === currentEnvironmentId}
/>
))
)}
</div>
<TableFooter>
<PaginationControls
showAll={totalCount <= 100}
pageLimit={pageLimit}
page={page}
onPageChange={setPage}
totalCount={totalCount}
onPageLimitChange={setPageLimit}
/>
</TableFooter>
<AMTButton
environments={environments}
envQueryParams={queryWithSort}
/>
{updateAvailable && <UpdateBadge />}
</div>
</TableContainer>
</TableTitle>
<div className="-mt-3">
<EnvironmentListFilters
setPlatformTypes={setPlatformTypes}
platformTypes={platformTypes}
setConnectionTypes={setConnectionTypes}
connectionTypes={connectionTypes}
statusOnChange={statusOnChange}
statusState={statusState}
tagOnChange={tagOnChange}
tagState={tagState}
groupOnChange={groupOnChange}
groupState={groupState}
setAgentVersions={setAgentVersions}
agentVersions={agentVersions}
clearFilter={clearFilter}
sortOnchange={sortOnchange}
sortOnDescending={sortOnDescending}
sortByDescending={sortByDescending}
sortByButton={sortByButton}
sortByState={sortByState}
/>
</div>
<div
className="blocklist !p-0 mt-5 !space-y-2"
data-cy="home-endpointList"
>
{renderItems(
isLoading,
totalCount,
environments.map((env) => (
<EnvironmentItem
key={env.Id}
environment={env}
groupName={
groupsQuery.data?.find((g) => g.Id === env.GroupId)?.Name
}
onClickBrowse={() => onClickBrowse(env)}
isActive={env.Id === currentEnvironmentId}
/>
))
)}
</div>
<TableFooter>
<PaginationControls
className="!mr-0"
showAll={totalCount <= 100}
pageLimit={pageLimit}
page={page}
onPageChange={setPage}
totalCount={totalCount}
onPageLimitChange={setPageLimit}
/>
</TableFooter>
</div>
</div>
</TableContainer>
</>
);