feat: add select columns (f2eb83a0) · Commits · INJECT / frontend

analyst/src/components/Plots/TimeScatterPlot/TimeRangeSelector/index.tsx

+43 −30

Original line number	Diff line number	Diff line
		@@ -4,6 +4,7 @@ import { css, cx } from '@emotion/css'
		import { Timestamp, useTimeFormat } from '@inject/shared'
		import {
		useContext,
		useEffect,
		useState,
		type Dispatch,
		type FC,
		@@ -34,6 +35,9 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		selectedTimeRangeInitialStart,
		selectedTimeRangeInitialEnd,
		])
		useEffect(() => {
		setSliderRange([selectedTimeRangeInitialStart, selectedTimeRangeInitialEnd])
		}, [selectedTimeRangeInitialStart, selectedTimeRangeInitialEnd])

		const labelRenderer = (
		value: number,
		@@ -90,6 +94,9 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		[css`
		text-align: center;
		`]: true,
		[css`
		margin-top: -3.2rem;
		`]: !opts?.isHandleTooltip,
		[css`
		white-space: nowrap;
		`]: timeFormat !== 'absolute' \|\| !opts?.isHandleTooltip,
		@@ -110,6 +117,11 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		).sort((a, b) => a - b)

		return (
		<div
		className={css`
		padding: 2.5rem 5rem 0 5rem;
		`}
		>
		<div
		className={css`
		position: relative;
		@@ -146,5 +158,6 @@ export const TimeRangeSelector: FC<TimeRangeSelectorProps> = ({
		Select Time Range
		</span>
		</div>
		</div>
		)
		}

analyst/src/components/SandboxLogsTable/index.tsx

+3 −83

Original line number	Diff line number	Diff line
		import { css } from '@emotion/css'
		import type { Column, Row } from '@inject/shared'
		import {
		SortingOrder,
		stringSortingFunction,
		Table,
		Timestamp,
		timestampSortingFunction,
		} from '@inject/shared'
		import { Table } from '@inject/shared'
		import type { FC } from 'react'
		import type { SandboxLogChecked } from './types'

		const centerChildren = css`
		display: flex;
		justify-content: center;
		align-items: center;
		`

		interface SandboxLogsTableProps {
		sandboxLogs: SandboxLogChecked[]
		allTeamsTab: boolean
		columns: Column<SandboxLogChecked>[]
		}

		export const SandboxLogsTable: FC<SandboxLogsTableProps> = ({
		sandboxLogs,
		allTeamsTab,
		columns,
		}) => {
		const columns: Column<SandboxLogChecked>[] = [
		{
		id: 'team-name',
		name: 'Team',
		display: allTeamsTab,
		renderValue: log => log.team.name,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.team.name, b.team.name),
		},
		{
		id: 'timestamp',
		name: 'Time',
		renderValue: log => (
		<div className={centerChildren}>
		<Timestamp
		formatTimestampProps={{
		timestamp: log.timestamp,
		inExerciseTime: log.inExerciseTime,
		minimal: true,
		}}
		/>
		</div>
		),
		sortingFunction: (a, b) =>
		timestampSortingFunction(a.timestamp, b.timestamp),
		defaultSortingOrder: SortingOrder.DESC,
		},
		{
		id: 'command',
		name: 'Command',
		renderValue: log => log.details.cmd,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.cmd, b.details.cmd),
		},
		{
		id: 'source',
		name: 'Source',
		renderValue: log => log.details.cmdSource,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.cmdSource, b.details.cmdSource),
		},
		{
		id: 'directory',
		name: 'Directory',
		renderValue: log => log.details.workingDirectory,
		sortingFunction: (a, b) =>
		stringSortingFunction(
		a.details.workingDirectory,
		b.details.workingDirectory
		),
		},
		{
		id: 'username',
		name: 'Username',
		renderValue: log => log.details.username,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.username, b.details.username),
		},
		{
		id: 'container',
		name: 'Container',
		renderValue: log => log.details.container,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.container, b.details.container),
		},
		]

		const rows: Row<SandboxLogChecked>[] = sandboxLogs.map(log => ({
		id: log.id,
		value: log,

analyst/src/components/SandboxLogsTable/useSandboxLogsColumns.tsx

0 → 100644

+109 −0

Original line number	Diff line number	Diff line
		import { css } from '@emotion/css'
		import type { Column } from '@inject/shared'
		import {
		SortingOrder,
		stringSortingFunction,
		Timestamp,
		timestampSortingFunction,
		} from '@inject/shared'
		import { useEffect, useState } from 'react'
		import type { SandboxLogChecked } from './types'

		const centerChildren = css`
		display: flex;
		justify-content: center;
		align-items: center;
		`

		export const useSandboxLogsColumns = ({
		selectedTeamId,
		}: {
		selectedTeamId: string \| null
		}) => {
		const columnsInitial: Column<SandboxLogChecked>[] = [
		{
		id: 'team-name',
		name: 'Team',
		display: selectedTeamId === null,
		renderValue: log => log.team.name,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.team.name, b.team.name),
		},
		{
		id: 'timestamp',
		name: 'Time',
		display: true,
		renderValue: log => (
		<div className={centerChildren}>
		<Timestamp
		formatTimestampProps={{
		timestamp: log.timestamp,
		inExerciseTime: log.inExerciseTime,
		minimal: true,
		}}
		/>
		</div>
		),
		sortingFunction: (a, b) =>
		timestampSortingFunction(a.timestamp, b.timestamp),
		defaultSortingOrder: SortingOrder.DESC,
		},
		{
		id: 'command',
		name: 'Command',
		display: true,
		renderValue: log => log.details.cmd,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.cmd, b.details.cmd),
		},
		{
		id: 'source',
		name: 'Source',
		display: true,
		renderValue: log => log.details.cmdSource,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.cmdSource, b.details.cmdSource),
		},
		{
		id: 'directory',
		name: 'Directory',
		display: true,
		renderValue: log => log.details.workingDirectory,
		sortingFunction: (a, b) =>
		stringSortingFunction(
		a.details.workingDirectory,
		b.details.workingDirectory
		),
		},
		{
		id: 'username',
		name: 'Username',
		display: true,
		renderValue: log => log.details.username,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.username, b.details.username),
		},
		{
		id: 'container',
		name: 'Container',
		display: true,
		renderValue: log => log.details.container,
		sortingFunction: (a, b) =>
		stringSortingFunction(a.details.container, b.details.container),
		},
		]
		const [columns, setColumns] = useState(columnsInitial)

		// set team column display true if no team selected (all teams tab)
		useEffect(() => {
		setColumns(prev =>
		prev.map(column =>
		column.id === 'team-name'
		? { ...column, display: selectedTeamId === null }
		: column
		)
		)
		}, [selectedTeamId])

		return { columns, setColumns }
		}

analyst/src/components/ToolUsage/InTimeToolUsage/Plot.tsx

+6 −12

Original line number	Diff line number	Diff line
		@@ -91,11 +91,6 @@ const Plot = () => {
		flex-direction: column;
		height: 100%;
		`}
		>
		<div
		className={css`
		padding: 0.5rem 4rem 0 4rem;
		`}
		>
		<TimeRangeSelector
		earliestStartTime={earliestStartTime}
		@@ -103,7 +98,6 @@ const Plot = () => {
		selectedTimeRangeInitialEnd={selectedTimeRangeInitialEnd}
		setSelectedTimeRange={setSelectedTimeRange}
		/>
		</div>
		<div
		className={css`
		flex: 1;

analyst/src/routes/_layout/$exerciseId/action-logs.tsx

+6 −12

Original line number	Diff line number	Diff line
		@@ -68,18 +68,12 @@ const RouteComponent = () => {
		</div>
		</div>

		<div
		className={css`
		padding: 0.5rem 4rem 0 4rem;
		`}
		>
		<TimeRangeSelector
		earliestStartTime={earliestStartTime}
		selectedTimeRangeInitialStart={selectedTimeRangeInitialStart}
		selectedTimeRangeInitialEnd={selectedTimeRangeInitialEnd}
		setSelectedTimeRange={setSelectedTimeRange}
		/>
		</div>

		<Divider />