diff --git a/frontend/src/lib/console/logfeed.tsx b/frontend/src/lib/console/logfeed.tsx index 1ce7e25c..ca21a866 100644 --- a/frontend/src/lib/console/logfeed.tsx +++ b/frontend/src/lib/console/logfeed.tsx @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { useQuery, useSubscription } from '@apollo/client'; +import { useQuery } from '@apollo/client'; import { format, toZonedTime } from 'date-fns-tz'; import { stripAnsi } from 'fancy-ansi'; import { AnsiHtml } from 'fancy-ansi/react'; @@ -842,7 +842,7 @@ const LogFeedRecordFetcherImpl: React.ForwardRefRenderFunction(defaultFollowAfter); + const followAfterRef = useRef(defaultFollowAfter); const upgradeRecord = (record: GraphQLLogRecord) => ({ ...record, node, pod, container }); @@ -863,22 +863,29 @@ const LogFeedRecordFetcherImpl: React.ForwardRefRenderFunction { - if (!data?.podLogFollow) return; - const record = upgradeRecord(data.podLogFollow); - - // update folowAfter - setFollowAfter(record.timestamp); - - // execute callback - onFollowData(record); - }, - }); + useEffect(() => { + if (!isFollow) return; + return tail.subscribeToMore({ + document: ops.FOLLOW_CONTAINER_LOG, + variables: { namespace, name, container, after: followAfterRef.current }, + updateQuery: (prev, { subscriptionData }) => { + const { data: { podLogFollow: data } } = subscriptionData; + if (data) { + const record = upgradeRecord(data); + + // update followAfter + followAfterRef.current = record.timestamp; + + // execute callback + onFollowData(record); + } + return prev; + }, + onError: (err) => { + console.log(err); + }, + }); + }, [isFollow, tail.subscribeToMore]); const key = `${namespace}/${name}/${container}`; @@ -894,7 +901,7 @@ const LogFeedRecordFetcherImpl: React.ForwardRefRenderFunction { - setFollowAfter(undefined); + followAfterRef.current = undefined; }, }));