Updated logs-viewer and retraced libs (#809)

updated logs-viewer and retraced libs, tweaked env vars since NEXT_PUBLIC env vars are build time only
This commit is contained in:
Deepak Prabhakara 2023-01-04 17:51:06 +00:00 committed by GitHub
parent 7868bc251f
commit dbafe0649f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 366 additions and 2031 deletions

View File

@ -27,6 +27,11 @@ NEXTAUTH_URL=
NEXTAUTH_SECRET=
NEXTAUTH_ACL=
# Admin Port for Retraced
RETRACED_HOST_URL=
RETRACED_EXTERNAL_URL=
RETRACED_ADMIN_ROOT_TOKEN=
# OpenTelemetry
OTEL_EXPORTER_OTLP_METRICS_ENDPOINT=
OTEL_EXPORTER_OTLP_METRICS_HEADERS=
@ -62,7 +67,3 @@ BOXYHQ_LICENSE_KEY=
# To turn off our anonymous analytics uncomment the line below
#BOXYHQ_NO_ANALYTICS=1
# Retraced
NEXT_PUBLIC_RETRACED_HOST=
RETRACED_ADMIN_ROOT_TOKEN=

View File

@ -6,10 +6,9 @@ import type { Project } from 'types/retraced';
import ErrorMessage from '@components/Error';
import Loading from '@components/Loading';
import { fetcher } from '@lib/ui/utils';
import { retracedOptions } from '@lib/env';
const LogsViewer = (props: { project: Project; environmentId: string; groupId: string }) => {
const { project, environmentId, groupId } = props;
const LogsViewer = (props: { project: Project; environmentId: string; groupId: string; host: string }) => {
const { project, environmentId, groupId, host } = props;
const token = project.tokens.filter((token) => token.environment_id === environmentId)[0];
@ -35,7 +34,7 @@ const LogsViewer = (props: { project: Project; environmentId: string; groupId: s
<>
{viewerToken && (
<RetracedEventsBrowser
host={`${retracedOptions?.host}/viewer/v1`}
host={`${host}/viewer/v1`}
auditLogToken={viewerToken}
header='Audit Logs'
customClass={'text-primary dark:text-white'}

View File

@ -1,20 +1,19 @@
import type { Project } from 'types/retraced';
import { retracedOptions } from '@lib/env';
import CodeSnippet from '@components/retraced/CodeSnippet';
import { useState } from 'react';
import { Select } from 'react-daisyui';
import { InputWithCopyButton } from '@components/ClipboardButton';
import { useTranslation } from 'next-i18next';
const ProjectDetails = (props: { project: Project }) => {
const ProjectDetails = (props: { project: Project; host?: string }) => {
const { t } = useTranslation('common');
const { project } = props;
const { project, host } = props;
const { environments, tokens } = project;
const [selectedIndex, setSelectedIndex] = useState(0);
const baseUrl = `${retracedOptions?.host}/publisher/v1/project/${project.id}`;
const baseUrl = `${host!}/publisher/v1/project/${project.id}`;
return (
<>

View File

@ -18,7 +18,8 @@ if (process.env.DB_SSL === 'true') {
// Retraced
const retraced = {
host: process.env.RETRACED_HOST,
hostUrl: process.env.RETRACED_HOST_URL,
externalUrl: process.env.RETRACED_EXTERNAL_URL || process.env.RETRACED_HOST_URL,
adminToken: process.env.RETRACED_ADMIN_ROOT_TOKEN,
};

View File

@ -13,7 +13,7 @@ export const getToken = async (req: NextApiRequest): Promise<AdminToken> => {
});
const { data } = await axios.post<{ adminToken: AdminToken }>(
`${retracedOptions?.host}/admin/v1/user/_login`,
`${retracedOptions?.hostUrl}/admin/v1/user/_login`,
{
claims: {
upstreamToken: 'ADMIN_ROOT_TOKEN',

99
npm/package-lock.json generated
View File

@ -1647,7 +1647,7 @@
},
"node_modules/@cspotcode/source-map-support": {
"version": "0.8.1",
"devOptional": true,
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/trace-mapping": "0.3.9"
@ -1658,7 +1658,7 @@
},
"node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
"version": "0.3.9",
"devOptional": true,
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.0.3",
@ -1843,7 +1843,7 @@
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.0",
"devOptional": true,
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@ -1859,7 +1859,7 @@
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.14",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
@ -2021,22 +2021,22 @@
},
"node_modules/@tsconfig/node10": {
"version": "1.0.9",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/@tsconfig/node12": {
"version": "1.0.11",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/@tsconfig/node14": {
"version": "1.0.3",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/@tsconfig/node16": {
"version": "1.0.3",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/@types/es-aggregate-error": {
@ -2297,7 +2297,7 @@
},
"node_modules/acorn": {
"version": "8.8.0",
"devOptional": true,
"dev": true,
"license": "MIT",
"bin": {
"acorn": "bin/acorn"
@ -2317,7 +2317,7 @@
},
"node_modules/acorn-walk": {
"version": "8.2.0",
"devOptional": true,
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.4.0"
@ -2423,7 +2423,7 @@
},
"node_modules/arg": {
"version": "4.1.3",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/argparse": {
@ -2883,7 +2883,7 @@
},
"node_modules/create-require": {
"version": "1.1.1",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/cross-env": {
@ -4705,7 +4705,7 @@
},
"node_modules/make-error": {
"version": "1.3.6",
"devOptional": true,
"dev": true,
"license": "ISC"
},
"node_modules/marked": {
@ -8242,7 +8242,7 @@
},
"node_modules/ts-node": {
"version": "10.9.1",
"devOptional": true,
"dev": true,
"license": "MIT",
"dependencies": {
"@cspotcode/source-map-support": "^0.8.0",
@ -8284,7 +8284,7 @@
},
"node_modules/ts-node/node_modules/diff": {
"version": "4.0.2",
"devOptional": true,
"dev": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.3.1"
@ -8538,7 +8538,7 @@
"version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
"devOptional": true,
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -8636,7 +8636,7 @@
},
"node_modules/v8-compile-cache-lib": {
"version": "3.0.1",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/webidl-conversions": {
@ -8919,7 +8919,7 @@
},
"node_modules/yn": {
"version": "3.1.1",
"devOptional": true,
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
@ -10214,14 +10214,14 @@
},
"@cspotcode/source-map-support": {
"version": "0.8.1",
"devOptional": true,
"dev": true,
"requires": {
"@jridgewell/trace-mapping": "0.3.9"
},
"dependencies": {
"@jridgewell/trace-mapping": {
"version": "0.3.9",
"devOptional": true,
"dev": true,
"requires": {
"@jridgewell/resolve-uri": "^3.0.3",
"@jridgewell/sourcemap-codec": "^1.4.10"
@ -10348,7 +10348,7 @@
},
"@jridgewell/resolve-uri": {
"version": "3.1.0",
"devOptional": true
"dev": true
},
"@jridgewell/set-array": {
"version": "1.1.2",
@ -10356,7 +10356,7 @@
},
"@jridgewell/sourcemap-codec": {
"version": "1.4.14",
"devOptional": true
"dev": true
},
"@jridgewell/trace-mapping": {
"version": "0.3.14",
@ -10399,8 +10399,7 @@
"@redis/bloom": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.1.0.tgz",
"integrity": "sha512-9QovlxmpRtvxVbN0UBcv8WfdSMudNZZTFqCsnBszcQXqaZb/TVe30ScgGEO7u1EAIacTPAo7/oCYjYAxiHLanQ==",
"requires": {}
"integrity": "sha512-9QovlxmpRtvxVbN0UBcv8WfdSMudNZZTFqCsnBszcQXqaZb/TVe30ScgGEO7u1EAIacTPAo7/oCYjYAxiHLanQ=="
},
"@redis/client": {
"version": "1.4.2",
@ -10415,22 +10414,18 @@
"@redis/graph": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.0.tgz",
"integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==",
"requires": {}
"integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg=="
},
"@redis/json": {
"version": "1.0.4",
"requires": {}
"version": "1.0.4"
},
"@redis/search": {
"version": "1.1.0",
"requires": {}
"version": "1.1.0"
},
"@redis/time-series": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.4.tgz",
"integrity": "sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==",
"requires": {}
"integrity": "sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng=="
},
"@sinonjs/commons": {
"version": "2.0.0",
@ -10482,19 +10477,19 @@
},
"@tsconfig/node10": {
"version": "1.0.9",
"devOptional": true
"dev": true
},
"@tsconfig/node12": {
"version": "1.0.11",
"devOptional": true
"dev": true
},
"@tsconfig/node14": {
"version": "1.0.3",
"devOptional": true
"dev": true
},
"@tsconfig/node16": {
"version": "1.0.3",
"devOptional": true
"dev": true
},
"@types/es-aggregate-error": {
"version": "1.0.2",
@ -10658,18 +10653,17 @@
},
"acorn": {
"version": "8.8.0",
"devOptional": true
"dev": true
},
"acorn-jsx": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
"dev": true,
"requires": {}
"dev": true
},
"acorn-walk": {
"version": "8.2.0",
"devOptional": true
"dev": true
},
"agent-base": {
"version": "6.0.2",
@ -10735,7 +10729,7 @@
},
"arg": {
"version": "4.1.3",
"devOptional": true
"dev": true
},
"argparse": {
"version": "2.0.1"
@ -11016,7 +11010,7 @@
},
"create-require": {
"version": "1.1.1",
"devOptional": true
"dev": true
},
"cross-env": {
"version": "7.0.3",
@ -11252,8 +11246,7 @@
},
"eslint-config-prettier": {
"version": "8.5.0",
"dev": true,
"requires": {}
"dev": true
},
"eslint-scope": {
"version": "5.1.1",
@ -12212,7 +12205,7 @@
},
"make-error": {
"version": "1.3.6",
"devOptional": true
"dev": true
},
"marked": {
"version": "4.2.5",
@ -12704,8 +12697,7 @@
"version": "1.0.1"
},
"pg-pool": {
"version": "3.5.2",
"requires": {}
"version": "3.5.2"
},
"pg-protocol": {
"version": "1.5.0"
@ -14383,8 +14375,7 @@
"ws": {
"version": "7.5.7",
"bundled": true,
"dev": true,
"requires": {}
"dev": true
},
"yallist": {
"version": "4.0.0",
@ -14541,7 +14532,7 @@
},
"ts-node": {
"version": "10.9.1",
"devOptional": true,
"dev": true,
"requires": {
"@cspotcode/source-map-support": "^0.8.0",
"@tsconfig/node10": "^1.0.7",
@ -14560,7 +14551,7 @@
"dependencies": {
"diff": {
"version": "4.0.2",
"devOptional": true
"dev": true
}
}
},
@ -14678,7 +14669,7 @@
"version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
"devOptional": true
"dev": true
},
"unbox-primitive": {
"version": "1.0.2",
@ -14737,7 +14728,7 @@
},
"v8-compile-cache-lib": {
"version": "3.0.1",
"devOptional": true
"dev": true
},
"webidl-conversions": {
"version": "7.0.0",
@ -14930,7 +14921,7 @@
},
"yn": {
"version": "3.1.1",
"devOptional": true
"dev": true
},
"yocto-queue": {
"version": "0.1.0",

2205
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -52,13 +52,14 @@
"@opentelemetry/resources": "1.8.0",
"@opentelemetry/sdk-metrics": "1.8.0",
"@opentelemetry/semantic-conventions": "1.8.0",
"@retraced-hq/logs-viewer": "2.3.0",
"@retraced-hq/retraced": "0.4.6",
"@retraced-hq/logs-viewer": "2.4.1",
"@retraced-hq/retraced": "0.5.0",
"@tailwindcss/typography": "0.5.8",
"axios": "1.2.2",
"classnames": "2.3.2",
"cors": "2.8.5",
"daisyui": "2.46.1",
"i18next": "22.4.8",
"micromatch": "4.0.5",
"next": "13.1.1",
"next-auth": "4.18.7",
@ -69,6 +70,8 @@
"react": "18.2.0",
"react-daisyui": "3.0.2",
"react-dom": "18.2.0",
"react-i18next": "12.1.1",
"react-router-dom": "6.6.1",
"react-syntax-highlighter": "15.5.0",
"sharp": "0.31.3",
"swr": "2.0.0"

View File

@ -6,17 +6,21 @@ import { retracedOptions } from '@lib/env';
import Loading from '@components/Loading';
import EmptyState from '@components/EmptyState';
const Retraced: NextPage = () => {
export interface Props {
host?: string;
}
const Retraced: NextPage<Props> = ({ host }: Props) => {
const router = useRouter();
useEffect(() => {
if (!retracedOptions?.host) {
if (!host) {
return;
}
router.push('/admin/retraced/projects');
}, [router]);
if (!retracedOptions?.host) {
if (!host) {
return (
<EmptyState
title='This feature has not been enabled.'
@ -32,6 +36,7 @@ export async function getServerSideProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
host: retracedOptions.externalUrl,
},
};
}

View File

@ -8,12 +8,17 @@ import Loading from '@components/Loading';
import ErrorMessage from '@components/Error';
import { LinkBack } from '@components/LinkBack';
import { Select } from 'react-daisyui';
import { retracedOptions } from '@lib/env';
const LogsViewer = dynamic(() => import('@components/retraced/LogsViewer'), {
ssr: false,
});
const Events: NextPage = () => {
export interface Props {
host?: string;
}
const Events: NextPage<Props> = ({ host }: Props) => {
const router = useRouter();
const [environment, setEnvironment] = useState('');
@ -94,7 +99,9 @@ const Events: NextPage = () => {
</div>
</div>
<div className='flex'>
{displayLogsViewer && <LogsViewer project={project} environmentId={environment} groupId={group} />}
{displayLogsViewer && (
<LogsViewer project={project} environmentId={environment} groupId={group} host={host!} />
)}
</div>
</div>
);
@ -104,6 +111,7 @@ export async function getServerSideProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
host: retracedOptions.externalUrl,
},
};
}

View File

@ -6,8 +6,13 @@ import { useProject } from '@lib/ui/retraced';
import Loading from '@components/Loading';
import ErrorMessage from '@components/Error';
import { LinkBack } from '@components/LinkBack';
import { retracedOptions } from '@lib/env';
const ProjectInfo: NextPage = () => {
export interface Props {
host?: string;
}
const ProjectInfo: NextPage<Props> = ({ host }: Props) => {
const router = useRouter();
const { id: projectId } = router.query;
@ -28,7 +33,7 @@ const ProjectInfo: NextPage = () => {
<div className='mb-2 mt-5 flex items-center justify-between'>
<h2 className='font-bold text-gray-700 dark:text-white md:text-xl'>{project?.name}</h2>
</div>
{project && <ProjectDetails project={project} />}
{project && <ProjectDetails project={project} host={host!} />}
</div>
);
};
@ -37,6 +42,7 @@ export async function getServerSideProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
host: retracedOptions?.externalUrl,
},
};
}

View File

@ -26,7 +26,7 @@ const getGroups = async (req: NextApiRequest, res: NextApiResponse) => {
const { id: projectId, environmentId } = req.query;
const { data } = await axios.get(
`${retracedOptions?.host}/admin/v1/project/${projectId}/groups?environment_id=${environmentId}`,
`${retracedOptions?.hostUrl}/admin/v1/project/${projectId}/groups?environment_id=${environmentId}`,
{
headers: {
Authorization: `id=${token.id} token=${token.token} admin_token=${retracedOptions.adminToken}`,

View File

@ -26,11 +26,14 @@ const getProject = async (req: NextApiRequest, res: NextApiResponse) => {
const { id } = req.query;
const { data } = await axios.get<{ project: Project }>(`${retracedOptions?.host}/admin/v1/project/${id}`, {
headers: {
Authorization: `id=${token.id} token=${token.token} admin_token=${retracedOptions.adminToken}`,
},
});
const { data } = await axios.get<{ project: Project }>(
`${retracedOptions?.hostUrl}/admin/v1/project/${id}`,
{
headers: {
Authorization: `id=${token.id} token=${token.token} admin_token=${retracedOptions.adminToken}`,
},
}
);
return res.status(201).json({
data,

View File

@ -27,7 +27,7 @@ const getViewerToken = async (req: NextApiRequest, res: NextApiResponse) => {
const retraced = new Retraced.Client({
apiKey: token as string,
projectId: projectId as string,
endpoint: retracedOptions?.host,
endpoint: retracedOptions?.hostUrl,
viewLogAction: 'audit.log.view',
});

View File

@ -29,7 +29,7 @@ const createProject = async (req: NextApiRequest, res: NextApiResponse) => {
const { name } = req.body;
const { data } = await axios.post<{ project: Project }>(
`${retracedOptions?.host}/admin/v1/project`,
`${retracedOptions?.hostUrl}/admin/v1/project`,
{
name,
},
@ -49,7 +49,7 @@ const createProject = async (req: NextApiRequest, res: NextApiResponse) => {
const getProjects = async (req: NextApiRequest, res: NextApiResponse) => {
const token = await getToken(req);
const { data } = await axios.get<{ projects: Project[] }>(`${retracedOptions?.host}/admin/v1/projects`, {
const { data } = await axios.get<{ projects: Project[] }>(`${retracedOptions?.hostUrl}/admin/v1/projects`, {
headers: {
Authorization: `id=${token.id} token=${token.token} admin_token=${retracedOptions.adminToken}`,
},

View File

@ -107,7 +107,3 @@ span.react-datepicker__navigation-icon {
margin: 0.4rem !important;
text-align: center !important;
}
.ReactModalPortal {
z-index: 10000;
}