Added link to telescope

Author: Jovert Lota Palonpon

resources/js/App.js

@@ -17,11 +17,27 @@ class App extends Component {
         user: {},
         username: '',
 
-        errorResponse: {},
-        successfulResponse: {},
+        monitoringEnabled: false,
         responseInterceptor: null,
     };
 
+    /**
+     * Determine if monitoring is enabled.
+     *
+     * @return {undefined}
+     */
+    monitoringEnabled = () => {
+        const configItem = document.querySelector(
+            'meta[name=TELESCOPE_ENABLED]',
+        );
+
+        if (configItem) {
+            this.setState({
+                monitoringEnabled: Boolean(configItem.content),
+            });
+        }
+    };
+
     /**
      * Remove the response interceptor.
      *
@@ -101,7 +117,9 @@ class App extends Component {
                     user: {},
                 });
             }
-        } catch (error) {}
+        } catch (error) {
+            //
+        }
     };
 
     /**
@@ -230,10 +248,15 @@ class App extends Component {
             });
 
             return response.data;
-        } catch (error) {}
+        } catch (error) {
+            //
+        }
     };
 
     async componentDidMount() {
+        // Toggle monitoring.
+        this.monitoringEnabled();
+
         // Listen for all API responses.
         this.addResponseInterceptor();
 

resources/js/views/__backoffice/partials/Header.js

@@ -35,6 +35,7 @@ import {
     Menu as MenuIcon,
     Notifications as NotificationsIcon,
     Settings as SettingsIcon,
+    Update as UpdateIcon,
 } from '@material-ui/icons';
 
 import * as RandomUtils from '../../../utils/Random';
@@ -231,7 +232,12 @@ const Header = props => {
         accountMenuOpen,
     } = props;
 
-    const { user, nightMode, handleNightmodeToggled } = pageProps;
+    const {
+        user,
+        monitoringEnabled,
+        nightMode,
+        handleNightmodeToggled,
+    } = pageProps;
 
     const skeletonProps = {
         color: colors.grey[400],
@@ -432,6 +438,23 @@ const Header = props => {
                             </Typography>
                         </Grid>
 
+                        {monitoringEnabled && (
+                            <Grid item>
+                                <Tooltip
+                                    title={Lang.get('navigation.monitoring')}
+                                >
+                                    <IconButton
+                                        href="/telescope"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        color="inherit"
+                                    >
+                                        <UpdateIcon />
+                                    </IconButton>
+                                </Tooltip>
+                            </Grid>
+                        )}
+
                         <Grid item>
                             <Tooltip
                                 title={Lang.get('navigation.notifications')}

resources/lang/en/navigation.php

@@ -26,6 +26,8 @@
     'send_link' => 'Send Link',
     'reset' => 'Reset',
 
+    'monitoring' => 'Monitoring',
+
     'notifications' => 'Notifications',
 
     'locale' => 'Locale',

resources/lang/fil/navigation.php

@@ -26,6 +26,8 @@
     'send_link' => 'I-send ang Link',
     'reset' => 'I-reset',
 
+    'monitoring' => 'Pagsubaybay',
+
     'notifications' => 'Mga Abiso',
 
     'locale' => 'Lokal',

resources/views/__backoffice/welcome.blade.php

@@ -19,6 +19,8 @@
             <meta name="sw-filepath" content="/service-worker.js">
         @endif
 
+        <meta name="TELESCOPE_ENABLED" content="{{ config('telescope.enabled') }}">
+
         <!-- Title -->
         <title>{{ config('app.name') }}</title>