diff --git a/portal-ui/src/screens/Console/Logs/LogsMain.tsx b/portal-ui/src/screens/Console/Logs/LogsMain.tsx
index 14e7fad5f..df36b1130 100644
--- a/portal-ui/src/screens/Console/Logs/LogsMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogsMain.tsx
@@ -1,12 +1,29 @@
-import React, { Fragment, useState } from "react";
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React, { Fragment, useState, useEffect } from "react";
import PageHeader from "../Common/PageHeader/PageHeader";
-import { Grid } from "@material-ui/core";
+import { Grid, LinearProgress } from "@material-ui/core";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import Tab from "@material-ui/core/Tab";
import Tabs from "@material-ui/core/Tabs";
+import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
import ErrorLogs from "./ErrorLogs/ErrorLogs";
import LogsSearchMain from "./LogSearch/LogsSearchMain";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
+import api from "../../../common/api";
interface ILogsMainProps {
classes: any;
@@ -25,37 +42,59 @@ const styles = (theme: Theme) =>
const LogsMain = ({ classes }: ILogsMainProps) => {
const [currentTab, setCurrentTab] = useState(0);
+ const [loading, setLoading] = useState(true);
+ const [showLogSearch, setShowLogSearch] = useState(false);
+
+ useEffect(() => {
+ api
+ .invoke("GET", `/api/v1/logs/search?q=reqinfo&pageSize=10&pageNo=0`)
+ .then(() => {
+ setShowLogSearch(true);
+ setLoading(false);
+ })
+ .catch((err: any) => {
+ setLoading(false);
+ console.info("Log Search API not available.");
+ });
+ }, [loading]);
+
return (
-
- All Logs
-
- , newValue: number) => {
- setCurrentTab(newValue);
- }}
- indicatorColor="primary"
- textColor="primary"
- aria-label="cluster-tabs"
- >
-
-
-
-
-
- {currentTab === 0 && (
-
-
-
- )}
- {currentTab === 1 && (
-
-
-
+ {!loading ? (
+
+
+ All Logs
+
+ , newValue: number) => {
+ setCurrentTab(newValue);
+ }}
+ indicatorColor="primary"
+ textColor="primary"
+ aria-label="cluster-tabs"
+ >
+
+ {showLogSearch && }
+
+
+ {currentTab === 0 && (
+
+
+
+ )}
+ {currentTab === 1 && showLogSearch && (
+
+
+
+ )}
+
+
+ ) : (
+
)}