Move Logs to Troubleshooting tab

frontend/src/metabase/admin/routes.jsx

@@ -33,6 +33,7 @@ import TasksApp from "metabase/admin/tasks/containers/TasksApp";
 import TaskModal from "metabase/admin/tasks/containers/TaskModal";
 import JobInfoApp from "metabase/admin/tasks/containers/JobInfoApp";
 import JobTriggersModal from "metabase/admin/tasks/containers/JobTriggersModal";
+import Logs from "metabase/admin/tasks/containers/Logs";
 
 // People
 import PeopleListingApp from "metabase/admin/people/containers/PeopleListingApp.jsx";
@@ -119,6 +120,7 @@ const getRoutes = (store, IsAdmin) => (
           modalProps={{ wide: true }}
         />
       </Route>
+      <Route path="logs" component={Logs} />
     </Route>
 
     {/* SETTINGS */}

frontend/src/metabase/components/Logs.jsx → frontend/src/metabase/admin/tasks/containers/Logs.jsx

@@ -3,13 +3,31 @@ import ReactDOM from "react-dom";
 
 import { UtilApi } from "metabase/services";
 
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 
 import reactAnsiStyle from "react-ansi-style";
 import "react-ansi-style/inject-css";
 
 import _ from "underscore";
 
+import { addCSSRule } from "metabase/lib/dom";
+import colors from "metabase/lib/colors";
+
+const ANSI_COLORS = {
+  black: colors["text-black"],
+  white: colors["text-white"],
+  gray: colors["text-medium"],
+  red: colors["saturated-red"],
+  green: colors["saturated-green"],
+  yellow: colors["saturated-yellow"],
+  blue: colors["saturated-blue"],
+  magenta: colors["saturated-purple"],
+  cyan: "cyan",
+};
+for (const [name, color] of Object.entries(ANSI_COLORS)) {
+  addCSSRule(`.react-ansi-style-${name}`, `color: ${color} !important`);
+}
+
 export default class Logs extends Component {
   constructor() {
     super();
@@ -67,12 +85,12 @@ export default class Logs extends Component {
       <LoadingAndErrorWrapper loading={!logs || logs.length === 0}>
         {() => (
           <div
+            className="rounded bordered bg-light"
             style={{
-              backgroundColor: "black",
-              fontFamily: "monospace",
+              fontFamily: '"Lucida Console", Monaco, monospace',
               fontSize: "14px",
               whiteSpace: "pre-line",
-              padding: "0.5em",
+              padding: "1em",
             }}
           >
             {reactAnsiStyle(React, logs.join("\n"))}

frontend/src/metabase/admin/tasks/containers/TroubleshootingApp.jsx

@@ -30,6 +30,10 @@ export default class TroubleshootingApp extends Component {
               name={t`Jobs`}
               path="/admin/troubleshooting/jobs"
             />
+            <LeftNavPaneItem
+              name={t`Logs`}
+              path="/admin/troubleshooting/logs"
+            />
           </LeftNavPane>
         }
       >

frontend/src/metabase/nav/components/ProfileLink.jsx

@@ -9,7 +9,6 @@ import { capitalize } from "metabase/lib/formatting";
 import MetabaseSettings from "metabase/lib/settings";
 import * as Urls from "metabase/lib/urls";
 import Modal from "metabase/components/Modal";
-import Logs from "metabase/components/Logs";
 
 import LogoIcon from "metabase/components/LogoIcon";
 import EntityMenu from "metabase/components/EntityMenu";
@@ -55,14 +54,6 @@ export default class ProfileLink extends Component {
           }`,
         },
       ]),
-      ...(admin && [
-        {
-          title: t`Logs`,
-          icon: null,
-          action: () => this.openModal("logs"),
-          event: `Navbar;Profile Dropdown;Debugging ${tag}`,
-        },
-      ]),
       {
         title: t`Help`,
         icon: null,
@@ -135,10 +126,6 @@ export default class ProfileLink extends Component {
               <span>{t`and is built with care in San Francisco, CA`}</span>
             </div>
           </Modal>
-        ) : modalOpen === "logs" ? (
-          <Modal wide onClose={this.closeModal}>
-            <Logs onClose={this.closeModal} />
-          </Modal>
         ) : null}
       </Box>
     );