diff --git a/src/components/ResultsLimited/index.js b/src/components/ResultsLimited/index.js
index 4ee0babf..2f10a400 100644
--- a/src/components/ResultsLimited/index.js
+++ b/src/components/ResultsLimited/index.js
@@ -10,11 +10,6 @@ const options = [
{ value: '100', label: '100' },
{ value: '-1', label: 'all' },
];
-const handleChange = values => {
- // window.location.href = window.location.href.split('?')[0] + '?limit=' + values.value;
-
- history.pushState(null,"", window.location.href.split('?')[0] + '?limit=' + values.value);
-};
const customStyles = {
menu: (provided, state) => ({
...provided,
@@ -29,7 +24,15 @@ const customStyles = {
/**
* Button that deploys the latest environment.
*/
-const ResultsLimited = ({ limit, message, disableHandler}) => {
+const ResultsLimited = ({ limit, changeLimit, message, disableHandler }) => {
+ const handleChange = values => {
+ const limitValueParsed = parseInt(values.value);
+ if (!Number.isNaN(limitValueParsed) && changeLimit) {
+ history.pushState(null, '', window.location.href.split('?')[0] + '?limit=' + values.value);
+ changeLimit(limitValueParsed === -1 ? null : limitValueParsed);
+ }
+ };
+
return (
// if the number of results = the limit, then display a message that the results are limited
// if the number of results is less than the limit, the message won't be displayed
@@ -54,6 +57,7 @@ const ResultsLimited = ({ limit, message, disableHandler}) => {
onChange={!disableHandler ? handleChange : () => {}}
options={options}
required
+ menuPlacement="top"
/>
}
diff --git a/src/pages/backups.js b/src/pages/backups.js
index 058aa264..e1932671 100644
--- a/src/pages/backups.js
+++ b/src/pages/backups.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
import getConfig from 'next/config';
import Head from 'next/head';
@@ -27,23 +27,12 @@ const { publicRuntimeConfig } = getConfig();
const envLimit = parseInt(publicRuntimeConfig.LAGOON_UI_BACKUPS_LIMIT, 10);
const customMessage = publicRuntimeConfig.LAGOON_UI_BACKUPS_LIMIT_MESSAGE;
-let urlResultLimit = envLimit;
-if (typeof window !== 'undefined') {
- let search = window.location.search;
- let params = new URLSearchParams(search);
- let limit = params.get('limit');
- if (limit) {
- if (parseInt(limit.trim(), 10)) {
- urlResultLimit = parseInt(limit.trim(), 10);
- }
- }
-}
-const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
-
/**
* Displays the backups page, given the name of an openshift project.
*/
export const PageBackups = ({ router }) => {
+ const [resultLimit, setResultLimit] = useState(null);
+
const { continueTour } = useTourContext();
const { data, error, loading, subscribeToMore } = useQuery(EnvironmentWithBackupsQuery, {
variables: {
@@ -52,6 +41,21 @@ export const PageBackups = ({ router }) => {
},
});
+ useEffect(() => {
+ let urlResultLimit = envLimit;
+ if (typeof window !== 'undefined') {
+ let search = window.location.search;
+ let params = new URLSearchParams(search);
+ let limit = params.get('limit');
+ if (limit) {
+ if (parseInt(limit.trim(), 10)) {
+ urlResultLimit = parseInt(limit.trim(), 10);
+ }
+ }
+ }
+ setResultLimit(urlResultLimit === -1 ? null : urlResultLimit);
+ }, []);
+
useEffect(() => {
if (!loading && data?.environment?.backups?.length) {
continueTour();
@@ -181,6 +185,7 @@ export const PageBackups = ({ router }) => {
diff --git a/src/pages/deployments.js b/src/pages/deployments.js
index a2c58dbe..4b780716 100644
--- a/src/pages/deployments.js
+++ b/src/pages/deployments.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
import Skeleton from 'react-loading-skeleton';
import getConfig from 'next/config';
@@ -28,24 +28,14 @@ const { publicRuntimeConfig } = getConfig();
const envLimit = parseInt(publicRuntimeConfig.LAGOON_UI_DEPLOYMENTS_LIMIT, 10);
const customMessage = publicRuntimeConfig.LAGOON_UI_DEPLOYMENTS_LIMIT_MESSAGE;
-let urlResultLimit = envLimit;
-if (typeof window !== 'undefined') {
- let search = window.location.search;
- let params = new URLSearchParams(search);
- let limit = params.get('limit');
- if (limit) {
- if (parseInt(limit.trim(), 10)) {
- urlResultLimit = parseInt(limit.trim(), 10);
- }
- }
-}
-const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
-
/**
* Displays the deployments page, given the openshift project name.
*/
export const PageDeployments = ({ router }) => {
const { continueTour } = useTourContext();
+
+ const [resultLimit, setResultLimit] = useState(null);
+
const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithDeploymentsQuery, {
variables: {
openshiftProjectName: router.query.openshiftProjectName,
@@ -53,7 +43,23 @@ export const PageDeployments = ({ router }) => {
},
});
- const handleRefetch = async () => await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit, });
+ const handleRefetch = async () =>
+ await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit });
+
+ useEffect(() => {
+ let urlResultLimit = envLimit;
+ if (typeof window !== 'undefined') {
+ let search = window.location.search;
+ let params = new URLSearchParams(search);
+ let limit = params.get('limit');
+ if (limit) {
+ if (parseInt(limit.trim(), 10)) {
+ urlResultLimit = parseInt(limit.trim(), 10);
+ }
+ }
+ }
+ setResultLimit(urlResultLimit === -1 ? null : urlResultLimit);
+ }, []);
useEffect(() => {
if (!loading && data?.environment) {
@@ -170,6 +176,7 @@ export const PageDeployments = ({ router }) => {
/>
diff --git a/src/pages/tasks.js b/src/pages/tasks.js
index 05db88d7..32699d63 100644
--- a/src/pages/tasks.js
+++ b/src/pages/tasks.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
import Skeleton from 'react-loading-skeleton';
import getConfig from 'next/config';
@@ -28,25 +28,12 @@ const { publicRuntimeConfig } = getConfig();
const envLimit = parseInt(publicRuntimeConfig.LAGOON_UI_TASKS_LIMIT, 10);
const customMessage = publicRuntimeConfig.AGOON_UI_TASKS_LIMIT_MESSAGE;
-let urlResultLimit = envLimit;
-if (typeof window !== 'undefined') {
- let search = window.location.search;
- let params = new URLSearchParams(search);
- let limit = params.get('limit');
- if (limit) {
- if (parseInt(limit.trim(), 10)) {
- urlResultLimit = parseInt(limit.trim(), 10);
- }
- if (limit == 'all') {
- urlResultLimit = -1;
- }
- }
-}
-const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
/**
* Displays the tasks page, given the openshift project name.
*/
export const PageTasks = ({ router, renderAddTasks }) => {
+ const [resultLimit, setResultLimit] = useState(null);
+
const { continueTour } = useTourContext();
const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithTasksQuery, {
variables: {
@@ -55,7 +42,26 @@ export const PageTasks = ({ router, renderAddTasks }) => {
},
});
- const handleRefetch = async () => await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit, });
+ const handleRefetch = async () =>
+ await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit });
+
+ useEffect(() => {
+ let urlResultLimit = envLimit;
+ if (typeof window !== 'undefined') {
+ let search = window.location.search;
+ let params = new URLSearchParams(search);
+ let limit = params.get('limit');
+ if (limit) {
+ if (parseInt(limit.trim(), 10)) {
+ urlResultLimit = parseInt(limit.trim(), 10);
+ }
+ if (limit == 'all') {
+ urlResultLimit = -1;
+ }
+ }
+ }
+ setResultLimit(urlResultLimit === -1 ? null : urlResultLimit);
+ }, []);
useEffect(() => {
if (!loading && data?.environment?.tasks.length) {
@@ -76,27 +82,23 @@ export const PageTasks = ({ router, renderAddTasks }) => {
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+