nautobot 2.0.0a3__py3-none-any.whl → 2.0.0b1__py3-none-any.whl

nautobot/ui/src/components/JobHistoryTable.js

@@ -0,0 +1,78 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClock, faUser } from "@fortawesome/free-solid-svg-icons";
+import { Table, Tag, TagLabel, Tbody, Td, Tr } from "@nautobot/nautobot-ui";
+import { useGetRESTAPIQuery } from "@utils/api";
+import { humanFriendlyDate } from "@utils/date";
+
+function jobResultStatusTag(status) {
+    let variant = "unknown";
+    switch (status) {
+        case "FAILURE":
+        case "REVOKED":
+            variant = "critical";
+            break;
+        case "PENDING":
+        case "RECEIVED":
+            variant = "secondary";
+            break;
+        case "RETRY":
+            variant = "action";
+            break;
+        case "STARTED":
+            variant = "info";
+            break;
+        case "SUCCESS":
+            variant = "success";
+            break;
+        default:
+            variant = "unknown";
+            break;
+    }
+    return (
+        <Tag variant={variant}>
+            <TagLabel>{status}</TagLabel>
+        </Tag>
+    );
+}
+
+export default function JobHistoryTable() {
+    const { data, isError } = useGetRESTAPIQuery({
+        app_label: "extras",
+        model_name: "job-results",
+        limit: 10,
+        depth: 1,
+    });
+
+    if (isError) {
+        return "TODO";
+    }
+
+    return (
+        <Table>
+            <Tbody>
+                {data?.results?.map((result) => {
+                    return [
+                        <Tr key={result.id + "row_1"}>
+                            <Td width="2em">
+                                <FontAwesomeIcon icon={faUser} />
+                            </Td>
+                            <Td>{result.user?.username}</Td>
+                            <Td width="2em">
+                                <FontAwesomeIcon icon={faClock} />
+                            </Td>
+                            <Td>{humanFriendlyDate(result.date_done)}</Td>
+                            <Td textAlign="right">
+                                {jobResultStatusTag(result.status.value)}
+                            </Td>
+                        </Tr>,
+                        <Tr key={result.id + "row_2"}>
+                            <Td colSpan={5}>
+                                {result.job_model?.display || result.name}
+                            </Td>
+                        </Tr>,
+                    ];
+                })}
+            </Tbody>
+        </Table>
+    );
+}

nautobot/ui/src/components/Layout.js

@@ -0,0 +1,53 @@
+import { useSelector } from "react-redux";
+import {
+    Box,
+    Flex,
+    Heading,
+    Link,
+    NautobotLogoIcon,
+    Sidebar,
+    Button,
+} from "@nautobot/nautobot-ui";
+
+import RouterLink from "@components/RouterLink";
+import SidebarNav from "@components/SidebarNav";
+import { isLoggedInSelector } from "@utils/store";
+
+export default function Layout({ children }) {
+    const isLoggedIn = useSelector(isLoggedInSelector);
+
+    /** Invalidate the newui cookie and reload the page in order to return to the legacy UI. */
+    function legacyUI() {
+        document.cookie =
+            "newui=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+        document.location.reload(true);
+    }
+
+    return (
+        <Flex height="full" overflow="hidden" width="full">
+            <Sidebar overflow="hidden">
+                <Heading
+                    as="h1"
+                    paddingBottom="md"
+                    paddingTop="29px"
+                    paddingX="md"
+                >
+                    <Link
+                        aria-label="Nautobot"
+                        as={RouterLink}
+                        leftIcon={<NautobotLogoIcon />}
+                        to="/"
+                    />
+                </Heading>
+                {isLoggedIn && <SidebarNav />}
+                <Button onClick={legacyUI} variant="link" color="white">
+                    Return to Legacy UI
+                </Button>
+            </Sidebar>
+
+            <Box flex="1" height="full">
+                {children}
+            </Box>
+        </Flex>
+    );
+}

nautobot/ui/src/components/LoadingWidget.js

@@ -0,0 +1,25 @@
+import { Text, StatusIndicator } from "@nautobot/nautobot-ui";
+import { Spinner } from "@chakra-ui/react";
+
+// A helpful, consistent loading widget
+export function LoadingWidget({ name = "" }) {
+    const display_name = name.length > 0 ? " " + name : "";
+    return (
+        <div
+            style={{
+                textAlign: "center",
+                width: "100%",
+                position: "relative",
+                top: "40%",
+                gridColumn: "2 / span 2",
+            }}
+        >
+            <StatusIndicator variant="action" breathe={true} />
+            <Spinner size="lg" color="blue.500" />
+            <Text ml={1} color="gray-3">
+                Loading{display_name}...
+            </Text>
+        </div>
+    );
+}
+export default LoadingWidget;

nautobot/ui/src/components/Navbar.js

@@ -0,0 +1,116 @@
+import { useSelector } from "react-redux";
+import {
+    Link as ReactRouterLink,
+    NavLink as ReactRouterNavLink,
+} from "react-router-dom";
+import {
+    AutomationIcon,
+    DcimIcon,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    IpamIcon,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Navbar as UINavbar,
+    NavbarMenuButton,
+    NavbarSection,
+    NavbarSections,
+    PlatformIcon,
+    SearchIcon,
+    SecurityIcon,
+} from "@nautobot/nautobot-ui";
+
+import RouterButton from "@components/RouterButton";
+import {
+    isLoggedInSelector,
+    getCurrentContextSelector,
+    currentUserSelector,
+} from "@utils/store";
+
+export function Navbar() {
+    const isLoggedIn = useSelector(isLoggedInSelector);
+    const currentContext = useSelector(getCurrentContextSelector);
+    const currentUser = useSelector(currentUserSelector);
+
+    return (
+        <UINavbar>
+            <NavbarSections>
+                {[
+                    {
+                        children: "Inventory",
+                        leftIcon: <DcimIcon />,
+                        to: "/dcim/devices/",
+                    },
+                    {
+                        children: "Networks",
+                        leftIcon: <IpamIcon />,
+                        to: "/ipam/ip-addresses/",
+                    },
+                    {
+                        children: "Security",
+                        leftIcon: <SecurityIcon />,
+                        to: "/extras/secrets/",
+                    },
+                    {
+                        children: "Automation",
+                        leftIcon: <AutomationIcon />,
+                        to: "/extras/jobs/",
+                    },
+                    {
+                        children: "Platform",
+                        leftIcon: <PlatformIcon />,
+                        to: "/extras/relationships/",
+                    },
+                ].map(({ children, to, ...rest }) => (
+                    <ReactRouterNavLink key={to} to={to}>
+                        {({ isActive }) => (
+                            <NavbarSection
+                                as="span"
+                                isActive={
+                                    isActive || children === currentContext
+                                }
+                                children={children}
+                                {...rest}
+                            />
+                        )}
+                    </ReactRouterNavLink>
+                ))}
+            </NavbarSections>
+
+            <InputGroup flex="1" size="lg" variant="navbar">
+                <InputLeftElement>
+                    <SearchIcon />
+                </InputLeftElement>
+                <Input placeholder="Search..." />
+            </InputGroup>
+            {!isLoggedIn && <RouterButton to="/login/">Log In</RouterButton>}
+            {isLoggedIn && (
+                <Menu>
+                    <MenuButton as={NavbarMenuButton} isDisabled={!isLoggedIn}>
+                        {currentUser?.display || currentUser?.username}
+                    </MenuButton>
+                    <MenuList>
+                        {[
+                            {
+                                children: "Log Out",
+                                color: "red-1",
+                                to: "/logout",
+                            },
+                        ].map(({ to, ...rest }) => (
+                            <MenuItem
+                                key={to}
+                                as={ReactRouterLink}
+                                to={to}
+                                {...rest}
+                            />
+                        ))}
+                    </MenuList>
+                </Menu>
+            )}
+        </UINavbar>
+    );
+}
+export default Navbar;

nautobot/ui/src/components/NotificationPopover.js

@@ -0,0 +1,27 @@
+import {
+    NavbarNotificationButton,
+    Popover,
+    PopoverArrow,
+    PopoverBody,
+    PopoverContent,
+    PopoverTrigger,
+    Text,
+} from "@nautobot/nautobot-ui";
+
+export default function NotificationPopover({ isLoggedIn, notificatons = [] }) {
+    return (
+        <Popover>
+            <PopoverTrigger>
+                <NavbarNotificationButton isDisabled={!isLoggedIn}>
+                    {notificatons.length}
+                </NavbarNotificationButton>
+            </PopoverTrigger>
+            <PopoverContent>
+                <PopoverArrow />
+                <PopoverBody>
+                    <Text paddingX="md">No notifications</Text>
+                </PopoverBody>
+            </PopoverContent>
+        </Popover>
+    );
+}

nautobot/ui/src/components/ObjectListTable.js

@@ -0,0 +1,209 @@
+import { ButtonGroup, SkeletonText } from "@chakra-ui/react";
+import * as Icon from "react-icons/tb";
+import { useLocation } from "react-router-dom";
+import { useEffect, useRef, useState } from "react";
+import {
+    Box,
+    Heading,
+    NtcThumbnailIcon,
+    MeatballsIcon,
+    Button as UIButton,
+    TableRenderer,
+    useTableRenderer,
+    createColumnHelper,
+    PlusIcon,
+    Button,
+    EditIcon,
+    useToast,
+} from "@nautobot/nautobot-ui";
+import Paginator from "@components/paginator";
+import { useCallback, useMemo } from "react";
+
+import TableItem from "@components/TableItem";
+import LoadingWidget from "./LoadingWidget";
+
+const getTableItemLink = (idx, obj) => {
+    if (idx === 0) {
+        // TODO: ui-schema should be providing the name of the field used to describe the object (name)
+        return window.location.pathname + obj.id + "/";
+    }
+    if (typeof obj !== "object" || !obj || !obj.url) {
+        return null;
+    }
+    // Remove domain + /api prefix
+    const url = obj.url.replace(window.location.origin + "/api", "");
+
+    return url;
+};
+
+// A composite component for displaying a object list table. Just the data!
+export default function ObjectListTable({
+    tableData,
+    defaultHeaders,
+    tableHeaders,
+    totalCount,
+    active_page_number,
+    page_size,
+    tableTitle,
+    data_loaded,
+    data_fetched,
+    include_button = true,
+}) {
+    let location = useLocation();
+    const columnHelper = useMemo(() => createColumnHelper(), []);
+    // Reference point to scroll to on table reload
+    const topRef = useRef();
+
+    const [columnVisibility, setColumnVisibility] = useState({});
+    useEffect(() => {
+        let defaultNames = defaultHeaders.map((e) => e.key);
+        let allNames = tableHeaders.map((e) => e.key);
+
+        if (defaultNames.length === 0) {
+            defaultNames = allNames;
+        }
+        let disabledNames = allNames.filter((v) => !defaultNames.includes(v));
+        let columnState = {};
+        for (const key of disabledNames) {
+            columnState[key] = false;
+        }
+        setColumnVisibility(columnState);
+    }, [defaultHeaders, tableHeaders]);
+    const columns = useMemo(
+        () =>
+            tableHeaders.map(({ key, title }, idx) =>
+                columnHelper.accessor(key, {
+                    cell: (props) => {
+                        // Get the column data from the object
+                        // e.g from {"status": {"display": "Active"}, "id": ....} get => {"display": "Active"}
+                        const column_data =
+                            idx === 0
+                                ? props.row.original
+                                : props.row.original[props.column.id];
+                        return (
+                            <TableItem
+                                name={key}
+                                obj={props.getValue()}
+                                url={getTableItemLink(idx, column_data)}
+                            />
+                        );
+                    },
+                    header: title,
+                })
+            ),
+        [columnHelper, tableHeaders]
+    );
+    const onRowSelectionChange = useCallback(() => {
+        // Do something.
+    }, []);
+
+    const ActionMenu = useCallback(
+        ({ cellContext }) => (
+            <Button
+                leftIcon={<EditIcon size="sm" />}
+                size="xs"
+                variant="table"
+                onClick={() =>
+                    alert(`Clicked ${cellContext.row.original.name}!`)
+                }
+            />
+        ),
+        []
+    );
+
+    const table = useTableRenderer({
+        columns: columns,
+        data: tableData,
+        enableMultiRowSelection: true,
+        onRowSelectionChange,
+        state: { columnVisibility },
+        onColumnVisibilityChange: setColumnVisibility,
+        actionMenu: ActionMenu,
+    });
+
+    const toast = useToast({
+        duration: 5000,
+        isClosable: true,
+        position: "top-right",
+        status: "success",
+        description: "You have successfully made toast.",
+        title: "Ta da!",
+    });
+
+    return (
+        <Box background="white-0" borderRadius="md" padding="md" ref={topRef}>
+            {!include_button ? null : (
+                <Box display="flex" justifyContent="space-between" mb="sm">
+                    <Heading
+                        as="h1"
+                        size="H1"
+                        display="flex"
+                        alignItems="center"
+                        gap="5px"
+                        pb="sm"
+                    >
+                        <NtcThumbnailIcon width="25px" height="30px" />{" "}
+                        {tableTitle}
+                    </Heading>
+                    <ButtonGroup pb="sm" alignItems="center">
+                        <UIButton size="sm" variant="secondary" onClick={toast}>
+                            Filters
+                        </UIButton>
+                        <UIButton
+                            size="sm"
+                            variant="primary"
+                            leftIcon={<MeatballsIcon />}
+                        >
+                            Actions
+                        </UIButton>
+                        <Icon.TbMinusVertical />
+                        <UIButton
+                            to={`${location.pathname}add/`}
+                            size="sm"
+                            leftIcon={<PlusIcon />}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                // Because there is currently no support for Add view in the new UI for production,
+                                // the code below checks if the app is running in production and redirects the user to
+                                // the Add page; after the page is reloaded, nautobot takes care of rendering the legacy UI.
+                                if (process.env.NODE_ENV === "production") {
+                                    document.location.href += "add/";
+                                }
+                            }}
+                        >
+                            Add {tableTitle}
+                        </UIButton>
+                    </ButtonGroup>
+                </Box>
+            )}
+
+            <SkeletonText
+                endColor="gray.200"
+                noOfLines={parseInt(page_size)}
+                skeletonHeight="25"
+                spacing="3"
+                mt="3"
+                isLoaded={data_loaded}
+            >
+                {!data_fetched && data_loaded ? (
+                    <Box background="white-0" borderRadius="md" padding="md">
+                        <LoadingWidget name={tableTitle} />
+                    </Box>
+                ) : (
+                    () => {}
+                )}
+                <TableRenderer
+                    table={table}
+                    containerProps={{ overflow: "auto" }}
+                />
+            </SkeletonText>
+            <Paginator
+                url={location.pathname}
+                data_count={totalCount}
+                page_size={page_size}
+                active_page={active_page_number}
+                scroll_ref={topRef}
+            ></Paginator>
+        </Box>
+    );
+}

nautobot/ui/src/components/ReferenceDataTag.js

@@ -0,0 +1,35 @@
+import { Tag } from "@nautobot/nautobot-ui";
+import { Skeleton } from "@chakra-ui/react";
+import { useGetRESTAPIQuery } from "@utils/api";
+import { calculateLuminance } from "@utils/color";
+
+export function ReferenceDataTag(props) {
+    const { model_name, id } = props;
+    const { data, isSuccess } = useGetRESTAPIQuery({
+        app_label: "extras",
+        model_name: model_name,
+        uuid: id,
+    });
+
+    let display = "Loading...";
+    let color = "cccccc";
+
+    if (isSuccess) {
+        display = data.display || data.label;
+        color = data.color;
+    }
+
+    return (
+        <Skeleton isLoaded={isSuccess}>
+            <Tag
+                bg={"#" + color}
+                color={calculateLuminance(color) > 186 ? "#000000" : "#ffffff"}
+                {...props}
+            >
+                {display}
+            </Tag>
+        </Skeleton>
+    );
+}
+
+export default ReferenceDataTag;

nautobot/ui/src/components/RouterButton.js

@@ -0,0 +1,10 @@
+import { Button as UIButton } from "@nautobot/nautobot-ui";
+import { Link as ReactRouterLink } from "react-router-dom";
+
+// This provides a standard Link object we can use that marries the Button UI component with the ReactRouter Link
+export function RouterButton(props) {
+    return <UIButton as={ReactRouterLink} {...props}></UIButton>;
+}
+
+export const Button = RouterButton;
+export default RouterButton;

nautobot/ui/src/components/RouterLink.js

@@ -0,0 +1,10 @@
+import { Link as UILink } from "@nautobot/nautobot-ui";
+import { Link as ReactRouterLink } from "react-router-dom";
+
+// This provides a standard Link object we can use that marries the Link UI component with the ReactRouter Link
+export function RouterLink(props) {
+    return <UILink as={ReactRouterLink} {...props}></UILink>;
+}
+
+export const Link = RouterLink;
+export default RouterLink;