chore: add `ping` button

web/src/components/MenuBtnsPopup.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from "react";
+import * as api from "../helpers/api";
 import { locationService, userService } from "../services";
 import showAboutSiteDialog from "./AboutSiteDialog";
+import toastHelper from "./Toast";
 import "../less/menu-btns-popup.less";
 
 interface Props {
@@ -27,6 +29,20 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
     }
   }, [shownStatus]);
 
+  const handlePingBtnClick = () => {
+    api
+      .getSystemStatus()
+      .then(({ data }) => {
+        const {
+          data: { profile },
+        } = data;
+        toastHelper.info(JSON.stringify(profile, null, 4));
+      })
+      .catch((error) => {
+        toastHelper.error("Failed to ping\n" + JSON.stringify(error, null, 4));
+      });
+  };
+
   const handleAboutBtnClick = () => {
     showAboutSiteDialog();
   };
@@ -41,6 +57,9 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
 
   return (
     <div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
+      <button className="btn action-btn" onClick={handlePingBtnClick}>
+        <span className="icon">🎯</span> Ping
+      </button>
       <button className="btn action-btn" onClick={handleAboutBtnClick}>
         <span className="icon">🤠</span> About
       </button>

web/src/less/toast.less

@@ -1,12 +1,10 @@
 @import "./mixin.less";
 
 .toast-list-container {
-  .flex(column, flex-start, flex-end);
-  @apply fixed top-2 right-4 z-1000 max-h-full;
+  @apply flex flex-col justify-start items-end fixed top-2 right-4 z-1000 max-h-full;
 
   > .toast-wrapper {
-    .flex(column, flex-start, flex-start);
-    @apply relative left-full invisible text-base cursor-pointer shadow rounded bg-white mt-6 py-2 px-4;
+    @apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow rounded bg-white mt-6 py-2 px-4;
     min-width: 6em;
     transition: all 0.4s ease;
 
@@ -21,8 +19,7 @@
 
     > .toast-container {
       > .content-text {
-        @apply text-sm whitespace-pre-wrap leading-6;
-        max-width: 240px;
+        @apply text-sm whitespace-pre-wrap break-all leading-6 max-w-xs;
       }
     }
   }