Feat playbooks git sync

client/.eslintrc.js

@@ -10,5 +10,6 @@ module.exports = {
     '@typescript-eslint/no-parameter-properties': 'off',
     '@typescript-eslint/consistent-type-imports': 'off',
     '@typescript-eslint/switch-exhaustiveness-check': 'off',
+    '@typescript-eslint/no-throw-literal': 'off',
   },
 };

client/Dockerfile

@@ -25,5 +25,5 @@ CMD ["npm", "run", "serve"]
 
 FROM base as dev
 COPY . .
-RUN npm install --verbose
+RUN npm install --verbose --no-audit
 CMD ["npm", "run", "start:pre"]

client/config/routes.ts

@@ -81,4 +81,8 @@ export default [
     path: '/admin/inventory/:id',
     component: './Admin/Inventory',
   },
+  {
+    path: '/manage/playbooks/:id',
+    component: './Playbooks',
+  },
 ];

client/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "description": "SSM Client - A simple way to manage all your servers",
   "author": "Squirrel Team",
+  "license": "AGPL-3.0 license",
   "scripts": {
     "analyze": "cross-env ANALYZE=1 max build",
     "build": "max build",
@@ -47,21 +48,21 @@
   ],
   "dependencies": {
     "ssm-shared-lib": "file:../shared-lib/",
-    "antd": "^5.18.2",
+    "antd": "^5.18.3",
     "@ant-design/icons": "^5.3.7",
     "@ant-design/pro-components": "^2.7.10",
     "@ant-design/use-emotion-css": "1.0.4",
     "@ant-design/charts": "^2.1.1",
     "@antv/g2plot": "^2.4.31",
-    "@umijs/max": "^4.2.11",
+    "@umijs/max": "^4.2.13",
     "@umijs/route-utils": "^4.0.1",
     "@umijs/plugin-antd-dayjs": "^0.3.0",
     "umi-presets-pro": "^2.0.3",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "querystring": "^0.2.1",
-    "rc-menu": "^9.14.0",
+    "rc-menu": "^9.14.1",
     "react": "^18.3.1",
     "react-dev-inspector": "^2.0.1",
     "react-dom": "^18.3.1",
@@ -82,7 +83,7 @@
   "devDependencies": {
     "antd-pro-merge-less": "^3.0.11",
     "@ant-design/pro-cli": "^3.2.1",
-    "@ant-design/plots": "^2.2.2",
+    "@ant-design/plots": "^2.2.4",
     "@testing-library/react": "^16.0.0",
     "@types/classnames": "^2.3.1",
     "@types/express": "^4.17.21",
@@ -94,7 +95,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@umijs/fabric": "^4.0.1",
-    "@umijs/lint": "^4.2.11",
+    "@umijs/lint": "^4.2.13",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "express": "^4.19.2",
@@ -105,9 +106,9 @@
     "prettier": "^3.3.2",
     "swagger-ui-dist": "^5.17.14",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
     "eslint-plugin-react": "^7.34.3",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-react-hooks": "^4.6.2"
   },

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

@@ -31,7 +31,7 @@ const DeviceQuickActionDropDown: React.FC<QuickActionProps> = (props) => {
       if (DeviceQuickActionReference[idx].type === Types.PLAYBOOK) {
         props.setTerminal({
           isOpen: true,
-          command: DeviceQuickActionReference[idx].playbookFile,
+          quickRef: DeviceQuickActionReference[idx].playbookQuickRef,
           target: props.target,
         });
       } else if (

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

@@ -22,7 +22,7 @@ export enum Types {
 export type QuickActionReferenceType = {
   type: Types;
   action?: string;
-  playbookFile?: string;
+  playbookQuickRef?: string;
   label?: React.JSX.Element;
   onAdvancedMenu: boolean;
   children?: QuickActionReferenceType[];
@@ -45,7 +45,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
   },
   {
     type: Types.PLAYBOOK,
-    playbookFile: '_reboot',
+    playbookQuickRef: 'reboot',
     label: (
       <>
         <ReloadOutlined /> Reboot
@@ -69,7 +69,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
   },
   {
     type: Types.PLAYBOOK,
-    playbookFile: '_ping',
+    playbookQuickRef: 'ping',
     label: (
       <>
         <ShakeOutlined /> Ping
@@ -83,7 +83,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
   },
   {
     type: Types.PLAYBOOK,
-    playbookFile: '_updateAgent',
+    playbookQuickRef: 'updateAgent',
     onAdvancedMenu: true,
     label: (
       <>
@@ -93,7 +93,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
   },
   {
     type: Types.PLAYBOOK,
-    playbookFile: '_reinstallAgent',
+    playbookQuickRef: 'reinstallAgent',
     onAdvancedMenu: true,
     label: (
       <>
@@ -103,7 +103,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
   },
   {
     type: Types.PLAYBOOK,
-    playbookFile: '_restartAgent',
+    playbookQuickRef: 'restartAgent',
     onAdvancedMenu: true,
     label: (
       <>
@@ -114,7 +114,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
   {
     type: Types.PLAYBOOK,
     onAdvancedMenu: true,
-    playbookFile: '_retrieveAgentLogs',
+    playbookQuickRef: 'retrieveAgentLogs',
     label: (
       <>
         <BugOutlined /> Retrieve Agent Logs
@@ -127,7 +127,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
   },
   {
     type: Types.PLAYBOOK,
-    playbookFile: '_uninstallAgent',
+    playbookQuickRef: 'uninstallAgent',
     onAdvancedMenu: true,
     label: (
       <>

client/src/components/DeviceComponents/OSSoftwaresVersions/SoftwareIcon.tsx

@@ -115,7 +115,7 @@ const SoftwareIcon: React.FC<SoftwareIconType> = (props) => {
   /*
       "systemOpenssl": "3.2.0",
 
-      "git": "2.23.0",
+      "playbooks-repository": "2.23.0",
       "tsc": "5.3.3",
       "mysql": "",
       "cache": "",

client/src/components/Footer/index.tsx

@@ -10,7 +10,7 @@ const Footer: React.FC = () => {
       style={{
         background: 'none',
       }}
-      copyright={`${currentYear} Squirrel Team.`}
+      copyright={`${currentYear} Squirrel Team (AGPL-3.0 license).`}
       links={[
         {
           key: 'ssm',

client/src/components/Icons/CustomIcons.tsx

@@ -674,3 +674,35 @@ export const VaadinCubes = (props: any) => (
     />
   </svg>
 );
+
+export const SimpleIconsGit = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.2em"
+    height="1.2em"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="white"
+      d="M23.546 10.93L13.067.452a1.55 1.55 0 0 0-2.188 0L8.708 2.627l2.76 2.76a1.838 1.838 0 0 1 2.327 2.341l2.658 2.66a1.838 1.838 0 0 1 1.9 3.039a1.837 1.837 0 0 1-2.6 0a1.846 1.846 0 0 1-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348a1.848 1.848 0 0 1 0 2.6a1.844 1.844 0 0 1-2.609 0a1.834 1.834 0 0 1 0-2.598c.182-.18.387-.316.605-.406V8.835a1.834 1.834 0 0 1-.996-2.41L7.636 3.7L.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477a1.545 1.545 0 0 0 2.186 0l10.43-10.43a1.544 1.544 0 0 0 0-2.187"
+    />
+  </svg>
+);
+
+export const StreamlineLocalStorageFolderSolid = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="0.8em"
+    height="0.8em"
+    viewBox="0 0 14 14"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8.796 5h4.77c.24 0 .434-.195.434-.435v-3.26a.435.435 0 0 0-.434-.435h-2.61l-.12-.54A.435.435 0 0 0 10.4 0H8.796a.435.435 0 0 0-.435.435v4.13A.435.435 0 0 0 8.796 5M2 3h4.25a1 1 0 0 0 0-2H1.457C.652 1 0 1.652 0 2.457v7.086C0 10.348.652 11 1.457 11h4.028l-.537 1.5H4A.75.75 0 0 0 4 14h6a.75.75 0 1 0 0-1.5h-.948L8.515 11h4.028C13.348 11 14 10.348 14 9.543V7.25a1 1 0 1 0-2 0V9H2z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

client/src/components/PlaybookSelectionModal/PlaybookSelectionModal.tsx

@@ -1,4 +1,4 @@
-import { getPlaybooks } from '@/services/rest/ansible';
+import { getPlaybooks } from '@/services/rest/playbooks';
 import { RightSquareOutlined } from '@ant-design/icons';
 import {
   ModalForm,
@@ -28,15 +28,18 @@ const PlaybookSelectionModal: React.FC<PlaybookSelectionModalProps> = (
 ) => {
   const [form] = Form.useForm<{ playbook: { value: string } }>();
   const [listOfPlaybooks, setListOfPlaybooks] = React.useState<
-    API.PlaybookFileList[] | undefined
+    API.PlaybookFile[] | undefined
   >();
   const [selectedPlaybookExtraVars, setSelectedPlaybookExtraVars] =
     React.useState<any>();
   const [overrideExtraVars, setOverrideExtraVars] = React.useState<any>([]);
 
-  const handleSelectedPlaybook = (newValue: API.PlaybookFileList) => {
+  const handleSelectedPlaybook = (newValue: {
+    label: string;
+    value: string;
+  }) => {
     const selectedPlaybook = listOfPlaybooks?.find(
-      (e) => e.value === newValue?.value,
+      (e) => e.uuid === newValue?.value,
     );
     if (selectedPlaybook) {
       setOverrideExtraVars(
@@ -150,9 +153,16 @@ const PlaybookSelectionModal: React.FC<PlaybookSelectionModalProps> = (
             return (await getPlaybooks()
               .then((e) => {
                 setListOfPlaybooks(e.data);
-                return e.data?.filter(({ value, label }) => {
-                  return value.includes(keyWords) || label.includes(keyWords);
-                });
+                return e.data
+                  ?.filter(({ name, path }: { name: string; path: string }) => {
+                    return name.includes(keyWords) || path.includes(keyWords);
+                  })
+                  .map((f: API.PlaybookFile) => {
+                    return {
+                      value: f.uuid,
+                      label: f.name,
+                    };
+                  });
               })
               .catch((error) => {
                 message.error({
@@ -179,7 +189,7 @@ const PlaybookSelectionModal: React.FC<PlaybookSelectionModalProps> = (
             return (
               <span style={{ marginTop: 10 }}>
                 <RightSquareOutlined /> SSM will apply &quot;
-                {playbook ? playbook.value : '?'}
+                {playbook ? playbook.label : '?'}
                 &quot; on{' '}
                 {props.itemSelected?.map((e) => {
                   return '[' + e.ip + '] ';

client/src/components/RegistryComponents/RegistryLogo.tsx

@@ -0,0 +1,50 @@
+import {
+  DeviconAzure,
+  DeviconGooglecloud,
+  FluentMdl2RegistryEditor,
+  LogoHotIo,
+  LogosAws,
+  LogosGitlab,
+  LogosQuay,
+  SimpleIconsForgejo,
+  SimpleIconsGitea,
+  VaadinCubes,
+  VscodeIconsFileTypeDocker2,
+  ZmdiGithub,
+} from '@/components/Icons/CustomIcons';
+import React from 'react';
+
+type RegistryLogoProps = {
+  provider: string;
+};
+
+const RegistryLogo: React.FC<RegistryLogoProps> = (props) => {
+  switch (props.provider) {
+    case 'ghcr':
+      return <ZmdiGithub />;
+    case 'gcr':
+      return <DeviconGooglecloud />;
+    case 'acr':
+      return <DeviconAzure />;
+    case 'hotio':
+      return <LogoHotIo />;
+    case 'hub':
+      return <VscodeIconsFileTypeDocker2 />;
+    case 'ecr':
+      return <LogosAws />;
+    case 'quay':
+      return <LogosQuay />;
+    case 'forgejo':
+      return <SimpleIconsForgejo />;
+    case 'gitea':
+      return <SimpleIconsGitea />;
+    case 'lscr':
+      return <VaadinCubes />;
+    case 'gitlab':
+      return <LogosGitlab />;
+    default:
+      return <FluentMdl2RegistryEditor />;
+  }
+};
+
+export default RegistryLogo;

client/src/components/Template/Title.tsx

@@ -18,6 +18,8 @@ export enum SettingsSubTitleColors {
   USER_LOGS = '#6d26a8',
   API = '#1e6d80',
   SERVER = '#8e7d50',
+  GIT = '#336048',
+  LOCAL = '#4b4a4a',
 }
 
 export type PageContainerTitleProps = {

client/src/components/TerminalModal/TerminalHandler.ts

@@ -1,5 +1,5 @@
 import taskStatusTimeline from '@/components/TerminalModal/TaskStatusTimeline';
-import { getExecLogs, getTaskStatuses } from '@/services/rest/ansible';
+import { getExecLogs, getTaskStatuses } from '@/services/rest/playbooks';
 import { StepsProps } from 'antd';
 import React, { ReactNode } from 'react';
 import { API } from 'ssm-shared-lib';