fix(edge/stack): edge stack env table pagination and action [EE-6836] (…

…#11837)
portainer · May 20, 2024 · 659abe5 · 659abe5
1 parent 014a590
commit 659abe5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx
@@ -19,12 +19,12 @@ export function EnvironmentActions({ environment }: Props) {
   } = useCurrentStateAndParams();
 
   return (
-    <div className="space-x-2">
-      {environment.Snapshots.length > 0 && (
+    <div>
+      {environment.Snapshots.length > 0 && environment.Edge.AsyncMode && (
         <Link
           to="edge.browse.containers"
           params={{ environmentId: environment.Id, edgeStackId }}
-          className="!text-inherit hover:!no-underline"
+          className="hover:!no-underline"
           data-cy="browse-snapshot-link"
         >
           <Button

diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
@@ -9,14 +9,19 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { Datatable } from '@@/datatables';
-import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
 import { PortainerSelect } from '@@/form-components/PortainerSelect';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { useEdgeStack } from '../../queries/useEdgeStack';
 
 import { EdgeStackEnvironment } from './types';
 import { columns } from './columns';
 
+const tableKey = 'edge-stacks-environment';
+
+const settingsStore = createPersistedStore(tableKey);
+
 export function EnvironmentsDatatable() {
   const {
     params: { stackId },
@@ -40,7 +45,7 @@ export function EnvironmentsDatatable() {
     'status',
     (value) => (value ? parseInt(value, 10) : undefined)
   );
-  const tableState = useTableStateWithoutStorage('name');
+  const tableState = useTableState(settingsStore, tableKey);
   const environmentsQuery = useEnvironmentList({
     pageLimit: tableState.pageSize,
     page: page + 1,

diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
@@ -35,7 +35,8 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
   return (
     <>
       <Button
-        color="none"
+        className="p-0"
+        color="link"
         title="Retrieve logs"
         onClick={handleCollectLogs}
         data-cy="edge-stack-logs-collect-button"
@@ -48,11 +49,12 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         />
       </Button>
       <Button
-        color="none"
-        data-cy="edge-stack-logs-download-button"
+        className="p-0"
+        color="link"
         title="Download logs"
         disabled={status !== 'collected'}
         onClick={handleDownloadLogs}
+        data-cy="edge-stack-logs-download-button"
       >
         <Icon
           icon={clsx({
@@ -62,7 +64,8 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         />
       </Button>
       <Button
-        color="none"
+        className="p-0"
+        color="link"
         title="Delete logs"
         disabled={status !== 'collected'}
         onClick={handleDeleteLogs}