diff --git a/dashboard/src/components/OldTable.tsx b/dashboard/src/components/OldTable.tsx index fccacadcb6..e2418c69a1 100644 --- 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 = ({ onRefresh, isRefreshing = false, }) => { + const [currentPageIndex, setCurrentPageIndex] = useState(0); const { getTableProps, getTableBodyProps, @@ -102,6 +103,10 @@ const Table: React.FC = ({ { columns: columnsData, data, + initialState: { + pageIndex: currentPageIndex, + }, + autoResetPage: false, }, useGlobalFilter, usePagination @@ -233,15 +238,21 @@ const Table: React.FC = ({ { + previousPage(); + setCurrentPageIndex(currentPageIndex - 1); + }} type={"button"} > {"<"} - {pageIndex + 1} of {pageCount} + {currentPageIndex + 1} of {pageCount} - + { + nextPage(); + setCurrentPageIndex(currentPageIndex + 1); + }} type={"button"}> {">"} diff --git a/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx b/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx index 51fa4b74cd..50f44aa624 100644 --- 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 = ({ 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 index 4f7dbae317..e6e48eb49c 100644 --- 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 index de51314484..efd402e21f 100644 --- 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 = ({ 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 = ({ 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 index 80ba2f112c..4722165d51 100644 --- 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 = ({ setDate: selectedDate, appRevisionId, filterPredeploy, + timeRange, }); useEffect(() => { @@ -293,7 +294,7 @@ const Logs: React.FC = ({ setSelectedDate={setSelectedDateIfUndefined} /> @@ -308,7 +309,7 @@ const Logs: React.FC = ({ { - refresh(); + refresh({ isLive: selectedDate == null && timeRange?.endTime == null }); }} > autorenew 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 index df4e846398..46efdae648 100644 --- 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(!setDate && (timeRange?.startTime == null && timeRange?.endTime == null)); const logsBufferRef = useRef([]); const [logs, setLogs] = useState([]); const [paginationInfo, setPaginationInfo] = useState({ @@ -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 index 62d8d7a11a..22ac76a3dc 100644 --- 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 = ({ {status && ( )} diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceStatusFooter.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceStatusFooter.tsx index 1c7e2a5e50..ea9ef75122 100644 --- a/dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceStatusFooter.tsx +++ b/dashboard/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 = ({ + serviceName, status, + isJob }) => { const [expanded, setExpanded] = useState(false); + const { latestProto } = useLatestRevision(); const [height, setHeight] = useState(0); - // if (service.type === "job") { - // return ( - // - // {service.type === "job" && ( - // - // {/* - // check - // - // Last run succeeded at 12:39 PM on 4/13/23 - // - // */} - // - // - // - // - // )} - // - // ); - // } + if (isJob) { + return ( + + + + {/* + check + + Last run succeeded at 12:39 PM on 4/13/23 + + */} + + + + + + + ); + } return ( <>