fixed activity pages with new webui

pyrohost · Nov 23, 2024 · dab885f · dab885f
1 parent 46c9374
commit dab885f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 41 deletions.
diff --git a/resources/scripts/components/elements/activity/ActivityLogEntry.tsx b/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
@@ -7,6 +7,8 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { Link } from 'react-router-dom';
 
 import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
+import FolderIcon from '@/components/elements/hugeicons/Folder';
+import TerminalIcon from '@/components/elements/hugeicons/Terminal';
 
 import useLocationHash from '@/plugins/useLocationHash';
 
@@ -61,22 +63,15 @@ export default ({ activity, children }: Props) => {
                         <span className={'text-zinc-400'}>&nbsp;&mdash;&nbsp;</span>
                         <Link
                             to={`#${pathTo({ event: activity.event })}`}
-                            className={'transition-colors duration-75 active:text-blue-400 hover:text-blue-400'}
+                            className={'transition-colors duration-75 active:text-blue-400 hover:text-red-400'}
                         >
                             {activity.event}
                         </Link>
                         <div className={clsx(style.icons, 'group-hover:text-zinc-300')}>
-                            {activity.isApi && (
-                                // <Tooltip placement={'top'} content={'Using API Key'}>
-                                // <TerminalIcon />
-                                <div>terminal icon</div>
-                                // </Tooltip>
-                            )}
+                            {activity.isApi && <TerminalIcon fill='contentColor' />}
                             {activity.event.startsWith('server:sftp.') && (
                                 // <Tooltip placement={'top'} content={'Using SFTP'}>
-                                // <FolderOpenIcon />
-                                <div>folder open icon</div>
-                                // </Tooltip>
+                                <FolderIcon fill='contentColor' />
                             )}
                             {children}
                         </div>

diff --git a/resources/scripts/components/elements/hugeicons/Terminal.tsx b/resources/scripts/components/elements/hugeicons/Terminal.tsx
@@ -0,0 +1,25 @@
+import { HugeIconProps } from './props';
+
+const HugeIconsTerminal = (props: HugeIconProps) => {
+    return (
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='#ffffff' fill='none'>
+            <path
+                d='M7 7L8.22654 8.05719C8.74218 8.50163 9 8.72386 9 9C9 9.27614 8.74218 9.49836 8.22654 9.94281L7 11'
+                stroke='currentColor'
+                strokeWidth='1.5'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path d='M11 11H14' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+            <path
+                d='M12 21C15.7497 21 17.6246 21 18.9389 20.0451C19.3634 19.7367 19.7367 19.3634 20.0451 18.9389C21 17.6246 21 15.7497 21 12C21 8.25027 21 6.3754 20.0451 5.06107C19.7367 4.6366 19.3634 4.26331 18.9389 3.95491C17.6246 3 15.7497 3 12 3C8.25027 3 6.3754 3 5.06107 3.95491C4.6366 4.26331 4.26331 4.6366 3.95491 5.06107C3 6.3754 3 8.25027 3 12C3 15.7497 3 17.6246 3.95491 18.9389C4.26331 19.3634 4.6366 19.7367 5.06107 20.0451C6.3754 21 8.25027 21 12 21Z'
+                stroke='currentColor'
+                strokeWidth='1.5'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+        </svg>
+    );
+};
+
+export default HugeIconsTerminal;
diff --git a/resources/scripts/components/server/ServerActivityLogContainer.tsx b/resources/scripts/components/server/ServerActivityLogContainer.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import FlashMessageRender from '@/components/FlashMessageRender';
+import ContentBox from '@/components/elements/ContentBox';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import ActivityLogEntry from '@/components/elements/activity/ActivityLogEntry';
@@ -37,37 +38,39 @@ export default () => {
     return (
         <ServerContentBlock title={'Activity Log'}>
             <FlashMessageRender byKey={'server:activity'} />
-            {(filters.filters?.event || filters.filters?.ip) && (
-                <div className={'flex justify-end mb-2'}>
-                    <Link
-                        to={'#'}
-                        className={clsx(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
-                        onClick={() => setFilters((value) => ({ ...value, filters: {} }))}
-                    >
-                        Clear Filters
-                        {/* FIXME: X icon */}
-                    </Link>
-                </div>
-            )}
-            {!data && isValidating ? (
-                <Spinner centered />
-            ) : !data?.items.length ? (
-                <p className={'text-sm text-center text-zinc-400'}>No activity logs available for this server.</p>
-            ) : (
-                <div className={'bg-zinc-700'}>
-                    {data?.items.map((activity) => (
-                        <ActivityLogEntry key={activity.id} activity={activity}>
-                            <span />
-                        </ActivityLogEntry>
-                    ))}
-                </div>
-            )}
-            {data && (
-                <PaginationFooter
-                    pagination={data.pagination}
-                    onPageSelect={(page) => setFilters((value) => ({ ...value, page }))}
-                />
-            )}
+            <ContentBox title='Server Activity Logs'>
+                {(filters.filters?.event || filters.filters?.ip) && (
+                    <div className={'flex justify-end mb-2'}>
+                        <Link
+                            to={'#'}
+                            className={clsx(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
+                            onClick={() => setFilters((value) => ({ ...value, filters: {} }))}
+                        >
+                            Clear Filters
+                            {/* FIXME: X icon */}
+                        </Link>
+                    </div>
+                )}
+                {!data && isValidating ? (
+                    <Spinner centered />
+                ) : !data?.items.length ? (
+                    <p className={'text-sm text-center text-zinc-400'}>No activity logs available for this server.</p>
+                ) : (
+                    <div>
+                        {data?.items.map((activity) => (
+                            <ActivityLogEntry key={activity.id} activity={activity}>
+                                <span />
+                            </ActivityLogEntry>
+                        ))}
+                    </div>
+                )}
+                {data && (
+                    <PaginationFooter
+                        pagination={data.pagination}
+                        onPageSelect={(page) => setFilters((value) => ({ ...value, page }))}
+                    />
+                )}
+            </ContentBox>
         </ServerContentBlock>
     );
 };