feat(settings): basic log api and ui

fix sct#272

overseerr-api.yml

@@ -1419,6 +1419,41 @@ paths:
                     nextExecutionTime:
                       type: string
                       example: '2020-09-02T05:02:23.000Z'
+  /settings/logs:
+    get:
+      summary: Returns logs
+      description: Returns list of all log items and details
+      tags:
+        - settings
+      parameters:
+        - in: query
+          name: rows
+          schema:
+            type: number
+            example: 1000
+            default: 1000
+      responses:
+        '200':
+          description: Server log returned
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    label:
+                      type: string
+                      example: SERVER
+                    level:
+                      type: string
+                      example: info
+                    message:
+                      type: string
+                      example: Server ready on port 3000
+                    timestamp:
+                      type: string
+                      example: 2020-12-15T16:20:00.069Z
   /settings/notifications/email:
     get:
       summary: Return current email notification settings

server/logger.ts

@@ -16,13 +16,18 @@ const hformat = winston.format.printf(
 const logger = winston.createLogger({
   level: process.env.LOG_LEVEL || 'debug',
   format: winston.format.combine(
-    winston.format.colorize(),
-    winston.format.splat(),
     winston.format.timestamp(),
-    hformat
+    winston.format.json()
   ),
   transports: [
-    new winston.transports.Console(),
+    new winston.transports.Console({
+      format: winston.format.combine(
+        winston.format.colorize(),
+        winston.format.splat(),
+        winston.format.timestamp(),
+        hformat
+      ),
+    }),
     new winston.transports.File({
       filename: path.join(__dirname, '../config/logs/overseerr.log'),
     }),

server/routes/settings.ts

@@ -43,7 +43,7 @@ settingsRoutes.post('/main', (req, res) => {
   return res.status(200).json(settings.main);
 });
 
-settingsRoutes.get('/plex', (_req, res) => {
+settingsRoutes.get('/plex', (req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.plex);
@@ -134,7 +134,7 @@ settingsRoutes.get('/plex/sync', (req, res) => {
   return res.status(200).json(jobPlexFullSync.status());
 });
 
-settingsRoutes.get('/radarr', (_req, res) => {
+settingsRoutes.get('/radarr', (req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.radarr);
@@ -275,7 +275,7 @@ settingsRoutes.delete<{ id: string }>('/radarr/:id', (req, res) => {
   return res.status(200).json(removed[0]);
 });
 
-settingsRoutes.get('/sonarr', (_req, res) => {
+settingsRoutes.get('/sonarr', (req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.sonarr);
@@ -386,7 +386,7 @@ settingsRoutes.delete<{ id: string }>('/sonarr/:id', (req, res) => {
   return res.status(200).json(removed[0]);
 });
 
-settingsRoutes.get('/jobs', (_req, res) => {
+settingsRoutes.get('/jobs', (req, res) => {
   return res.status(200).json(
     scheduledJobs.map((job) => ({
       name: job.name,
@@ -395,10 +395,24 @@ settingsRoutes.get('/jobs', (_req, res) => {
   );
 });
 
+settingsRoutes.get('/logs', (req, res) => {
+  const options = {
+    rows: Number(req.query.rows),
+    fields: null,
+  };
+
+  return logger.query(options, (err, results) => {
+    if (err) {
+      return res.status(500).json(err);
+    }
+    return res.status(200).json(results.file);
+  });
+});
+
 settingsRoutes.get(
   '/initialize',
   isAuthenticated(Permission.ADMIN),
-  (_req, res) => {
+  (req, res) => {
     const settings = getSettings();
 
     settings.public.initialized = true;
@@ -408,7 +422,7 @@ settingsRoutes.get(
   }
 );
 
-settingsRoutes.get('/notifications/discord', (_req, res) => {
+settingsRoutes.get('/notifications/discord', (req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.notifications.agents.discord);
@@ -423,7 +437,7 @@ settingsRoutes.post('/notifications/discord', (req, res) => {
   res.status(200).json(settings.notifications.agents.discord);
 });
 
-settingsRoutes.get('/notifications/email', (_req, res) => {
+settingsRoutes.get('/notifications/email', (req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.notifications.agents.email);

src/components/Settings/SettingsLogs/index.tsx

@@ -1,14 +1,72 @@
 import React from 'react';
+import useSWR from 'swr';
+import Error from '../../../pages/_error';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import {
+  FormattedDate,
+  FormattedTime,
+  useIntl,
+  defineMessages,
+} from 'react-intl';
 
-// We will localize this file when the complete version is released.
+const messages = defineMessages({
+  logs: 'Logs',
+  logsDescription:
+    'You can access your logs directly in stdout (container logs) or looking in /app/config/logs/overseerr.logs',
+});
 
 const SettingsLogs: React.FC = () => {
+  const intl = useIntl();
+  const { data, error } = useSWR('/api/v1/settings/logs');
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <LoadingSpinner />;
+  }
+
   return (
     <>
-      <div className="leading-loose text-gray-300 text-sm">
-        Logs page is still being built. For now, you can access your logs
-        directly in <code>stdout</code> (container logs) or looking in{' '}
-        <code>/app/config/logs/overseerr.logs</code>
+      <div>
+        <h3 className="text-lg leading-6 font-medium text-gray-200">
+          {intl.formatMessage(messages.logs)}
+        </h3>
+        <p className="text-sm leading-5 text-gray-500">
+          {intl.formatMessage(messages.logsDescription)}
+        </p>
+
+        <div className="mt-4 text-sm">
+          {data?.map((row, index) => (
+            <div key={`log-list-${index}`} className="space-x-2 text-gray-300">
+              <span className="inline">
+                <FormattedDate
+                  value={row.timestamp}
+                  year="numeric"
+                  month="short"
+                  day="2-digit"
+                />
+                &nbsp;
+                <FormattedTime
+                  value={row.timestamp}
+                  hour="numeric"
+                  minute="numeric"
+                  second="numeric"
+                  hour12={false}
+                />
+              </span>
+              <span className="inline">
+                [{row.level}][{row.label}]:
+              </span>
+              <span className="inline">{row.message}</span>
+            </div>
+          ))}
+        </div>
       </div>
     </>
   );