MM-49984: Displaying active search backend in system console (#22721)

This will be shown in the system console to let users know
which search backend is active.

Implemented via adding an extra param in the ping response.

https://mattermost.atlassian.net/browse/MM-49984

```release-note
The database section in the system console now has an additional
read-only section which shows the active search backend in use.

This can be helpful to confirm which is the currently active
search engine when there are multiple of them configured.
```
---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.jsx.snap

@@ -353,6 +353,36 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
           </div>
         </div>
       </div>
+      <div
+        className="form-group"
+      >
+        <label
+          className="control-label col-sm-4"
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="Active Search Backend:"
+            id="admin.database.search_backend.title"
+          />
+        </label>
+        <div
+          className="col-sm-8"
+        >
+          <input
+            className="form-control"
+            disabled={true}
+            type="text"
+            value=""
+          />
+          <div
+            className="help-text"
+          >
+            <MemoizedFormattedMessage
+              defaultMessage="Shows the currently active backend used for search. Values can be none, database, elasticsearch, bleve etc."
+              id="admin.database.search_backend.help_text"
+            />
+          </div>
+        </div>
+      </div>
     </SettingsGroup>
     <div
       className="admin-console-save"

webapp/channels/src/components/admin_console/database_settings.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {recycleDatabaseConnection} from 'actions/admin_actions.jsx';
+import {recycleDatabaseConnection, ping} from 'actions/admin_actions';
 import * as Utils from 'utils/utils';
 import {t} from 'utils/i18n';
 
@@ -19,6 +19,15 @@ import TextSetting from './text_setting';
 import MigrationsTable from './database';
 
 export default class DatabaseSettings extends AdminSettings {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            ...this.state,
+            searchBackend: '',
+        };
+    }
+
     getConfigFromState = (config) => {
         // driverName and dataSource are read-only from the UI
 
@@ -34,6 +43,17 @@ export default class DatabaseSettings extends AdminSettings {
         return config;
     };
 
+    componentDidMount() {
+        this.getSearchBackend().then((searchBackend) => {
+            this.setState({searchBackend});
+        });
+    }
+
+    async getSearchBackend() {
+        const res = await ping()();
+        return res.ActiveSearchBackend;
+    }
+
     getStateFromConfig(config) {
         return {
             driverName: config.SqlSettings.DriverName,
@@ -368,6 +388,30 @@ export default class DatabaseSettings extends AdminSettings {
                         </div>
                     </div>
                 </div>
+                <div className='form-group'>
+                    <label
+                        className='control-label col-sm-4'
+                    >
+                        <FormattedMessage
+                            id='admin.database.search_backend.title'
+                            defaultMessage='Active Search Backend:'
+                        />
+                    </label>
+                    <div className='col-sm-8'>
+                        <input
+                            type='text'
+                            className='form-control'
+                            value={this.state.searchBackend}
+                            disabled={true}
+                        />
+                        <div className='help-text'>
+                            <FormattedMessage
+                                id='admin.database.search_backend.help_text'
+                                defaultMessage='Shows the currently active backend used for search. Values can be none, database, elasticsearch, bleve etc.'
+                            />
+                        </div>
+                    </div>
+                </div>
             </SettingsGroup>
         );
     };

webapp/channels/src/components/admin_console/database_settings.test.jsx

@@ -7,8 +7,14 @@ import {shallow} from 'enzyme';
 import DatabaseSettings from 'components/admin_console/database_settings.jsx';
 
 jest.mock('actions/admin_actions.jsx', () => {
+    const pingFn = () => {
+        return jest.fn(() => {
+            return {ActiveSearchBackend: 'none'};
+        });
+    };
     return {
         recycleDatabaseConnection: jest.fn(),
+        ping: pingFn,
     };
 });
 

webapp/channels/src/i18n/en.json

@@ -741,6 +741,8 @@
   "admin.database.migrations_table.name": "Name",
   "admin.database.migrations_table.title": "Applied Schema Migrations",
   "admin.database.migrations_table.version": "Version",
+  "admin.database.search_backend.help_text": "Shows the currently active backend used for search. Values can be none, database, elasticsearch, bleve etc.",
+  "admin.database.search_backend.title": "Active Search Backend",
   "admin.database.title": "Database",
   "admin.developer.title": "Developer Settings",
   "admin.elasticsearch.bulkIndexingTitle": "Bulk Indexing:",

webapp/platform/client/src/client4.ts

@@ -2439,6 +2439,7 @@ export default class Client4 {
     ping = () => {
         return this.doFetch<{
             status: string;
+            ActiveSearchBackend: string;
         }>(
             `${this.getBaseRoute()}/system/ping?time=${Date.now()}`,
             {method: 'get'},