Merge pull request #181 from SquirrelCorporation/feat-socket-real-tim…

…e-logs

[FEAT] Feat socket real time logs / SSH Connect

client/config/routes.ts

@@ -85,4 +85,12 @@ export default [
     path: '/manage/playbooks/:id',
     component: './Playbooks',
   },
+  {
+    path: '/manage/services/logs/:id',
+    component: './Services/logs/Logs',
+  },
+  {
+    path: '/manage/devices/ssh/:id',
+    component: './Devices/DeviceSSHTerminal',
+  },
 ];

client/package.json

@@ -80,9 +80,11 @@
     "react-helmet-async": "^2.0.5",
     "react-js-cron": "^5.0.1",
     "react-json-formatter": "^0.4.0",
-    "react-terminal": "^1.4.4",
     "ssm-shared-lib": "file:../shared-lib/",
-    "umi-presets-pro": "^2.0.3"
+    "umi-presets-pro": "^2.0.3",
+    "socket.io-client": "^4.7.5",
+    "xterm": "^5.3.0",
+    "@xterm/addon-fit": "^0.10.0"
   },
   "devDependencies": {
     "@ant-design/plots": "^2.2.8",

client/src/app.tsx

@@ -81,9 +81,7 @@ export const layout: RunTimeLayoutConfig = ({
       <DocumentationWidget key="doc" />,
       <DevicesHeaderWidget key="online" />,
       <HealthWidget key="health" />,
-      <NotificationsWidget
-        key="notifications"
-      />,
+      <NotificationsWidget key="notifications" />,
     ],
     avatarProps: {
       src: initialState?.currentUser?.avatar,

client/src/components/DeviceComponents/DeviceQuickAction/DeviceQuickActionDropDown.tsx

@@ -1,8 +1,10 @@
 import { TerminalStateProps } from '@/components/TerminalModal';
 import { DownOutlined } from '@ant-design/icons';
+import { history } from '@umijs/max';
 import { Dropdown, MenuProps, Space } from 'antd';
 import React, { Dispatch, ReactNode, SetStateAction } from 'react';
 import DeviceQuickActionReference, {
+  Actions,
   Types,
 } from '@/components/DeviceComponents/DeviceQuickAction/DeviceQuickActionReference';
 import PlaybookSelectionModal from '@/components/PlaybookSelection/PlaybookSelectionModal';
@@ -13,7 +15,7 @@ export type QuickActionProps = {
   onDropDownClicked: any;
   advancedMenu?: boolean;
   setTerminal: Dispatch<SetStateAction<TerminalStateProps>>;
-  target?: API.DeviceItem[];
+  target?: API.DeviceItem;
   children?: ReactNode;
 };
 
@@ -28,19 +30,25 @@ const DeviceQuickActionDropDown: React.FC<QuickActionProps> = (props) => {
         alert('Internal Error');
         return;
       }
+      if (DeviceQuickActionReference[idx].action === Actions.CONNECT) {
+        history.push({
+          pathname: `/manage/devices/ssh/${props.target?.uuid}`,
+        });
+        return;
+      }
       if (DeviceQuickActionReference[idx].type === Types.PLAYBOOK) {
         props.setTerminal({
           isOpen: true,
           quickRef: DeviceQuickActionReference[idx].playbookQuickRef,
-          target: props.target,
+          target: props.target ? [props.target] : undefined,
         });
-      } else if (
-        DeviceQuickActionReference[idx].type === Types.PLAYBOOK_SELECTION
-      ) {
+        return;
+      }
+      if (DeviceQuickActionReference[idx].type === Types.PLAYBOOK_SELECTION) {
         setPlaybookSelectionModalIsOpened(true);
-      } else {
-        props.onDropDownClicked(idx);
+        return;
       }
+      props.onDropDownClicked(idx);
     }
   };
 
@@ -75,7 +83,7 @@ const DeviceQuickActionDropDown: React.FC<QuickActionProps> = (props) => {
     props.setTerminal({
       isOpen: true,
       command: playbook,
-      target: props.target,
+      target: props.target ? [props.target] : undefined,
       extraVars: extraVars,
       playbookName: playbookName,
     });
@@ -86,7 +94,7 @@ const DeviceQuickActionDropDown: React.FC<QuickActionProps> = (props) => {
       <PlaybookSelectionModal
         isModalOpen={playbookSelectionModalIsOpened}
         setIsModalOpen={setPlaybookSelectionModalIsOpened}
-        itemSelected={props.target}
+        itemSelected={props.target ? [props.target] : undefined}
         callback={onSelectPlaybook}
       />
       <Dropdown menu={{ items, onClick }}>

client/src/components/HeaderComponents/AvatarDropdown.tsx

@@ -79,7 +79,11 @@ export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({
       const { key } = event;
       if (key === 'logout') {
         flushSync(() => {
-          setInitialState((s: any) => ({ ...s, currentUser: undefined }));
+          setInitialState((s: any) => ({
+            ...s,
+            currentUser: undefined,
+            token: undefined,
+          }));
         });
         loginOut();
         return;

client/src/components/Icons/CustomIcons.tsx

@@ -1249,3 +1249,22 @@ const MoreSvg = (props: any) => (
 export const More = (props: Partial<CustomIconComponentProps>) => (
   <Icon component={MoreSvg} {...props} />
 );
+
+const Live24FilledSvg = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M6.343 4.938a1 1 0 0 1 0 1.415a8.003 8.003 0 0 0 0 11.317a1 1 0 1 1-1.414 1.414c-3.907-3.906-3.907-10.24 0-14.146a1 1 0 0 1 1.414 0Zm12.732 0c3.906 3.907 3.906 10.24 0 14.146a1 1 0 0 1-1.415-1.414a8.003 8.003 0 0 0 0-11.317a1 1 0 0 1 1.415-1.415ZM9.31 7.812a1 1 0 0 1 0 1.414a3.92 3.92 0 0 0 0 5.544a1 1 0 1 1-1.415 1.414a5.92 5.92 0 0 1 0-8.372a1 1 0 0 1 1.415 0Zm6.958 0a5.92 5.92 0 0 1 0 8.372a1 1 0 0 1-1.414-1.414a3.92 3.92 0 0 0 0-5.544a1 1 0 0 1 1.414-1.414Zm-4.186 2.77a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3Z"
+    />
+  </svg>
+);
+
+export const Live24Filled = (props: Partial<CustomIconComponentProps>) => (
+  <Icon component={Live24FilledSvg} {...props} />
+);