Improved frontend for activity logs

frontend/components/basic/EventFilter.tsx

@@ -1,60 +1,50 @@
 import React from 'react';
 import { Fragment } from 'react';
+import { useTranslation } from "next-i18next";
 import {
   faAngleDown,
-  faCheck,
-  faDownload,
+  faEye,
   faPlus,
-  faUpload,
+  faShuffle,
   faX
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Listbox, Transition } from '@headlessui/react';
 
-import guidGenerator from '../utilities/randomId';
-import Button from './buttons/Button';
-
 interface ListBoxProps {
   selected: string;
   select: (event: string) => void;
-  data: string[];
-  text?: string;
-  buttonAction?: () => void;
-  isFull?: boolean;
 }
 
 const eventOptions = [
   {
-    name: 'Secrets Pushed',
-    icon: faUpload
+    name: 'addSecrets',
+    icon: faPlus
   },
   {
-    name: 'Secrets Pulled',
-    icon: faDownload
+    name: 'readSecrets',
+    icon: faEye
+  },
+  {
+    name: 'updateSecrets',
+    icon: faShuffle
   }
 ];
 
 /**
- * This is the component that we use for drop down lists.
+ * This is the component that we use for the event picker in the activity logs tab.
  * @param {object} obj
- * @param {string} obj.selected - the item that is currently selected
- * @param {function} obj.select - what happends if you select the item inside a list
- * @param {string[]} obj.data - all the options available
- * @param {string} obj.text - the text that shows us in front of the select option
- * @param {function} obj.buttonAction - if there is a button at the bottom of the list, this is the action that happens when you click the button
- * @param {string} obj.width - button width
- * @returns
+ * @param {string} obj.selected - the event that is currently selected
+ * @param {function} obj.select - an action that happens when an item is selected
  */
 export default function EventFilter({
   selected,
-  select,
-  data,
-  text,
-  buttonAction,
-  isFull
+  select
 }: ListBoxProps): JSX.Element {
+  const { t } = useTranslation();
+
   return (
-    <Listbox value={selected} onChange={select}>
+    <Listbox value={t("activity:event." + selected)} onChange={select}>
       <div className="relative">
         <Listbox.Button className="bg-mineshaft-800 hover:bg-mineshaft-700 duration-200 cursor-pointer rounded-md h-10 flex items-center justify-between pl-4 pr-2 w-52 text-bunker-200 text-sm">
           {selected != '' ? (
@@ -84,9 +74,9 @@ export default function EventFilter({
                 <Listbox.Option
                   key={id}
                   className={`px-4 h-10 flex items-center text-sm cursor-pointer hover:bg-mineshaft-700 text-bunker-200 rounded-md ${
-                    selected == event.name && 'bg-mineshaft-700'
+                    selected == t("activity:event." + event.name) && 'bg-mineshaft-700'
                   }`}
-                  value={event.name}
+                  value={t("activity:event." + event.name)}
                 >
                   {({ selected }) => (
                     <>
@@ -96,7 +86,7 @@ export default function EventFilter({
                         }`}
                       >
                         <FontAwesomeIcon icon={event.icon} className="pr-4" />{' '}
-                        {event.name}
+                        {t("activity:event." + event.name)}
                       </span>
                     </>
                   )}

frontend/components/basic/table/ActivityTable.tsx

@@ -1,141 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import {
-  faAngleDown,
-  faAngleRight,
-  faX
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import guidGenerator from '../../utilities/randomId';
-
-interface ActivityTableProps {
-  eventName: string;
-  user: string;
-  source: string;
-  time: Date;
-}
-
-function timeSince(date: Date) {
-  const seconds = Math.floor(
-    ((new Date() as any) - (date as any)) / 1000
-  ) as number;
-
-  let interval = seconds / 31536000;
-
-  if (interval > 1) {
-    return Math.floor(interval) + ' years ago';
-  }
-  interval = seconds / 2592000;
-  if (interval > 1) {
-    return Math.floor(interval) + ' months ago';
-  }
-  interval = seconds / 86400;
-  if (interval > 1) {
-    return Math.floor(interval) + ' days ago';
-  }
-  interval = seconds / 3600;
-  if (interval > 1) {
-    return Math.floor(interval) + ' hours ago';
-  }
-  interval = seconds / 60;
-  if (interval > 1) {
-    return Math.floor(interval) + ' minutes ago';
-  }
-  return Math.floor(seconds) + ' seconds ago';
-}
-
-const ActivityLogsRow = ({ row }: { row: ActivityTableProps }): JSX.Element => {
-  const [payloadOpened, setPayloadOpened] = useState(false);
-  return (
-    <>
-      <tr key={guidGenerator()} className="bg-bunker-800 duration-100 w-full">
-        <div
-          onClick={() => setPayloadOpened(!payloadOpened)}
-          className="border-mineshaft-700 border-t text-gray-300 flex items-center cursor-pointer"
-        >
-          <FontAwesomeIcon
-            icon={payloadOpened ? faAngleDown : faAngleRight}
-            className={`mt-3 ml-6 text-bunker-100 hover:bg-primary-100/[0.15] ${
-              payloadOpened && 'bg-primary-100/10'
-            } p-1 duration-100 h-4 w-4 rounded-md`}
-          />
-        </div>
-        <td className="py-3 border-mineshaft-700 border-t text-gray-300">
-          {row.eventName}
-        </td>
-        <td className="pl-6 py-3 border-mineshaft-700 border-t text-gray-300">
-          {row.user}
-        </td>
-        <td className="pl-6 py-3 border-mineshaft-700 border-t text-gray-300">
-          {row.source}
-        </td>
-        <td className="pl-6 py-3 border-mineshaft-700 border-t text-gray-300">
-          {timeSince(row.time)}
-        </td>
-        {/* <td className="py-2 border-mineshaft-700 border-t">
-          <div className="opacity-50 hover:opacity-100 duration-200 flex items-center">
-            <Button
-              onButtonPressed={() => {}}
-              color="red"
-              size="icon-sm"
-              icon={faX}
-            />
-          </div>
-        </td> */}
-      </tr>
-      {payloadOpened && (
-        <tr className="w-full h-10 bg-bunker-700 text-bunker-200 col-span-2">
-          <td colSpan={5} className="">
-            <div className="flex flex-row ml-12 py-2 border-mineshaft-700 border-t">
-              <div className="w-96">Timestamp</div>
-              <div className="w-96">2022-12-16T04:02:44.517Z</div>
-            </div>
-            <div className="flex flex-row ml-12 py-2 border-mineshaft-700 border-t">
-              <div className="w-96">Number of Secrets</div>
-              <div className="w-96">32</div>
-            </div>
-            <div className="flex flex-row ml-12 py-2 border-mineshaft-700 border-t">
-              <div className="w-96">IP Address</div>
-              <div className="w-96">159.223.164.24</div>
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  );
-};
-
-/**
- * This is the table for activity logs (one of the tabs)
- * @param {*} props
- * @returns
- */
-const ActivityTable = ({ data }: { data: ActivityTableProps[] }) => {
-  return (
-    <div className="w-full px-6 mt-8">
-      <div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative">
-        <div className="absolute rounded-t-md w-full h-[3.15rem] bg-white/5"></div>
-        <table className="w-full my-1">
-          <thead className="text-bunker-300">
-            <tr>
-              <th className="text-left pl-6 pt-2.5 pb-3"></th>
-              <th className="text-left pt-2.5 pb-3">Event</th>
-              <th className="text-left pl-6 pt-2.5 pb-3">User</th>
-              <th className="text-left pl-6 pt-2.5 pb-3">Source</th>
-              <th className="text-left pl-6 pt-2.5 pb-3">Time</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((row, index) => {
-              return <ActivityLogsRow key={index} row={row} />;
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};
-
-export default ActivityTable;