MM-57013 Added download button for downloading logs from server logs page in system console (#26389)

* added download system logs

* download all logs

* download all logs check-lint fix

* check lint fix

* download logs api

* download logs api working

* download logs working with error log

* linting issues and code cleanup

* CI check fix

* documented the api and logs from file with error handling

* test and final changes done

* final changes done

* Fix order of server-side translations

* Fix incorrect indentation of logs.yaml

---------

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

webapp/channels/src/components/admin_console/server_logs/logs.tsx

@@ -12,6 +12,9 @@ import type {
     LogServerNames,
 } from '@mattermost/types/admin';
 
+import {Client4} from 'mattermost-redux/client';
+
+import ExternalLink from 'components/external_link';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import LogList from './log_list';
@@ -144,16 +147,28 @@ export default class Logs extends React.PureComponent<Props, State> {
                         <FormattedMessage {...messages.bannerDesc}/>
                     </div>
                 </div>
-                <button
-                    type='submit'
-                    className='btn btn-primary'
-                    onClick={this.reloadPlain}
-                >
-                    <FormattedMessage
-                        id='admin.logs.ReloadLogs'
-                        defaultMessage='Reload Logs'
-                    />
-                </button>
+                <div className='banner-buttons'>
+                    <button
+                        type='submit'
+                        className='btn btn-primary'
+                        onClick={this.reloadPlain}
+                    >
+                        <FormattedMessage
+                            id='admin.logs.ReloadLogs'
+                            defaultMessage='Reload Logs'
+                        />
+                    </button>
+                    <ExternalLink
+                        location='download_logs'
+                        className='btn btn-primary'
+                        href={Client4.getUrl() + '/api/v4/logs/download'}
+                    >
+                        <FormattedMessage
+                            id='admin.logs.DownloadLogs'
+                            defaultMessage='Download Logs'
+                        />
+                    </ExternalLink>
+                </div>
                 <PlainLogList
                     logs={this.props.plainLogs}
                     nextPage={this.nextPage}
@@ -170,16 +185,28 @@ export default class Logs extends React.PureComponent<Props, State> {
                             <FormattedMessage {...messages.bannerDesc}/>
                         </div>
                     </div>
-                    <button
-                        type='submit'
-                        className='btn btn-primary'
-                        onClick={this.reload}
-                    >
-                        <FormattedMessage
-                            id='admin.logs.ReloadLogs'
-                            defaultMessage='Reload Logs'
-                        />
-                    </button>
+                    <div className='banner-buttons'>
+                        <button
+                            type='submit'
+                            className='btn btn-primary'
+                            onClick={this.reload}
+                        >
+                            <FormattedMessage
+                                id='admin.logs.ReloadLogs'
+                                defaultMessage='Reload Logs'
+                            />
+                        </button>
+                        <ExternalLink
+                            location='download_logs'
+                            className='btn btn-primary'
+                            href={Client4.getUrl() + '/api/v4/logs/download'}
+                        >
+                            <FormattedMessage
+                                id='admin.logs.DownloadLogs'
+                                defaultMessage='Download Logs'
+                            />
+                        </ExternalLink>
+                    </div>
                 </div>
                 <LogList
                     loading={this.state.loadingLogs}

webapp/channels/src/i18n/en.json

@@ -1455,6 +1455,7 @@
   "admin.logs.bannerDesc": "To look up users by User ID or Token ID, go to User Management > Users and paste the ID into the search filter.",
   "admin.logs.caller": "Caller",
   "admin.logs.Debug": "Debug",
+  "admin.logs.DownloadLogs": "Download Logs",
   "admin.logs.Error": "Error",
   "admin.logs.fullEvent": "Full log event",
   "admin.logs.Info": "Info",

webapp/channels/src/packages/mattermost-redux/src/action_types/admin.ts

@@ -20,6 +20,7 @@ export default keyMirror({
     DISABLE_PLUGIN_REQUEST: null,
 
     RECEIVED_LOGS: null,
+    RECEIVED_ALL_PLAIN_LOGS: null,
     RECEIVED_PLAIN_LOGS: null,
     RECEIVED_AUDITS: null,
     RECEIVED_CONFIG: null,

webapp/channels/src/packages/mattermost-redux/src/reducers/entities/admin.ts

@@ -654,7 +654,7 @@ export default combineReducers({
     // array of LogObjects each representing a log entry (JSON)
     logs,
 
-    // array of strings each representing a log entry (legacy)
+    // array of strings each representing a log entry (legacy) with pagination
     plainLogs,
 
     // object where every key is an audit id and has an object with audit details

webapp/channels/src/sass/routes/_admin-console.scss

@@ -580,6 +580,7 @@
 
     .logs-banner {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
     }