synced/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2025-03-25 14:05:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finished secret snapshots

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-01-04 17:11:07 -08:00
parent df7340e440
commit 347b7201de
14 changed files with 485 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/ee/controllers/v1/workspaceController.ts
View File

@ -21,6 +21,7 @@ import {
secretSnapshots = await SecretSnapshot.find({
workspace: workspaceId
})
.sort({ createdAt: -1 })
.skip(offset)
.limit(limit);

4
backend/src/ee/routes/v1/workspace.ts
View File

@ -39,7 +39,9 @@ router.get(
router.get(
'/:workspaceId/logs',
requireAuth,
requireAuth({
acceptedAuthModes: ['jwt']
}),
requireWorkspaceAuth({
acceptedRoles: [ADMIN, MEMBER]
}),

11
backend/src/helpers/secret.ts
View File

@ -470,11 +470,12 @@ const v1PushSecrets = async ({
// (EE) add secret versions for new secrets
EESecretService.addSecretVersions({
secretVersions: newSecrets.map((s) => ({
...s,
secret: s._id,
isDeleted: false
}))
secretVersions: newSecrets.map((secretDocument) => {
return {
...secretDocument.toObject(),
secret: secretDocument._id,
isDeleted: false
}})
});
const addAction = await EELogService.createActionSecret({

10
frontend/components/basic/Layout.tsx
View File

@ -121,7 +121,7 @@ export default function Layout({ children }: LayoutProps) {
}
});
}
router.push("/dashboard/" + newWorkspaceId + "?Development");
router.push("/dashboard/" + newWorkspaceId);
setIsOpen(false);
setNewWorkspaceName("");
} else {
@ -141,8 +141,7 @@ export default function Layout({ children }: LayoutProps) {
{
href:
"/dashboard/" +
workspaceMapping[workspaceSelected as any] +
"?Development",
workspaceMapping[workspaceSelected as any],
title: t("nav:menu.secrets"),
emoji: <FontAwesomeIcon icon={faKey} />,
},
@ -199,7 +198,7 @@ export default function Layout({ children }: LayoutProps) {
.map((workspace: { _id: string }) => workspace._id)
.includes(intendedWorkspaceId)
) {
router.push("/dashboard/" + userWorkspaces[0]._id + "?Development");
router.push("/dashboard/" + userWorkspaces[0]._id);
} else {
setWorkspaceList(
userWorkspaces.map((workspace: any) => workspace.name)
@ -242,8 +241,7 @@ export default function Layout({ children }: LayoutProps) {
) {
router.push(
"/dashboard/" +
workspaceMapping[workspaceSelected as any] +
"?Development"
workspaceMapping[workspaceSelected as any]
);
localStorage.setItem(
"projectData.id",

2
frontend/components/basic/buttons/Button.tsx
View File

@ -115,7 +115,7 @@ export default function Button(props: ButtonProps): JSX.Element {
<FontAwesomeIcon
icon={props.icon}
className={`flex my-auto font-extrabold ${
props.size == "icon-sm" ? "text-sm" : "text-md"
props.size == "icon-sm" ? "text-sm" : "text-sm"
} ${(props.text || props.textDisabled) && "mr-2"}`}
/>
)}

4
frontend/components/context/Notifications/Notification.tsx
View File

@ -36,7 +36,7 @@ const Notification = ({
return (
<div
className="relative w-full flex items-center justify-between px-4 py-6 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
className="relative w-full flex items-center justify-between px-4 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
role="alert"
>
{notification.type === 'error' && (
@ -56,7 +56,7 @@ const Notification = ({
onClick={() => clearNotification(notification.text)}
>
<FontAwesomeIcon
className="text-white w-4 h-3 hover:text-red"
className="text-white pl-2 w-4 h-3 hover:text-red"
icon={faX}
/>
</button>

2
frontend/components/context/Notifications/NotificationProvider.tsx
View File

@ -38,7 +38,7 @@ const NotificationProvider = ({ children }: NotificationProviderProps) => {
const createNotification = ({
text,
type = 'success',
timeoutMs = 5000
timeoutMs = 4000
}: Notification) => {
const doesNotifExist = notifications.some((notif) => notif.text === text);

15
frontend/components/dashboard/KeyPair.tsx
View File

@ -21,6 +21,7 @@ interface KeyPairProps {
isDuplicate: boolean;
toggleSidebar: (id: string) => void;
sidebarSecretId: string;
isSnapshot: boolean;
}
/**
@ -33,6 +34,7 @@ interface KeyPairProps {
* @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
* @param {function} obj.toggleSidebar - open/close/switch sidebar
* @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
* @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar
* @returns
*/
const KeyPair = ({
@ -42,10 +44,11 @@ const KeyPair = ({
isBlurred,
isDuplicate,
toggleSidebar,
sidebarSecretId
sidebarSecretId,
isSnapshot
}: KeyPairProps) => {
return (
<div className={`mx-1 flex flex-col items-center ml-1 ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
<div className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && "pointer-events-none"} ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
<div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
{keyPair.type == "personal" && <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
<div className='w-1 h-1 rounded-full bg-primary z-40'></div>
@ -65,7 +68,7 @@ const KeyPair = ({
</div>
</div>
<div className="w-full min-w-xl">
<div className="flex min-w-xl items-center pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10">
<div className={`flex min-w-xl items-center ${!isSnapshot && "pr-1.5"} rounded-lg mt-4 md:mt-0 max-h-10`}>
<DashboardInputField
onChangeHandler={modifyValue}
type="value"
@ -76,15 +79,15 @@ const KeyPair = ({
/>
</div>
</div>
<div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
{!isSnapshot && <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
<FontAwesomeIcon
className="text-gray-300 px-2.5 text-lg mt-0.5"
icon={faEllipsis}
/>
</div>
</div>}
</div>
</div>
);
};
export default React.memo(KeyPair);
export default KeyPair;

39
frontend/ee/api/secrets/GetProjectSercetShanpshots.ts Normal file
View File

@ -0,0 +1,39 @@
import SecurityClient from '~/utilities/SecurityClient';
interface workspaceProps {
workspaceId: string;
offset: number;
limit: number;
}
/**
* This function fetches the secret snapshots for a certain project
* @param {object} obj
* @param {string} obj.workspaceId - project id for which we are trying to get project secret snapshots
* @param {object} obj.offset - teh starting point of snapshots that we want to pull
* @param {object} obj.limit - how many snapshots will we output
* @returns
*/
const getProjectSecretShanpshots = async ({ workspaceId, offset, limit }: workspaceProps) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/secret-snapshots?' +
new URLSearchParams({
offset: String(offset),
limit: String(limit)
}), {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).secretSnapshots;
} else {
console.log('Failed to get project secret snapshots');
}
});
};
export default getProjectSecretShanpshots;

31
frontend/ee/api/secrets/GetProjectSercetSnapshotsCount.ts Normal file
View File

@ -0,0 +1,31 @@
import SecurityClient from '~/utilities/SecurityClient';
interface workspaceProps {
workspaceId: string;
}
/**
* This function fetches the count of secret snapshots for a certain project
* @param {object} obj
* @param {string} obj.workspaceId - project id for which we are trying to get project secret snapshots
* @returns
*/
const getProjectSercetSnapshotsCount = async ({ workspaceId }: workspaceProps) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/secret-snapshots/count', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).count;
} else {
console.log('Failed to get the count of project secret snapshots');
}
});
};
export default getProjectSercetSnapshotsCount;

31
frontend/ee/api/secrets/GetSecretSnapshotData.ts Normal file
View File

@ -0,0 +1,31 @@
import SecurityClient from '~/utilities/SecurityClient';
interface SnapshotProps {
secretSnapshotId: string;
}
/**
* This function fetches the secrets for a certain secret snapshot
* @param {object} obj
* @param {string} obj.secretSnapshotId - snapshot id for which we are trying to get secrets
* @returns
*/
const getSecretSnapshotData = async ({ secretSnapshotId }: SnapshotProps) => {
return SecurityClient.fetchCall(
'/api/v1/secret-snapshot/' + secretSnapshotId, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).secretSnapshot;
} else {
console.log('Failed to get the secrets of a certain snapshot');
}
});
};
export default getSecretSnapshotData;

158
frontend/ee/components/PITRecoverySidebar.tsx Normal file
View File

@ -0,0 +1,158 @@
import { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faX } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import getProjectSecretShanpshots from "ee/api/secrets/GetProjectSercetShanpshots";
import getSecretSnapshotData from "ee/api/secrets/GetSecretSnapshotData";
import timeSince from "ee/utilities/timeSince";
import Button from "~/components/basic/buttons/Button";
import { decryptAssymmetric, decryptSymmetric } from "~/components/utilities/cryptography/crypto";
import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
interface SideBarProps {
toggleSidebar: (value: boolean) => void;
setSnapshotData: (value: any) => void;
chosenSnapshot: string;
}
interface SnaphotProps {
_id: string;
createdAt: string;
secretVersions: string[];
}
interface EncrypetedSecretVersionListProps {
_id: string;
createdAt: string;
secretValueCiphertext: string;
secretValueIV: string;
secretValueTag: string;
secretKeyCiphertext: string;
secretKeyIV: string;
secretKeyTag: string;
environment: string;
type: "personal" | "shared";
}
/**
* @param {object} obj
* @param {function} obj.toggleSidebar - function that opens or closes the sidebar
* @param {function} obj.setSnapshotData - state manager for snapshot data
* @param {string} obj.chosenSnaphshot - the snapshot id which is currently selected
*
*
* @returns the sidebar with the options for point-in-time recovery (commits)
*/
const PITRecoverySidebar = ({
toggleSidebar,
setSnapshotData,
chosenSnapshot
}: SideBarProps) => {
const { t } = useTranslation();
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [secretSnapshotsMetadata, setSecretSnapshotsMetadata] = useState<SnaphotProps[]>([]);
const [currentOffset, setCurrentOffset] = useState(0);
const currentLimit = 15;
const loadMoreSnapshots = () => {
setCurrentOffset(currentOffset + currentLimit);
}
useEffect(() => {
const getLogData = async () => {
setIsLoading(true);
const results = await getProjectSecretShanpshots({ workspaceId: String(router.query.id), limit: currentLimit, offset: currentOffset })
setSecretSnapshotsMetadata(secretSnapshotsMetadata.concat(results));
setIsLoading(false);
}
getLogData();
}, [currentOffset]);
const exploreSnapshot = async ({ snapshotId }: { snapshotId: string; }) => {
const secretSnapshotData = await getSecretSnapshotData({ secretSnapshotId: snapshotId });
const latestKey = await getLatestFileKey({ workspaceId: String(router.query.id) })
const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
let decryptedLatestKey: string;
if (latestKey) {
// assymmetrically decrypt symmetric key with local private key
decryptedLatestKey = decryptAssymmetric({
ciphertext: latestKey.latestKey.encryptedKey,
nonce: latestKey.latestKey.nonce,
publicKey: latestKey.latestKey.sender.publicKey,
privateKey: String(PRIVATE_KEY)
});
}
const decryptedSecretVersions = secretSnapshotData.secretVersions.map((encryptedSecretVersion: EncrypetedSecretVersionListProps, pos: number) => {
return {
id: encryptedSecretVersion._id,
pos: pos,
type: encryptedSecretVersion.type,
environment: encryptedSecretVersion.environment,
key: decryptSymmetric({
ciphertext: encryptedSecretVersion.secretKeyCiphertext,
iv: encryptedSecretVersion.secretKeyIV,
tag: encryptedSecretVersion.secretKeyTag,
key: decryptedLatestKey
}),
value: decryptSymmetric({
ciphertext: encryptedSecretVersion.secretValueCiphertext,
iv: encryptedSecretVersion.secretValueIV,
tag: encryptedSecretVersion.secretValueTag,
key: decryptedLatestKey
})
}
})
setSnapshotData({ id: secretSnapshotData._id, createdAt: secretSnapshotData.createdAt, secretVersions: decryptedSecretVersions })
}
return <div className={`absolute border-l border-mineshaft-500 ${isLoading ? "bg-bunker-800" : "bg-bunker"} fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between`}>
{isLoading ? (
<div className="flex items-center justify-center h-full mb-8">
<Image
src="/images/loading/loading.gif"
height={60}
width={100}
alt="infisical loading indicator"
></Image>
</div>
) : (
<div className='h-min overflow-y-auto'>
<div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
<p className="font-semibold text-lg text-bunker-200">{t("Point-in-time Recovery")}</p>
<div className='p-1' onClick={() => toggleSidebar(false)}>
<FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
</div>
</div>
<div className='flex flex-col px-2 py-2'>
{secretSnapshotsMetadata?.map((snapshot: SnaphotProps, id: number) => <div key={snapshot._id} className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "bg-primary text-black" : "bg-mineshaft-700"} py-3 px-4 mb-2 rounded-md flex flex-row justify-between items-center`}>
<div className="flex flex-row items-start">
<div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800" : "text-bunker-200"} text-sm mr-1.5`}>{timeSince(new Date(snapshot.createdAt))}</div>
<div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-900" : "text-bunker-300"} text-sm `}>{" - " + snapshot.secretVersions.length + " Secrets"}</div>
</div>
<div
onClick={() => exploreSnapshot({ snapshotId: snapshot._id })}
className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800 pointer-events-none" : "text-bunker-200 hover:text-primary duration-200 cursor-pointer"} text-sm`}>
{id == 0 ? "Current Version" : chosenSnapshot == snapshot._id ? "Currently Viewing" : "Explore"}
</div>
</div>)}
<div className='flex justify-center w-full mb-14'>
<div className='items-center w-40'>
<Button text="View More" textDisabled="End of History" active={secretSnapshotsMetadata.length % 15 == 0 ? true : false} onButtonPressed={loadMoreSnapshots} size="md" color="mineshaft"/>
</div>
</div>
</div>
</div>
)}
</div>
};
export default PITRecoverySidebar;

247
frontend/pages/dashboard/[id].tsx
View File

@ -6,8 +6,9 @@ import { useTranslation } from "next-i18next";
import {
faArrowDownAZ,
faArrowDownZA,
faArrowLeft,
faCheck,
faCopy,
faClockRotateLeft,
faDownload,
faEye,
faEyeSlash,
@ -16,6 +17,8 @@ import {
faPlus,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import getProjectSercetSnapshotsCount from 'ee/api/secrets/GetProjectSercetSnapshotsCount';
import PITRecoverySidebar from 'ee/components/PITRecoverySidebar';
import Button from '~/components/basic/buttons/Button';
import ListBox from '~/components/basic/Listbox';
@ -30,12 +33,13 @@ import pushKeys from '~/components/utilities/secrets/pushKeys';
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
import guidGenerator from '~/utilities/randomId';
import { envMapping } from '../../public/data/frequentConstants';
import { envMapping, reverseEnvMapping } from '../../public/data/frequentConstants';
import getUser from '../api/user/getUser';
import checkUserAction from '../api/userActions/checkUserAction';
import registerUserAction from '../api/userActions/registerUserAction';
import getWorkspaces from '../api/workspace/getWorkspaces';
const queryString = require("query-string");
interface SecretDataProps {
type: 'personal' | 'shared';
@ -46,6 +50,19 @@ interface SecretDataProps {
comment: string;
}
interface SnapshotProps {
id: string;
createdAt: string;
secretVersions: {
id: string;
pos: number;
type: "personal" | "shared";
environment: string;
key: string;
value: string;
}[];
}
/**
* this function finds the teh duplicates in an array
* @param arr - array of anything (e.g., with secret keys and types (personal/shared))
@ -76,21 +93,20 @@ export default function Dashboard() {
const [workspaceId, setWorkspaceId] = useState('');
const [blurred, setBlurred] = useState(true);
const [isKeyAvailable, setIsKeyAvailable] = useState(true);
const [env, setEnv] = useState(
router.asPath.split('?').length == 1
? 'Development'
: Object.keys(envMapping).includes(router.asPath.split('?')[1])
? router.asPath.split('?')[1]
: 'Development'
);
const [env, setEnv] = useState('Development');
const [snapshotEnv, setSnapshotEnv] = useState('Development');
const [isNew, setIsNew] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [searchKeys, setSearchKeys] = useState('');
const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
const [sortMethod, setSortMethod] = useState('alphabetical');
const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
const [sidebarSecretId, toggleSidebar] = useState("None");
const [PITSidebarOpen, togglePITSidebar] = useState(false);
const [sharedToHide, setSharedToHide] = useState<string[]>([]);
const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
const [numSnapshots, setNumSnapshots] = useState<number>();
const { t } = useTranslation();
const { createNotification } = useNotificationContext();
@ -141,17 +157,39 @@ export default function Dashboard() {
useEffect(() => {
(async () => {
try {
console.log(1, 'reloaded')
const tempNumSnapshots = await getProjectSercetSnapshotsCount({ workspaceId: String(router.query.id) })
setNumSnapshots(tempNumSnapshots);
const userWorkspaces = await getWorkspaces();
const listWorkspaces = userWorkspaces.map((workspace) => workspace._id);
if (
!listWorkspaces.includes(router.asPath.split('/')[2].split('?')[0])
!listWorkspaces.includes(router.asPath.split('/')[2])
) {
router.push('/dashboard/' + listWorkspaces[0]);
}
if (env != router.asPath.split('?')[1]) {
router.push(router.asPath.split('?')[0] + '?' + env);
}
const user = await getUser();
setIsNew(
(Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
? true
: false
);
const userAction = await checkUserAction({
action: 'first_time_secrets_pushed'
});
setHasUserEverPushed(userAction ? true : false);
} catch (error) {
console.log('Error', error);
setData(undefined);
}
})();
}, []);
useEffect(() => {
(async () => {
try {
setIsLoading(true);
setBlurred(true);
setWorkspaceId(String(router.query.id));
@ -173,18 +211,7 @@ export default function Dashboard() {
dataToSort?.map((item) => item.key).indexOf(item)
).includes(row.key) && row.type == 'shared'))?.map((item) => item.id)
)
const user = await getUser();
setIsNew(
(Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
? true
: false
);
const userAction = await checkUserAction({
action: 'first_time_secrets_pushed'
});
setHasUserEverPushed(userAction ? true : false);
setIsLoading(false);
} catch (error) {
console.log('Error', error);
setData(undefined);
@ -321,12 +348,21 @@ export default function Dashboard() {
/**
* Save the changes of environment variables and push them to the database
*/
const savePush = async () => {
// Format the new object with environment variables
const obj = Object.assign(
{},
...data!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment] }))
);
const savePush = async (dataToPush?: any[], envToPush?: string) => {
let obj;
// dataToPush is mostly used for rollbacks, otherwise we always take the current state data
if ((dataToPush ?? [])?.length > 0) {
obj = Object.assign(
{},
...dataToPush!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''] }))
);
} else {
// Format the new object with environment variables
obj = Object.assign(
{},
...data!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''] }))
);
}
// Checking if any of the secret keys start with a number - if so, don't do anything
const nameErrors = !Object.keys(obj)
@ -350,13 +386,17 @@ export default function Dashboard() {
// Once "Save changed is clicked", disable that button
setButtonReady(false);
pushKeys({ obj, workspaceId: String(router.query.id), env });
console.log(envToPush ? envToPush : env, env, envToPush)
pushKeys({ obj, workspaceId: String(router.query.id), env: envToPush ? envToPush : env });
// If this user has never saved environment variables before, show them a prompt to read docs
if (!hasUserEverPushed) {
setCheckDocsPopUpVisible(true);
await registerUserAction({ action: 'first_time_secrets_pushed' });
}
// increasing the number of project commits
setNumSnapshots(numSnapshots ?? 0 + 1);
};
const addData = (newData: SecretDataProps[]) => {
@ -427,6 +467,11 @@ export default function Dashboard() {
setSharedToHide={setSharedToHide}
deleteRow={deleteCertainRow}
/>}
{PITSidebarOpen && <PITRecoverySidebar
toggleSidebar={togglePITSidebar}
chosenSnapshot={String(snapshotData?.id ? snapshotData.id : "")}
setSnapshotData={setSnapshotData}
/>}
<div className="w-full max-h-96 pb-2">
<NavHeader pageName={t("dashboard:title")} isProjectRelated={true} />
{checkDocsPopUpVisible && (
@ -441,9 +486,22 @@ export default function Dashboard() {
/>
)}
<div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
{snapshotData &&
<div className={`flex justify-start max-w-sm mt-1 mr-2`}>
<Button
text={String(t("Go back to current"))}
onButtonPressed={() => setSnapshotData(undefined)}
color="mineshaft"
size="md"
icon={faArrowLeft}
/>
</div>}
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4 mt-1">{t("dashboard:title")}</p>
{data?.length == 0 && (
<div className="font-semibold mr-4 mt-1 flex flex-row items-center">
<p>{snapshotData ? "Secret Snapshot" : t("dashboard:title")}</p>
{snapshotData && <span className='bg-primary-800 text-sm ml-4 mt-1 px-1.5 rounded-md'>{new Date(snapshotData.createdAt).toLocaleString()}</span>}
</div>
{!snapshotData && data?.length == 0 && (
<ListBox
selected={env}
data={['Development', 'Staging', 'Production', 'Testing']}
@ -452,8 +510,17 @@ export default function Dashboard() {
)}
</div>
<div className="flex flex-row">
{(data?.length !== 0 || buttonReady) && (
<div className={`flex justify-start max-w-sm mt-2`}>
<div className={`flex justify-start max-w-sm mt-1 mr-2`}>
<Button
text={String(numSnapshots + " " + t("Commits"))}
onButtonPressed={() => togglePITSidebar(true)}
color="mineshaft"
size="md"
icon={faClockRotateLeft}
/>
</div>
{(data?.length !== 0 || buttonReady) && !snapshotData && (
<div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t("common:save-changes"))}
onButtonPressed={savePush}
@ -465,18 +532,64 @@ export default function Dashboard() {
/>
</div>
)}
{snapshotData && <div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t("Rollback to this snapshot"))}
onButtonPressed={async () => {
const envsToRollback = snapshotData.secretVersions.map(sv => sv.environment).filter((v, i, a) => a.indexOf(v) === i);
// Update secrets in the state only for the current environment
setData(
snapshotData.secretVersions
.filter(row => reverseEnvMapping[row.environment] == env)
.map((sv, position) => {
return {
id: sv.id, pos: position, type: sv.type, key: sv.key, value: sv.value, comment: ''
}
})
);
// Rollback each of the environments in the snapshot
// #TODO: clean up other environments
envsToRollback.map(async (envToRollback) => {
await savePush(
snapshotData.secretVersions
.filter(row => row.environment == envToRollback)
.map((sv, position) => {
return {id: sv.id, pos: position, type: sv.type, key: sv.key, value: sv.value, comment: ''}
}),
reverseEnvMapping[envToRollback]
);
});
setSnapshotData(undefined);
createNotification({
text: `Rollback has been performed successfully.`,
type: 'success'
});
}}
color="primary"
size="md"
active={buttonReady}
/>
</div>}
</div>
</div>
<div className="mx-6 w-full pr-12">
<div className="flex flex-col max-w-5xl pb-1">
<div className="w-full flex flex-row items-start">
{data?.length !== 0 && (
{(!snapshotData || data?.length !== 0) && (
<>
<ListBox
{!snapshotData
? <ListBox
selected={env}
data={['Development', 'Staging', 'Production', 'Testing']}
onChange={setEnv}
/>
: <ListBox
selected={snapshotEnv}
data={['Development', 'Staging', 'Production', 'Testing']}
onChange={setSnapshotEnv}
/>}
<div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 flex items-center rounded-md flex flex-row items-center">
<FontAwesomeIcon
className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
@ -489,7 +602,7 @@ export default function Dashboard() {
placeholder={String(t("dashboard:search-keys"))}
/>
</div>
<div className="ml-2 min-w-max flex flex-row items-start justify-start">
{!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
<Button
onButtonPressed={() => reorderRows(1)}
color="mineshaft"
@ -500,15 +613,15 @@ export default function Dashboard() {
: faArrowDownZA
}
/>
</div>
<div className="ml-2 min-w-max flex flex-row items-start justify-start">
</div>}
{!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
<Button
onButtonPressed={download}
color="mineshaft"
size="icon-md"
icon={faDownload}
/>
</div>
</div>}
<div className="ml-2 min-w-max flex flex-row items-start justify-start">
<Button
onButtonPressed={changeBlurred}
@ -517,7 +630,7 @@ export default function Dashboard() {
icon={blurred ? faEye : faEyeSlash}
/>
</div>
<div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
{!snapshotData && <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
<Button
text={String(t("dashboard:add-key"))}
onButtonPressed={addRow}
@ -531,18 +644,29 @@ export default function Dashboard() {
<span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
</span>
)}
</div>
</div>}
</>
)}
</div>
</div>
{data?.length !== 0 ? (
{isLoading ? (
<div className="flex items-center justify-center h-full my-48">
<Image
src="/images/loading/loading.gif"
height={60}
width={100}
alt="infisical loading indicator"
></Image>
</div>
) : (
data?.length !== 0 ? (
<div className="flex flex-col w-full mt-1 mb-2">
<div
className={`max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar`}
>
<div className="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
{data?.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
{!snapshotData && data?.filter(row => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
@ -552,10 +676,33 @@ export default function Dashboard() {
isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
toggleSidebar={toggleSidebar}
sidebarSecretId={sidebarSecretId}
isSnapshot={false}
/>
))}
{snapshotData && snapshotData.secretVersions?.sort((a, b) => a.key.localeCompare(b.key))
.filter(row => reverseEnvMapping[row.environment] == snapshotEnv)
.filter(row => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
.filter(row => !(snapshotData.secretVersions?.filter(row => (snapshotData.secretVersions
?.map((item) => item.key)
.filter(
(item, index) =>
index !==
snapshotData.secretVersions?.map((item) => item.key).indexOf(item)
).includes(row.key) && row.type == 'shared'))?.map((item) => item.id).includes(row.id) && row.type == 'shared')).map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
modifyValue={listenChangeValue}
modifyKey={listenChangeKey}
isBlurred={blurred}
isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
toggleSidebar={toggleSidebar}
sidebarSecretId={sidebarSecretId}
isSnapshot={true}
/>
))}
</div>
<div className="w-full max-w-5xl px-2 pt-3">
{!snapshotData && <div className="w-full max-w-5xl px-2 pt-3">
<DropZone
setData={addData}
setErrorDragAndDrop={setErrorDragAndDrop}
@ -565,12 +712,12 @@ export default function Dashboard() {
keysExist={true}
numCurrentRows={data.length}
/>
</div>
</div>}
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
{isKeyAvailable && (
{isKeyAvailable && !snapshotData && (
<DropZone
setData={setData}
setErrorDragAndDrop={setErrorDragAndDrop}
@ -599,7 +746,7 @@ export default function Dashboard() {
</>
))}
</div>
)}
))}
</div>
</div>
</div>

3
frontend/public/locales/en/activity.json
View File

@ -2,6 +2,7 @@
"event": {
"readSecrets": "Secrets Viewed",
"updateSecrets": "Secrets Updated",
"addSecrets": "Secrets Added"
"addSecrets": "Secrets Added",
"deleteSecrets": "Secrets Deleted"
}
}