Add experiment button
This commit is contained in:
30
app/src/components/requestLogs/ActionButton.tsx
Normal file
30
app/src/components/requestLogs/ActionButton.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import { Button, HStack, type ButtonProps, Icon, Text } from "@chakra-ui/react";
|
||||||
|
import { type IconType } from "react-icons";
|
||||||
|
|
||||||
|
const ActionButton = ({
|
||||||
|
icon,
|
||||||
|
label,
|
||||||
|
...buttonProps
|
||||||
|
}: { icon: IconType; label: string } & ButtonProps) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
colorScheme="blue"
|
||||||
|
color="black"
|
||||||
|
bgColor="white"
|
||||||
|
borderColor="gray.300"
|
||||||
|
borderRadius={4}
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="normal"
|
||||||
|
{...buttonProps}
|
||||||
|
>
|
||||||
|
<HStack spacing={1}>
|
||||||
|
{icon && <Icon as={icon} />}
|
||||||
|
<Text>{label}</Text>
|
||||||
|
</HStack>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ActionButton;
|
||||||
@@ -1,10 +1,14 @@
|
|||||||
import { Text, VStack, Divider } from "@chakra-ui/react";
|
import { Text, VStack, Divider, HStack } from "@chakra-ui/react";
|
||||||
|
|
||||||
import AppShell from "~/components/nav/AppShell";
|
import AppShell from "~/components/nav/AppShell";
|
||||||
import LoggedCallTable from "~/components/requestLogs/LoggedCallsTable";
|
import LoggedCallTable from "~/components/requestLogs/LoggedCallsTable";
|
||||||
import LoggedCallsPaginator from "~/components/requestLogs/LoggedCallsPaginator";
|
import LoggedCallsPaginator from "~/components/requestLogs/LoggedCallsPaginator";
|
||||||
|
import ActionButton from "~/components/requestLogs/ActionButton";
|
||||||
|
import { useAppStore } from "~/state/store";
|
||||||
|
import { RiFlaskLine } from "react-icons/ri";
|
||||||
|
|
||||||
export default function LoggedCalls() {
|
export default function LoggedCalls() {
|
||||||
|
const selectedLogIds = useAppStore((s) => s.selectedLogs.selectedLogIds);
|
||||||
return (
|
return (
|
||||||
<AppShell title="Request Logs" requireAuth>
|
<AppShell title="Request Logs" requireAuth>
|
||||||
<VStack px={8} py={8} alignItems="flex-start" spacing={4} w="full">
|
<VStack px={8} py={8} alignItems="flex-start" spacing={4} w="full">
|
||||||
@@ -12,6 +16,16 @@ export default function LoggedCalls() {
|
|||||||
Request Logs
|
Request Logs
|
||||||
</Text>
|
</Text>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
<HStack w="full" justifyContent="flex-end">
|
||||||
|
<ActionButton
|
||||||
|
onClick={() => {
|
||||||
|
console.log("experimenting with these ids", selectedLogIds);
|
||||||
|
}}
|
||||||
|
label="Experiment"
|
||||||
|
icon={RiFlaskLine}
|
||||||
|
isDisabled={selectedLogIds.size === 0}
|
||||||
|
/>
|
||||||
|
</HStack>
|
||||||
<LoggedCallTable />
|
<LoggedCallTable />
|
||||||
<LoggedCallsPaginator />
|
<LoggedCallsPaginator />
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|||||||
Reference in New Issue
Block a user