finish the work

porter-dev · Sep 20, 2023 · e3766ad · e3766ad
1 parent c13af46
commit e3766ad
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 45 deletions.
diff --git a/dashboard/src/components/OldTable.tsx b/dashboard/src/components/OldTable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import {
   Column,
@@ -79,6 +79,7 @@ const Table: React.FC<TableProps> = ({
   onRefresh,
   isRefreshing = false,
 }) => {
+  const [currentPageIndex, setCurrentPageIndex] = useState<number>(0);
   const {
     getTableProps,
     getTableBodyProps,
@@ -102,6 +103,10 @@ const Table: React.FC<TableProps> = ({
     {
       columns: columnsData,
       data,
+      initialState: {
+        pageIndex: currentPageIndex,
+      },
+      autoResetPage: false,
     },
     useGlobalFilter,
     usePagination
@@ -233,15 +238,21 @@ const Table: React.FC<TableProps> = ({
           <PaginationActionsWrapper>
             <PaginationAction
               disabled={!canPreviousPage}
-              onClick={previousPage}
+              onClick={() => {
+                previousPage();
+                setCurrentPageIndex(currentPageIndex - 1);
+              }}
               type={"button"}
             >
               {"<"}
             </PaginationAction>
             <PageCounter>
-              {pageIndex + 1} of {pageCount}
+              {currentPageIndex + 1} of {pageCount}
             </PageCounter>
-            <PaginationAction disabled={!canNextPage} onClick={nextPage} type={"button"}>
+            <PaginationAction disabled={!canNextPage} onClick={() => {
+              nextPage();
+              setCurrentPageIndex(currentPageIndex + 1);
+            }} type={"button"}>
               {">"}
             </PaginationAction>
           </PaginationActionsWrapper>

diff --git a/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx b/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx
@@ -327,8 +327,6 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
               ]
               : []),
             { label: "Settings", value: "settings" },
-            { label: "Jobs", value: "job-history" },
-
           ]}
           currentTab={currentTab}
           setCurrentTab={(tab) => {

diff --git a/dashboard/src/main/home/app-dashboard/app-view/tabs/Overview.tsx b/dashboard/src/main/home/app-dashboard/app-view/tabs/Overview.tsx
@@ -21,7 +21,7 @@ const Overview: React.FC = () => {
   const { serviceVersionStatus } = useAppStatus({
     projectId,
     clusterId,
-    serviceNames: Object.keys(latestProto.services).filter(name => latestProto.services[name].config.case !== "jobConfig"),
+    serviceNames: Object.keys(latestProto.services),
     deploymentTargetId,
     appName: latestProto.name,
   });

diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/jobs/JobRunDetails.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/jobs/JobRunDetails.tsx
@@ -14,6 +14,7 @@ import { AppearingView } from "../../app-view/tabs/activity-feed/events/focus-vi
 import { getDuration } from "./utils";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import dayjs from "dayjs";
 
 type Props = {
     jobRun: JobRun;
@@ -22,10 +23,9 @@ type Props = {
 const JobRunDetails: React.FC<Props> = ({
     jobRun,
 }) => {
-    const { projectId, clusterId, latestProto, deploymentTargetId, latestRevision } = useLatestRevision();
+    const { projectId, clusterId, latestProto, deploymentTargetId } = useLatestRevision();
 
     const appName = latestProto.name
-    const serviceNames = [jobRun.jobName ?? "all"]
 
     const renderHeaderText = () => {
         return match(jobRun)
@@ -66,10 +66,14 @@ const JobRunDetails: React.FC<Props> = ({
                 projectId={projectId}
                 clusterId={clusterId}
                 appName={appName}
-                serviceNames={serviceNames}
+                serviceNames={[jobRun.jobName ?? "all"]}
                 deploymentTargetId={deploymentTargetId}
                 appRevisionId={jobRun.metadata.labels["porter.run/app-revision-id"]}
                 logFilterNames={["service_name"]}
+                timeRange={{
+                    startTime: dayjs(jobRun.status.startTime ?? jobRun.metadata.creationTimestamp).subtract(30, 'second'),
+                    endTime: jobRun.status.completionTime != null ? dayjs(jobRun.status.completionTime).add(30, 'second') : undefined,
+                }}
             />
         </>
     );

diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/logs/Logs.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/logs/Logs.tsx
@@ -192,6 +192,7 @@ const Logs: React.FC<Props> = ({
         setDate: selectedDate,
         appRevisionId,
         filterPredeploy,
+        timeRange,
     });
 
     useEffect(() => {
@@ -293,7 +294,7 @@ const Logs: React.FC<Props> = ({
                             setSelectedDate={setSelectedDateIfUndefined}
                         />
                         <LogQueryModeSelectionToggle
-                            selectedDate={selectedDate}
+                            selectedDate={selectedDate ?? timeRange?.endTime?.toDate()}
                             setSelectedDate={setSelectedDate}
                             resetSearch={resetSearch}
                         />
@@ -308,7 +309,7 @@ const Logs: React.FC<Props> = ({
                         <Spacer inline width="10px" />
                         <ScrollButton
                             onClick={() => {
-                                refresh();
+                                refresh({ isLive: selectedDate == null && timeRange?.endTime == null });
                             }}
                         >
                             <i className="material-icons">autorenew</i>

diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/logs/utils.ts b/dashboard/src/main/home/app-dashboard/validate-apply/logs/utils.ts
@@ -77,7 +77,7 @@ export const useLogs = ({
   filterPredeploy: boolean,
 }
 ) => {
-  const isLive = !setDate;
+  const [isLive, setIsLive] = useState<boolean>(!setDate && (timeRange?.startTime == null && timeRange?.endTime == null));
   const logsBufferRef = useRef<PorterLog[]>([]);
   const [logs, setLogs] = useState<PorterLog[]>([]);
   const [paginationInfo, setPaginationInfo] = useState<PaginationInfo>({
@@ -324,7 +324,7 @@ export const useLogs = ({
     }
   };
 
-  const refresh = async () => {
+  const refresh = async ({ isLive }: { isLive: boolean }) => {
     setLoading(true);
     setLogs([]);
     flushLogsBuffer(true);
@@ -358,7 +358,6 @@ export const useLogs = ({
 
     if (isLive) {
       setupWebsocket(websocketKey);
-
     }
   };
 
@@ -449,8 +448,20 @@ export const useLogs = ({
   }, []);
 
   useEffect(() => {
-    refresh();
-  }, [appName, serviceName, deploymentTargetId, searchParam, setDate, selectedFilterValues]);
+    // if a complete time range is not given, then we are live
+    const isLive = !setDate && (timeRange?.startTime == null || timeRange?.endTime == null);
+    refresh({ isLive });
+    setIsLive(isLive);
+  }, [
+    appName,
+    serviceName,
+    deploymentTargetId,
+    searchParam,
+    setDate,
+    JSON.stringify(selectedFilterValues),
+    JSON.stringify(timeRange?.endTime),
+    filterPredeploy
+  ]);
 
   useEffect(() => {
     // if the streaming is no longer live, close all websockets

diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceContainer.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceContainer.tsx
@@ -238,6 +238,8 @@ const ServiceContainer: React.FC<ServiceProps> = ({
       </AnimateHeight>
       {status && (
         <ServiceStatusFooter
+          serviceName={service.name.value}
+          isJob={service.config.type === "job"}
           status={status}
         />
       )}

diff --git a/...oard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceStatusFooter.tsx b/...oard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceStatusFooter.tsx
@@ -11,44 +11,50 @@ import _ from "lodash";
 import Link from "components/porter/Link";
 import { PorterAppVersionStatus } from "lib/hooks/useAppStatus";
 import { match } from "ts-pattern";
+import { useLatestRevision } from "../../app-view/LatestRevisionContext";
 
 interface ServiceStatusFooterProps {
+    serviceName: string;
     status: PorterAppVersionStatus[];
+    isJob: boolean,
 }
 const ServiceStatusFooter: React.FC<ServiceStatusFooterProps> = ({
+    serviceName,
     status,
+    isJob
 }) => {
     const [expanded, setExpanded] = useState<boolean>(false);
+    const { latestProto } = useLatestRevision();
     const [height, setHeight] = useState<Height>(0);
 
-    // if (service.type === "job") {
-    //     return (
-    //         <StyledStatusFooter>
-    //             {service.type === "job" && (
-    //                 <Container row>
-    //                     {/*
-    //         <Mi className="material-icons">check</Mi>
-    //         <Text color="helper">
-    //           Last run succeeded at 12:39 PM on 4/13/23
-    //         </Text>
-    //         */}
-    //                     <Link to={`/apps/${chart.name}/job-history?service=${service.name}`}>
-    //                         <Button
-    //                             onClick={() => { }}
-    //                             height="30px"
-    //                             width="87px"
-    //                             color="#ffffff11"
-    //                             withBorder
-    //                         >
-    //                             <I className="material-icons">open_in_new</I>
-    //                             History
-    //                         </Button>
-    //                     </Link>
-    //                 </Container>
-    //             )}
-    //         </StyledStatusFooter>
-    //     );
-    // }
+    if (isJob) {
+        return (
+            <StyledStatusFooter>
+
+                <Container row>
+                    {/*
+            <Mi className="material-icons">check</Mi>
+            <Text color="helper">
+              Last run succeeded at 12:39 PM on 4/13/23
+            </Text>
+            */}
+                    <Link to={`/apps/${latestProto.name}/job-history?service=${serviceName}`}>
+                        <Button
+                            onClick={() => { }}
+                            height="30px"
+                            width="87px"
+                            color="#ffffff11"
+                            withBorder
+                        >
+                            <I className="material-icons">open_in_new</I>
+                            History
+                        </Button>
+                    </Link>
+                </Container>
+
+            </StyledStatusFooter>
+        );
+    }
 
     return (
         <>