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

nautobot/ui/src/components/paginator_form.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Box, Text, Select } from "@nautobot/nautobot-ui";
+import { useSearchParams } from "react-router-dom";
+
+export default function PaginatorForm({ start, end, total_count, scroll_ref }) {
+    let [searchParams, setSearchParams] = useSearchParams();
+    let paginator_string = `Showing ${start} - ${end} of ${total_count}`;
+    function onPageSizeChange(event) {
+        let offset = searchParams.get("offset");
+        // Scroll to the top of the ObjectListTable Container on table reload
+        scroll_ref.current.scrollIntoView({
+            alignToTop: true,
+            behavior: "smooth",
+        });
+        setSearchParams({
+            limit: event.target.value,
+            offset: offset ? offset : 0,
+        });
+    }
+
+    return (
+        <Box width="200px">
+            <Select
+                value={
+                    searchParams.get("limit") ? searchParams.get("limit") : "50"
+                }
+                onChange={onPageSizeChange}
+            >
+                {/*
+                    TODO: we need a REST API endpoint to query get_settings_or_config("PER_PAGE_DEFAULTS")
+                    rather than hard-coding this.
+                */}
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+                <option value="500">500</option>
+            </Select>
+            <Text>{paginator_string}</Text>
+        </Box>
+    );
+}

nautobot/ui/src/components/usePagination.js

@@ -0,0 +1,57 @@
+import { useMemo } from "react";
+
+// Helper function to build an array from start index to end index
+const range = (start, end) => {
+    let length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+};
+
+export const usePagination = ({
+    totalDataCount,
+    pageSize,
+    siblingCount = 1,
+    currentPage,
+}) => {
+    const paginationRange = useMemo(() => {
+        const totalPageCount = Math.ceil(totalDataCount / pageSize);
+        const totalPageNumbers = siblingCount + 5;
+        // If the total page numbers rendered is greater than the total page available
+        if (totalPageNumbers >= totalPageCount) {
+            return range(1, totalPageCount);
+        }
+        // previous page of of the current page
+        const leftIndex = Math.max(currentPage + 1 - siblingCount, 1);
+        // next page of of the current page
+        const rightIndex = Math.min(
+            currentPage + 1 + siblingCount,
+            totalPageCount
+        );
+        const showLeftDots = leftIndex > 2;
+        const showRightDots = rightIndex < totalPageCount - 2;
+        const firstIndex = 1;
+        const lastIndex = totalPageCount;
+
+        if (!showLeftDots && showRightDots) {
+            // e.g < 1 2 3 ... 21 >
+            let leftItemCount = 3 + 2 * siblingCount;
+            let leftRange = range(1, leftItemCount);
+            return [...leftRange, "...", lastIndex];
+        }
+        if (showLeftDots && !showRightDots) {
+            // e.g < 1 ... 19 20 21 >
+            let rightItemCount = 3 + 2 * siblingCount;
+            let rightRange = range(
+                totalPageCount - rightItemCount + 1,
+                totalPageCount
+            );
+            return [firstIndex, "...", ...rightRange];
+        }
+
+        if (showLeftDots && showRightDots) {
+            // e.g < 1 ... 7 8 9 ... 21 >
+            let middleRange = range(leftIndex, rightIndex);
+            return [firstIndex, "...", ...middleRange, "...", lastIndex];
+        }
+    }, [totalDataCount, pageSize, siblingCount, currentPage]);
+    return paginationRange;
+};

nautobot/ui/src/constants/apiPath.js

@@ -0,0 +1,10 @@
+export const API_BASE = "/api";
+
+export const API_USER_SESSION_INFO = `${API_BASE}/users/users/session/`;
+export const API_USER_AUTHENTICATE = `${API_BASE}/users/tokens/authenticate/`;
+
+export const API_UI_BASE = `${API_BASE}/ui`;
+export const API_UI_MENU_INFO = `${API_UI_BASE}/get-menu/`;
+export const API_OBJECT_COUNTS = `${API_UI_BASE}/get-object-counts/`;
+
+export const AUTH_LOGOUT = "/logout/";

nautobot/ui/src/constants/icons.js

@@ -0,0 +1,15 @@
+import {
+    AutomationIcon,
+    DcimIcon,
+    IpamIcon,
+    PlatformIcon,
+    SecurityIcon,
+} from "@nautobot/nautobot-ui";
+
+export const appContextIcons = {
+    Inventory: DcimIcon,
+    Networks: IpamIcon,
+    Security: SecurityIcon,
+    Automation: AutomationIcon,
+    Platform: PlatformIcon,
+};

nautobot/ui/src/constants/size.js

@@ -0,0 +1,15 @@
+export const GLOBAL_PADDING_TOP = 20;
+export const GLOBAL_PADDING_RIGHT = 20;
+export const GLOBAL_GRID_GAP = 20;
+
+export const HEADER_HEIGHT = 40;
+
+export const SECTION_PADDING = 20;
+export const SECTION_HEADING_HEIGHT = 40;
+export const SECTION_GAP = 20;
+
+export const BREADCRUMBS_HEIGHT = 24;
+
+export const TABS_HEIGHT = 40;
+
+export const FOOTER_HEIGHT = 32;

nautobot/ui/src/index.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { store } from "@utils/store";
+import { PersistGate } from "redux-persist/integration/react";
+import { persistStore } from "redux-persist";
+
+import reportWebVitals from "./reportWebVitals";
+import App from "./App";
+
+import "@fontsource/ubuntu/400.css";
+import "@fontsource/ubuntu/500.css";
+import "@fontsource/ubuntu-mono/400.css";
+
+// const dev = process.env.NODE_ENV !== "production";
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+let persistor = persistStore(store);
+
+// ===
+// Establish a Global API because the one we create at startup/build time
+//   won't have all of the endpoints. Can't have async/await at the top
+//   so we can't wait to define the entire API until after the first API call
+//
+// TODO: Either investigate dynamic loading API or getting the scheme at startup
+//    Can't tell if the failure to subscribe to events in components is due to dynamic API
+//    or if this pattern won't work
+//
+// -- Imports for this pattern
+// import { rootReducer } from '@utils/store';
+// import { addMiddleware, removeMiddleware } from 'redux-dynamic-middlewares'
+// import { baseApi } from "@utils/apiSlice";
+// import { combineReducers } from 'redux'
+// import sessionReducer from '@utils/session'
+// ---
+//
+// let globalStore = store
+// export let globalApi = baseApi
+
+// function updateStore(newApi) {
+//   globalApi = newApi
+//   globalStore.replaceReducer(combineReducers({
+//     session: sessionReducer,
+//     [globalApi.reducerPath]: globalApi.reducer,
+//   }))
+//   removeMiddleware(baseApi.middleware)
+//   addMiddleware(globalApi.middleware)
+// }
+/// ===
+
+root.render(
+    <React.StrictMode>
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <App />
+            </PersistGate>
+        </Provider>
+    </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

nautobot/ui/src/reportWebVitals.js

@@ -0,0 +1,15 @@
+const reportWebVitals = (onPerfEntry) => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import("web-vitals").then(
+            ({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+                getCLS(onPerfEntry);
+                getFID(onPerfEntry);
+                getFCP(onPerfEntry);
+                getLCP(onPerfEntry);
+                getTTFB(onPerfEntry);
+            }
+        );
+    }
+};
+
+export default reportWebVitals;

nautobot/ui/src/router.js

@@ -0,0 +1,77 @@
+import { Navigate, useRoutes } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { isLoggedInSelector } from "@utils/store";
+import CreateView from "@views/generic/ObjectCreate";
+import DetailView from "@views/generic/ObjectRetrieve";
+import ListView from "@views/generic/ObjectList";
+import Home from "@views/Home";
+import InstalledApps from "@views/InstalledApps";
+import Login from "@views/Login";
+import Logout from "@views/Logout";
+import { getPluginRoutes } from "@utils";
+
+export default function NautobotRouter() {
+    const isLoggedIn = useSelector(isLoggedInSelector);
+
+    return useRoutes([
+        {
+            path: "/login/",
+            element: !isLoggedIn ? <Login /> : <Navigate to="/" />,
+        },
+        {
+            path: "/logout/",
+            element: isLoggedIn ? <Logout /> : <Navigate to="/login/" />,
+        },
+        {
+            path: "/",
+            element: !isLoggedIn && <Navigate to="/login/" />,
+            children: [
+                {
+                    path: "",
+                    element: <Home />,
+                    children: [],
+                },
+                {
+                    path: "/:app_label/:model_name/",
+                    element: <ListView />,
+                    children: [],
+                },
+                {
+                    path: "/:app_label/:model_name/add/",
+                    element: <CreateView />,
+                    children: [],
+                },
+                {
+                    path: "/:app_label/:model_name/:object_id/",
+                    element: <DetailView />,
+                    children: [],
+                },
+                {
+                    path: "/plugins/",
+                    children: [
+                        {
+                            path: "installed-plugins/",
+                            element: <InstalledApps />,
+                        },
+                        {
+                            path: ":app_label/:model_name/",
+                            element: <ListView />,
+                            children: [],
+                        },
+                        {
+                            path: ":app_label/:model_name/add/",
+                            element: <CreateView />,
+                            children: [],
+                        },
+                        {
+                            path: ":app_label/:model_name/:object_id/",
+                            element: <DetailView />,
+                            children: [],
+                        },
+                        ...getPluginRoutes(),
+                    ],
+                },
+            ],
+        },
+    ]);
+}

nautobot/ui/src/utils/api.js

@@ -0,0 +1,131 @@
+import { createApi, fetchBaseQuery, retry } from "@reduxjs/toolkit/query/react";
+import {
+    API_BASE,
+    API_OBJECT_COUNTS,
+    API_USER_SESSION_INFO,
+    API_UI_MENU_INFO,
+    API_USER_AUTHENTICATE,
+    AUTH_LOGOUT,
+} from "@constants/apiPath";
+
+/*
+  The one true API!
+
+  Using Redux's RTK Query making fetching and caching a breeze! This will provide hooks and wires automagically.
+
+  A standardized convention for retrieving data which should make developer's lives easier and is already extensively documented
+  in React and Redux's sites.
+*/
+
+/**
+ * A custom baseQuery that will retry requests that fail with a 5xx error code.
+ *
+ * @param {Object} args - The arguments passed to the query.
+ * @param {Object} api - The API object.
+ * @param {Object} extraOptions - Extra options passed to the query.
+ * @returns {Object} - The result of the query.
+ */
+const smartRetryBaseQuery = retry(
+    async (args, api, extraOptions) => {
+        const result = await fetchBaseQuery({ baseUrl: "" })(
+            args,
+            api,
+            extraOptions
+        );
+        const dontRetryHeaders = [400, 401, 403, 404, 405, 406, 407];
+        if (dontRetryHeaders.includes(result.error?.status)) {
+            retry.fail(result.error);
+        }
+        return result;
+    },
+    {
+        maxRetries: 5,
+    }
+);
+
+/** The base RTK Query API object that will be used to create the endpoints. */
+export const baseApi = createApi({
+    baseQuery: smartRetryBaseQuery,
+    endpoints: (builder) => ({
+        /** The query to retrieve the session data. */
+        getSession: builder.query({
+            query: () => API_USER_SESSION_INFO,
+            providesTags: ["Session"],
+            invalidatesTags: ["APIData", "AppData"],
+        }),
+        /** The query to retrieve the menu data. */
+        getUIMenu: builder.query({
+            query: () => API_UI_MENU_INFO,
+            providesTags: ["AppData"],
+        }),
+        /** The query to retrieve object counts (used on the homepage). */
+        getObjectCounts: builder.query({
+            query: () => API_OBJECT_COUNTS,
+            providesTags: ["ObjectCounts"],
+        }),
+        /** The query to retrieve object data from RESTful API. */
+        getRESTAPI: builder.query({
+            query: ({
+                app_label,
+                model_name,
+                uuid = null,
+                schema = false,
+                plugin = false,
+                limit = null,
+                offset = null,
+                depth = 1,
+            }) => {
+                let url = `${API_BASE}/${
+                    plugin ? "plugins/" : ""
+                }${app_label}/${model_name}/`;
+                let method = "GET";
+                let queryParams = null;
+                if (schema) {
+                    method = "OPTIONS";
+                } else {
+                    if (uuid) {
+                        url += `${uuid}/`;
+                    }
+                    queryParams = new URLSearchParams([["depth", depth]]);
+                    if (limit) {
+                        queryParams.append("limit", limit);
+                    }
+                    if (offset) {
+                        queryParams.append("offset", offset);
+                    }
+                }
+
+                if (queryParams) {
+                    url += `?${queryParams.toString()}`;
+                }
+
+                return { url: url, method: method };
+            },
+            providesTags: ["APIData"],
+        }),
+        /** The mutation to log in */
+        login: builder.mutation({
+            query: ({ username, password }) => ({
+                url: API_USER_AUTHENTICATE,
+                method: "POST",
+                body: { username, password },
+            }),
+        }),
+        /** The mutation to log out. While is a GET, it changes data on the back-end */
+        logout: builder.mutation({
+            query: () => ({
+                url: AUTH_LOGOUT,
+                method: "GET",
+            }),
+        }),
+    }),
+});
+
+export const {
+    useGetSessionQuery,
+    useGetUIMenuQuery,
+    useGetRESTAPIQuery,
+    useGetObjectCountsQuery,
+    useLoginMutation,
+    useLogoutMutation,
+} = baseApi;

nautobot/ui/src/utils/app-import.js

@@ -0,0 +1,15 @@
+import NautobotApps from "../app_imports";
+
+function EmptyElement() {
+    return <></>;
+}
+
+function findOrEmpty(module, key) {
+    return key in module ? module[key] : EmptyElement;
+}
+
+export function getComponentFromModule(module_name, component_name) {
+    return NautobotApps[module_name]
+        .then((module) => ({ default: findOrEmpty(module, component_name) }))
+        .catch({ default: EmptyElement });
+}

nautobot/ui/src/utils/color.js

@@ -0,0 +1,15 @@
+export function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? [
+              parseInt(result[1], 16),
+              parseInt(result[2], 16),
+              parseInt(result[3], 16),
+          ]
+        : null;
+}
+
+export function calculateLuminance(hex_color) {
+    var [R, G, B] = hexToRgb(hex_color);
+    return (R + R + R + B + G + G + G + G + G + G) / 10;
+}

nautobot/ui/src/utils/date.js

@@ -0,0 +1,14 @@
+export function humanFriendlyDate(dateStr) {
+    const date = new Date(dateStr);
+    return (
+        date.getFullYear().toString() +
+        "-" +
+        date.getMonth().toString().padStart(2, "0") +
+        "-" +
+        date.getDate().toString().padStart(2, "0") +
+        " " +
+        date.getHours().toString().padStart(2, "0") +
+        ":" +
+        date.getMinutes().toString().padStart(2, "0")
+    );
+}

nautobot/ui/src/utils/index.js

@@ -0,0 +1,15 @@
+export { getComponentFromModule } from "./app-import";
+
+export { getPluginRoutes } from "./navigation";
+
+export {
+    useGetSessionQuery,
+    useGetUIMenuQuery,
+    useGetRESTAPIQuery,
+    useGetObjectCountsQuery,
+    baseApi,
+} from "./api";
+
+export { toTitleCase } from "./string";
+
+export { uiUrl } from "./url";

nautobot/ui/src/utils/navigation.js

@@ -0,0 +1,32 @@
+import { Suspense } from "react";
+import { lazy } from "react";
+import { getComponentFromModule } from "./app-import";
+import { LoadingWidget } from "@components/LoadingWidget";
+
+let app_routes = {};
+try {
+    app_routes = require("../app_routes.json");
+} catch {}
+
+export function getPluginRoutes() {
+    let react_routes = [];
+
+    for (const [app_name, routes] of Object.entries(app_routes)) {
+        for (const { path, component } of routes) {
+            const Component = lazy(() =>
+                getComponentFromModule(app_name, component)
+            );
+            const route_data = {
+                path,
+                element: (
+                    <Suspense fallback={<LoadingWidget />}>
+                        <Component />
+                    </Suspense>
+                ),
+            };
+            react_routes.push(route_data);
+        }
+    }
+
+    return react_routes;
+}

nautobot/ui/src/utils/session.js

@@ -0,0 +1,64 @@
+// TODO: This file may go away entirely with the RTK Query pattern
+import axios from "axios";
+import { API_USER_SESSION_INFO } from "@constants/apiPath";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+
+export function getSession() {}
+
+export function setSession(session_object) {}
+
+export const fetchSessionAsync = createAsyncThunk(
+    "session/fetchSession",
+    async () => {
+        const response = await axios.get(API_USER_SESSION_INFO);
+        // The value we return becomes the `fulfilled` action payload
+        return response.data;
+    }
+);
+
+const initialState = {
+    logged_in: false,
+    userinfo: {
+        display: "Anonymous",
+    },
+    status: "starting",
+    backends: [],
+    sso_enabled: false,
+    sso_user: false,
+};
+
+function decomposeSessionToState(state, payload) {
+    state.userinfo = payload.user;
+    state.logged_in = payload.logged_in;
+    state.sso_enabled = payload.sso_enabled;
+    state.sso_user = payload.sso_user;
+}
+
+export const sessionSlice = createSlice({
+    name: "session",
+    initialState,
+    reducers: {
+        login: (state, action) => {
+            decomposeSessionToState(state, action.payload);
+        },
+    },
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchSessionAsync.pending, (state) => {
+                state.status = "loading";
+            })
+            .addCase(fetchSessionAsync.fulfilled, (state, action) => {
+                state.status = "idle";
+                decomposeSessionToState(state, action);
+            });
+    },
+});
+
+const { actions, reducer } = sessionSlice;
+
+export const selectLoggedIn = (state) => state.session.logged_in;
+export const selectUsername = (state) =>
+    (state.session.userinfo && state.session.userinfo.display) || "";
+
+export const { login } = actions;
+export default reducer;