fixed polling for expend

Author: talhainvenxion

src/ui/layouts/pipelines/PipelineDetail/Runs/index.tsx

@@ -4,18 +4,20 @@ import { RunsTable } from '../../RunsTable';
 import { useService } from './useService';
 
 export const Runs: React.FC<{
+  isExpended?: any;
   fromAllruns?: boolean;
   pipelineId: TId;
   filter: any;
   runId?: any;
   pagination?: boolean;
-}> = ({ pipelineId, filter, pagination, runId, fromAllruns }) => {
+}> = ({ pipelineId, filter, pagination, runId, fromAllruns, isExpended }) => {
   const [sortBy, setSortBy] = useState('created');
   function getSorted(activeSorting: any, activeSortingDirection: any) {
     setSortBy(activeSortingDirection?.toLowerCase() + ':' + activeSorting);
     // console.log(activeSorting, activeSortingDirection, 'aaaaaaa');
   }
   const { fetching, runIds, runsPaginated } = useService({
+    isExpended,
     sortBy,
     pipelineId,
     filter,

src/ui/layouts/pipelines/PipelineDetail/Runs/useService.ts

@@ -21,7 +21,9 @@ export const useService = ({
   sortBy,
   filter,
   pipelineId,
+  isExpended,
 }: {
+  isExpended?: any;
   filter: {
     column: filterValue;
     type: filterValue;
@@ -38,7 +40,7 @@ export const useService = ({
   console.log(runsPaginated, 'runsPaginated');
   useEffect(() => {}, [runs]);
   useEffect(() => {
-    if (!isValidFilter) {
+    if (!isValidFilter && !isExpended) {
       const intervalId = setInterval(() => {
         //assign interval to a variable to clear it.
 

src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts

@@ -35,7 +35,9 @@ interface filterValue {
 export const useService = ({
   filter,
   sortBy,
+  isExpended,
 }: {
+  isExpended?: any;
   sortBy: string;
   filter: {
     column: filterValue;
@@ -48,9 +50,9 @@ export const useService = ({
   const runs = useSelector(runSelectors.myRuns);
   const selectedProject = useSelector(projectSelectors.selectedProject);
   const runsPaginated = useSelector(runSelectors.myRunsPaginated);
-  const isValidFilter = filter.map((f) => f.value).join('');
+  const isValidFilter = filter?.map((f) => f.value).join('');
   useEffect(() => {
-    if (!isValidFilter) {
+    if (!isValidFilter && !isExpended) {
       const intervalId = setInterval(() => {
         //assign interval to a variable to clear it.
         dispatch(

src/ui/layouts/pipelines/Pipelines/List/index.tsx

@@ -41,7 +41,7 @@ export const List: React.FC<Props> = ({
     activeSortingDirection,
     setActiveSortingDirection,
     setSelectedRunIds,
-  } = useService(filter);
+  } = useService({ filter, isExpended });
   const expendedRow = filteredPipelines.filter((item) => item.id === id);
 
   const headerCols = GetHeaderCols({

src/ui/layouts/pipelines/Pipelines/List/useService.ts

@@ -35,13 +35,17 @@ interface filterValue {
   type: string;
   value: string;
 }
-export const useService = (
+export const useService = ({
+  filter,
+  isExpended,
+}: {
+  isExpended?: any;
   filter: {
     column: filterValue;
     type: filterValue;
     value: string;
-  }[],
-): ServiceInterface => {
+  }[];
+}): ServiceInterface => {
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
     'created',
   );
@@ -61,14 +65,14 @@ export const useService = (
   const pipelinesPaginated = useSelector(
     pipelineSelectors.myPipelinesPaginated,
   );
-  const isValidFilter = filter.map((f) => f.value).join('');
+  const isValidFilter = filter?.map((f) => f.value).join('');
   const { dispatchPipelineData } = callActionForPipelinesForPagination();
   useEffect(() => {
     setFilteredPipelines(pipelines as any[]);
   }, [filter, pipelines]);
 
   useEffect(() => {
-    if (!isValidFilter) {
+    if (!isValidFilter && !isExpended) {
       const intervalId = setInterval(() => {
         const applySorting =
           activeSortingDirection?.toLowerCase() + ':' + activeSorting;

src/ui/layouts/pipelines/RunDetail/index.tsx

@@ -120,7 +120,7 @@ export const RunDetail: React.FC = () => {
         filter={[]}
         pagination={false}
         runId={runId}
-        // isExpended
+        isExpended
         pipelineId={pipelineId}
       ></Runs>
       {/* <Box style={boxStyle}>

src/ui/layouts/runs/RunDetail/index.tsx

@@ -98,6 +98,7 @@ export const RunDetail: React.FC = () => {
       breadcrumbs={breadcrumbs}
     >
       <Runs
+        isExpended
         filter={[]}
         pagination={false}
         runId={runId}

src/ui/layouts/stackComponents/RunDetail/index.tsx

@@ -102,7 +102,7 @@ export const RunDetail: React.FC = () => {
         filter={[]}
         pagination={false}
         runId={runId}
-        // isExpended
+        isExpended
         stackComponentId={stackComponentId}
       ></Runs>
       {/* <Box style={boxStyle}>

src/ui/layouts/stackComponents/StackDetail/Runs/index.tsx

@@ -5,17 +5,19 @@ import { useService } from './useService';
 // import { Pagination } from '../../../common/Pagination';
 
 export const Runs: React.FC<{
+  isExpended?: any;
   stackComponentId: TId;
   filter?: any;
   runId?: any;
   pagination?: boolean;
-}> = ({ stackComponentId, filter, pagination, runId }) => {
+}> = ({ stackComponentId, filter, pagination, runId, isExpended }) => {
   const [sortBy, setSortBy] = useState('created');
   function getSorted(activeSorting: any, activeSortingDirection: any) {
     setSortBy(activeSortingDirection?.toLowerCase() + ':' + activeSorting);
     // console.log(activeSorting, activeSortingDirection, 'aaaaaaa');
   }
   const { fetching, runIds, runsPaginated } = useService({
+    isExpended,
     stackComponentId,
     filter,
     sortBy,

src/ui/layouts/stackComponents/StackDetail/Runs/useService.ts

@@ -20,7 +20,9 @@ export const useService = ({
   sortBy,
   filter,
   stackComponentId,
+  isExpended,
 }: {
+  isExpended?: any;
   filter: {
     column: filterValue;
     type: filterValue;
@@ -35,10 +37,10 @@ export const useService = ({
     runSelectors.runsForStackComponentId(stackComponentId),
   );
   const runsPaginated = useSelector(runSelectors.myRunsPaginated);
-  const isValidFilter = filter.map((f) => f.value).join('');
+  const isValidFilter = filter?.map((f) => f.value).join('');
   useEffect(() => {}, [runs]);
   useEffect(() => {
-    if (!isValidFilter) {
+    if (!isValidFilter && !isExpended) {
       const intervalId = setInterval(() => {
         //assign interval to a variable to clear it.