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

nautobot/ui/src/utils/store.js

@@ -0,0 +1,242 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { baseApi } from "@utils/api";
+import { combineReducers } from "redux";
+import { createSlice } from "@reduxjs/toolkit";
+import {
+    persistReducer,
+    FLUSH,
+    REHYDRATE,
+    PAUSE,
+    PERSIST,
+    PURGE,
+    REGISTER,
+} from "redux-persist";
+import storage from "redux-persist/lib/storage";
+
+//
+// Auth
+//
+
+const initialAuthState = {
+    logged_in: false,
+    user: {},
+    sso_enabled: false,
+    backends: [],
+};
+
+/**
+ * Redux slice for logged_in state
+ * @param {Object} state - The current state
+ * @returns {boolean} - Whether the user is logged in
+ */
+export function isLoggedInSelector(state) {
+    return state?.appState?.auth?.logged_in || false;
+}
+
+/**
+ * Redux slice for current user state
+ * @param {Object} state - The current state
+ * @returns {Object} - Whether the user is logged in
+ */
+export function currentUserSelector(state) {
+    return state?.appState?.auth?.user || {};
+}
+
+//
+// Navigation
+//
+
+const initialCurrentContext = "Inventory";
+
+const initialNavigationState = {
+    currentContext: initialCurrentContext, // TODO: Add sidebar support for null
+    contextToRoute: {},
+    routeToContext: {},
+};
+
+/**
+ * Given an App Label and Model Name, return the current context
+ * @param {string} app_label
+ * @param {string} model_name
+ * @returns {string} The current context
+ */
+export function getCurrentAppContextSelector(app_label, model_name) {
+    return (store) => {
+        return (
+            store?.appState?.navigation?.routeToContext[app_label]?.[
+                model_name
+            ] || initialCurrentContext
+        );
+        // TODO: We should probably throw an error or not fall back to Inventory if the context is not found
+    };
+}
+/**
+ *
+ * @param {Object} state - The current state
+ * @returns
+ */
+export function getCurrentContextSelector(state) {
+    return state?.appState?.navigation?.currentContext || initialCurrentContext;
+}
+
+/**
+ * Retrieve the contextToRoute object from the application state
+ * @param {Object} state
+ * @returns {Object} The navigation slice of the application state
+ */
+export function getMenuInfoSelector(state) {
+    return state?.appState?.navigation?.contextToRoute || {};
+}
+
+//
+// App State
+//
+
+const initialAppState = {
+    auth: structuredClone(initialAuthState),
+    navigation: structuredClone(initialNavigationState),
+};
+
+const appStateSlice = createSlice({
+    name: "appState",
+    initialState: initialAppState,
+    reducers: {
+        /**
+         * Updates the current context of the app
+         * @param {Object} state - The current state
+         * @param {Object} action - The called-with payload, which should be one of the keys in the contextToRoute object
+         * @returns
+         */
+        updateCurrentContext(state, action) {
+            // TODO: Add validation that the payload is a valid context
+            state.navigation.currentContext = action.payload;
+            return state;
+        },
+        /**
+         * Given an API payload with the menu information store both directions of menu
+         * - Context (Inventory, Circuits, etc) to Route (app/model) (contextToRoute)
+         * - Route (app/model) to Context (Inventory, Circuits, etc) (routeToContext)
+         * @param {Object} state - The current state
+         * @param {Object} action - The called-with payload (from the API)
+         * @returns The updated state
+         */
+        updateNavigation(state, action) {
+            let menuInfo = action.payload;
+            state.navigation =
+                state.navigation || structuredClone(initialNavigationState);
+            state.navigation.contextToRoute = menuInfo;
+            let urlPatternToContext = {};
+            for (const context in menuInfo) {
+                for (const group in menuInfo[context]) {
+                    for (const urlPatternOrSubGroupName in menuInfo[context][
+                        group
+                    ]) {
+                        const urlPatternOrSubGroup =
+                            menuInfo[context][group][urlPatternOrSubGroupName];
+                        if (typeof urlPatternOrSubGroup === "string") {
+                            // It's a URL pattern
+                            let tokens = urlPatternOrSubGroup.split("/");
+                            if (tokens.length === 4) {
+                                let appLabel = tokens[1];
+                                let modelNamePlural = tokens[2];
+                                if (appLabel in urlPatternToContext === false) {
+                                    urlPatternToContext[appLabel] = {};
+                                }
+                                urlPatternToContext[appLabel][modelNamePlural] =
+                                    context;
+                            }
+                        } else {
+                            // It's a submenu
+                            for (const urlPattern in urlPatternOrSubGroup) {
+                                let tokens = urlPattern.split("/");
+                                if (tokens.length === 4) {
+                                    let appLabel = tokens[1];
+                                    let modelNamePlural = tokens[2];
+                                    if (
+                                        appLabel in urlPatternToContext ===
+                                        false
+                                    ) {
+                                        urlPatternToContext[appLabel] = {};
+                                    }
+                                    urlPatternToContext[appLabel][
+                                        modelNamePlural
+                                    ] = context;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            state.navigation.routeToContext = urlPatternToContext;
+            return state;
+        },
+        /**
+         * Given an API payload with session information, updates the state with the session information
+         * @param {Object} state - The current state
+         * @param {Object} action - The called-with payload and action type
+         * @returns The updated state
+         */
+        updateAuthStateWithSession(state, action) {
+            state.auth = state.auth || structuredClone(initialAuthState);
+            state.auth.user = action.payload.user;
+            state.auth.logged_in = action.payload.logged_in;
+            state.auth.sso_enabled = action.payload.sso_enabled;
+            state.auth.backends = action.payload.backends;
+            return state;
+        },
+        /**
+         * Set the user back to logged-out and clear the user object
+         * @param {Object} state - The current state
+         * @param {*} _ - The called-with payload, ignored here
+         * @returns The updated state
+         */
+        flushSessionState(state, _) {
+            state.auth.user = {};
+            state.auth.logged_in = false;
+            return state;
+        },
+    },
+});
+
+// The actions available to update the App State slice
+export const {
+    updateCurrentContext,
+    updateNavigation,
+    updateAuthStateWithSession,
+    flushSessionState,
+} = appStateSlice.actions;
+
+// Combine our internal app state reducers with the RTK Query reducers
+const rootReducer = combineReducers({
+    [baseApi.reducerPath]: baseApi.reducer,
+    appState: appStateSlice.reducer,
+});
+
+// Configure redux-persist to save state in Local Storage for performance
+const persistConfig = {
+    key: "root",
+    version: 3, // Increment this number if you change the shape of the state
+    storage,
+};
+
+// Instantiate the persistent reducer to pull state from cache
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+// Global Redux store for global state management
+export const store = configureStore({
+    reducer: persistedReducer,
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware({
+            serializableCheck: {
+                ignoredActions: [
+                    FLUSH,
+                    REHYDRATE,
+                    PAUSE,
+                    PERSIST,
+                    PURGE,
+                    REGISTER,
+                ],
+            },
+        }).concat(baseApi.middleware),
+});

nautobot/ui/src/utils/string.js

@@ -0,0 +1,6 @@
+export function toTitleCase(str, separator = " ") {
+    return str
+        .split(separator)
+        .map((x) => (x ? x[0].toUpperCase() + x.slice(1) : ""))
+        .join(" ");
+}

nautobot/ui/src/utils/url.js

@@ -0,0 +1,4 @@
+/* Convert an API URL into its presumed UI equivalent */
+export function uiUrl(apiUrl) {
+    return apiUrl.replace("/api/", "/");
+}

nautobot/ui/src/views/Home.js

@@ -0,0 +1,138 @@
+import {
+    AutomationIcon,
+    DcimIcon,
+    IpamIcon,
+    NautobotGridItem,
+    PlatformIcon,
+    SecurityIcon,
+    Table,
+    TableContainer,
+    Tab,
+    Tabs,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tag,
+    TagLabel,
+    Tbody,
+    Td,
+    Text,
+    Th,
+    Thead,
+    Tr,
+} from "@nautobot/nautobot-ui";
+import HomeChangelogPanel from "@components/HomeChangelogPanel";
+import HomePanel from "@components/HomePanel";
+import JobHistoryTable from "@components/JobHistoryTable";
+import { LoadingWidget } from "@components/LoadingWidget";
+import { useGetObjectCountsQuery, useGetRESTAPIQuery } from "@utils/api";
+import GenericView from "@views/generic/GenericView";
+
+export default function Home() {
+    const { data: jobResultData } = useGetRESTAPIQuery({
+        app_label: "extras",
+        model_name: "job-results",
+        limit: 1,
+        depth: 0,
+    });
+    const {
+        data: objectCountData,
+        isLoading,
+        isError,
+    } = useGetObjectCountsQuery();
+
+    if (isLoading) {
+        return (
+            <GenericView>
+                <LoadingWidget />
+            </GenericView>
+        );
+    }
+
+    if (isError) {
+        return (
+            <GenericView>
+                <Text>Error loading.</Text>
+            </GenericView>
+        );
+    }
+
+    return (
+        <GenericView columns="1 1 1 1 3 1" gridBackground="white-0">
+            <HomePanel
+                icon=<DcimIcon />
+                title="Inventory"
+                data={objectCountData["Inventory"]}
+            />
+            <HomePanel
+                icon=<IpamIcon />
+                title="Networks"
+                data={objectCountData["Networks"]}
+            />
+            {/*TODO: this should use objectCountData["Security"]*/}
+            <HomePanel
+                icon=<SecurityIcon />
+                title="Security"
+                data={objectCountData["Security"]}
+            />
+            <HomePanel
+                icon=<PlatformIcon />
+                title="Platform"
+                data={objectCountData["Platform"]}
+            />
+            <NautobotGridItem colSpan="3">
+                {/*TODO: this should probably be extracted to a HomeAutomationPanel component for readability?*/}
+                <TableContainer>
+                    <Table>
+                        <Thead>
+                            <Tr _hover={{}}>
+                                <Th width="3em">
+                                    <AutomationIcon />
+                                </Th>
+                                <Th>Automation</Th>
+                            </Tr>
+                        </Thead>
+                        <Tbody>
+                            <Tr _hover={{}}>
+                                <Td colSpan={2}>
+                                    <Tabs variant="outline">
+                                        <TabList>
+                                            <Tab>
+                                                Job History{" "}
+                                                <Tag size="sm" variant="info">
+                                                    <TagLabel>
+                                                        {jobResultData?.count}
+                                                    </TagLabel>
+                                                </Tag>
+                                            </Tab>
+                                            <Tab>
+                                                Schedule{" "}
+                                                <Tag size="sm" variant="info">
+                                                    <TagLabel>7</TagLabel>
+                                                </Tag>
+                                            </Tab>
+                                            <Tab>
+                                                Approvals{" "}
+                                                <Tag size="sm" variant="info">
+                                                    <TagLabel>3</TagLabel>
+                                                </Tag>
+                                            </Tab>
+                                        </TabList>
+                                        <TabPanels>
+                                            <TabPanel>
+                                                <JobHistoryTable />
+                                            </TabPanel>
+                                            <TabPanel></TabPanel>
+                                            <TabPanel></TabPanel>
+                                        </TabPanels>
+                                    </Tabs>
+                                </Td>
+                            </Tr>
+                        </Tbody>
+                    </Table>
+                </TableContainer>
+            </NautobotGridItem>
+            <HomeChangelogPanel />
+        </GenericView>
+    );
+}

nautobot/ui/src/views/InstalledApps.js

@@ -0,0 +1,80 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBookOpen, faGear, faHome } from "@fortawesome/free-solid-svg-icons";
+import {
+    Button,
+    Link,
+    Table,
+    TableContainer,
+    Tbody,
+    Td,
+    Th,
+    Thead,
+    Tr,
+} from "@nautobot/nautobot-ui";
+import { useGetRESTAPIQuery } from "@utils/api";
+import GenericView from "@views/generic/GenericView";
+
+export default function InstalledApps() {
+    const { data, isLoading } = useGetRESTAPIQuery({
+        app_label: "plugins",
+        model_name: "installed-plugins",
+    });
+
+    if (isLoading) {
+        return <GenericView gridBackground="white-0" />;
+    }
+
+    return (
+        <GenericView gridBackground="white-0">
+            <TableContainer>
+                <Table>
+                    <Thead>
+                        <Tr>
+                            <Th>Name</Th>
+                            <Th>Description</Th>
+                            <Th>Version</Th>
+                            <Th>Links</Th>
+                        </Tr>
+                    </Thead>
+                    <Tbody>
+                        {Object.values(data).map((app) => (
+                            <Tr>
+                                <Td>{app.name}</Td>
+                                <Td>{app.description}</Td>
+                                <Td>{app.version}</Td>
+                                <Td>
+                                    <Link href={app.home_url}>
+                                        <Button
+                                            variant="primary"
+                                            isDisabled={!app.home_url}
+                                        >
+                                            <FontAwesomeIcon icon={faHome} />
+                                        </Button>
+                                    </Link>
+                                    <Link href={app.config_url}>
+                                        <Button
+                                            variant="primaryAction"
+                                            isDisabled={!app.config_url}
+                                        >
+                                            <FontAwesomeIcon icon={faGear} />
+                                        </Button>
+                                    </Link>
+                                    <Link href={app.docs_url}>
+                                        <Button
+                                            variant="primary"
+                                            isDisabled={!app.docs_url}
+                                        >
+                                            <FontAwesomeIcon
+                                                icon={faBookOpen}
+                                            />
+                                        </Button>
+                                    </Link>
+                                </Td>
+                            </Tr>
+                        ))}
+                    </Tbody>
+                </Table>
+            </TableContainer>
+        </GenericView>
+    );
+}

nautobot/ui/src/views/Login.js

@@ -0,0 +1,48 @@
+import {
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Box,
+    Spinner,
+} from "@nautobot/nautobot-ui";
+
+import { useGetSessionQuery, useLoginMutation } from "@utils/api";
+
+export default function Login() {
+    const { refetch: refetchSession } = useGetSessionQuery();
+    const [login, { isLoading }] = useLoginMutation();
+
+    /** Handle the form submission. */
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        login({
+            username: e.target.username.value,
+            password: e.target.password.value,
+        })
+            .then(refetchSession)
+            .catch(console.log);
+    };
+
+    return (
+        <Box boxShadow="base" p="6" rounded="md" bg="white">
+            {/* Show that we're trying to log in while we wait for the server to respond. */}
+            {isLoading && <Spinner />}
+            <form method="POST" onSubmit={handleSubmit}>
+                <FormControl>
+                    <FormLabel>Username</FormLabel>
+                    <Input isRequired={true} name="username"></Input>
+                </FormControl>
+                <FormControl>
+                    <FormLabel>Password</FormLabel>
+                    <Input
+                        isRequired={true}
+                        name="password"
+                        type="password"
+                    ></Input>
+                </FormControl>
+                <Button type="submit">Log In</Button>
+            </form>
+        </Box>
+    );
+}

nautobot/ui/src/views/Logout.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { useLogoutMutation } from "@utils/api";
+import { isLoggedInSelector, flushSessionState } from "@utils/store";
+
+export default function Logout() {
+    const isLoggedIn = useSelector(isLoggedInSelector); // While the router _should_ never try to render this view if we aren't logged in, we should still check.
+    const [logout] = useLogoutMutation();
+    const dispatch = useDispatch();
+
+    /** Log out only when mounting the component, we should be logged out by the time it tries to render. */
+    useEffect(() => {
+        if (isLoggedIn) {
+            logout().then(dispatch(flushSessionState())).catch(console.log);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only run on mount
+
+    return <></>;
+}

nautobot/ui/src/views/__tests__/BSCreateViewTemplate.test.js

@@ -0,0 +1,11 @@
+// import React from "react";
+// import { render, fireEvent, waitFor } from "@testing-library/react";
+// import BSCreateViewTemplate from '../BSCreateViewTemplate';
+
+describe("BSCreateViewTemplate component", () => {
+    it("renders a form with the correct schema", () => {
+        // TODO(timizuo): Write test for this component; I currently importing BSCreateViewTemplate raises
+        //  SyntaxError: Cannot use import statement outside a module;
+        //
+    });
+});

nautobot/ui/src/views/__tests__/BSListViewTemplate.test.js

@@ -0,0 +1,107 @@
+// import { render, screen } from "@testing-library/react";
+// import { BrowserRouter } from "react-router-dom";
+// import useSWR from "swr";
+// import BSListViewTemplate from "../BSListViewTemplate";
+
+// jest.mock("swr");
+
+describe("BSListViewTemplate component", () => {
+    // TODO: This needs to be update to test ObjectList.js
+    // it("should render `Failed to load` if swr error", async () => {
+    //     useSWR.mockReturnValue({
+    //         error: { message: "" },
+    //     });
+    //     render(
+    //         <BrowserRouter>
+    //             <BSListViewTemplate list_url="http://localhost:8000/api/items/" />
+    //         </BrowserRouter>
+    //     );
+    //     screen.getByText("Failed to load http://localhost:8000/api/items/");
+    // });
+
+    // it("should render empty page if swr yet to load (undefined)", async () => {
+    //     useSWR.mockReturnValue({
+    //         data: undefined,
+    //         error: undefined,
+    //     });
+    //     const { container } = render(
+    //         <BrowserRouter>
+    //             <BSListViewTemplate list_url="http://localhost:8000/api/items/" />
+    //         </BrowserRouter>
+    //     );
+    //     expect(container.innerHTML).toBe("");
+    // });
+
+    // it("Render page properly if swr request successfull", async () => {
+    //     const mockData = [
+    //         {
+    //             formData: {
+    //                 count: 2,
+    //                 next: null,
+    //                 previous: null,
+    //                 results: [
+    //                     {
+    //                         id: 1,
+    //                         name: "Example One",
+    //                         status: "active",
+    //                     },
+    //                     {
+    //                         id: 2,
+    //                         name: "Example Two",
+    //                         status: "deactivated",
+    //                     },
+    //                 ],
+    //             },
+    //         },
+    //         {
+    //             formData: {
+    //                 data: [
+    //                     { name: "name", label: "Name" },
+    //                     { name: "status", label: "Status" },
+    //                 ],
+    //             },
+    //         },
+    //     ];
+    //     useSWR.mockReturnValue({
+    //         data: mockData,
+    //     });
+    //     render(
+    //         <BrowserRouter>
+    //             <BSListViewTemplate list_url="http://localhost:8000/api/items/" />
+    //         </BrowserRouter>
+    //     );
+
+    //     // Assert we have 3 buttons: Add, Import and Export
+    //     const buttons = screen.getAllByRole("button");
+    //     expect(buttons.length).toBe(3);
+    //     // const addBtn = buttons[0];
+    //     // const importBtn = buttons[1];
+    //     // const exportBtn = buttons[2];
+    //     // expect(addBtn.getAttribute("to")).toBe("/add")
+    //     // expect(addBtn.getAttribute("class")).toBe("btn btn-primary")
+    //     // expect(addBtn.innerHTML).toContain("Add")
+    //     // expect(importBtn.getAttribute("class")).toBe("btn btn-info")
+    //     // expect(importBtn.innerHTML).toContain("Import")
+    //     // expect(exportBtn.getAttribute("class")).toBe("btn btn-success")
+    //     // expect(exportBtn.innerHTML).toContain("Export")
+
+    //     // Assert table has correct data
+    //     // const tableDom = document.evaluate('//table', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
+    //     // const tableHeader = tableDom.children[0]
+    //     // expect(tableHeader.innerHTML).toContain("<th>Name</th><th>Status</th>")
+
+    //     // // Assert Table body has two rows and three colums
+    //     // const tableBody = tableDom.children[1].children
+    //     // expect(tableBody.length).toBe(2)
+    //     // expect(tableBody[0].children.length).toBe(3)
+
+    //     // // Assert Table
+    //     // const firstRow = '<td><div class=""><input type="checkbox" class="form-check-input"></div></td><td><a href="/1">Example One</a></td><td>active</td>'
+    //     // const secondRow = '<td><div class=""><input type="checkbox" class="form-check-input"></div></td><td><a href="/2">Example Two</a></td><td>deactivated</td>'
+    //     // expect(tableBody[0].innerHTML).toBe(firstRow)
+    //     // expect(tableBody[1].innerHTML).toBe(secondRow)
+
+    //     // NOTE: Im not validating table and pagination here; Cause they have properly been tested in other test cases
+    // });
+    it("should be true", async () => expect(true).toBe(true));
+});

nautobot/ui/src/views/__tests__/Login.test.js

@@ -0,0 +1,15 @@
+// import { render, screen } from "@testing-library/react";
+
+// import Login from "../Login";
+
+describe("Login component", () => {
+    it("renders the login form", () => {
+        // TODO: Need to setup Redux for Jest: https://redux.js.org/usage/writing-tests#setting-up-a-reusable-test-render-function
+        // render(<Login />);
+        // screen.getByLabelText("Username");
+        // screen.getByLabelText("Password");
+        // screen.getByRole("button", { name: "Log In" });
+        expect(true).toBe(true);
+    });
+    // TODO(timizuo): It would be nice to test for on submit of the login form
+});