mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

start typescript & chakra-ui 1.0 migrations [skip ci]

Browse Source
This commit is contained in:
checktheroads
2020-10-18 14:47:33 -07:00
parent 79c2fe81c4
commit 49183bd3a6
26 changed files with 1213 additions and 1078 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
hyperglass/ui/README.md
View File

@@ -1,3 +1,3 @@
# hyperglass-ui
Temporary repo for the permanent [hyperglass](https://github.com/checktheroads/hyperglass) UI, written in [React](https://reactjs.org/), on [Next.js](https://nextjs.org/), with [Chakra UI](https://chakra-ui.com/).
[hyperglass](https://github.com/checktheroads/hyperglass) UI, written in [React](https://reactjs.org/), on [Next.js](https://nextjs.org/), with [Chakra UI](https://chakra-ui.com/).

24
hyperglass/ui/components/Card/CardBody.js
View File

@@ -1,24 +0,0 @@
import * as React from 'react';
import { Flex, useColorMode } from '@chakra-ui/core';
const bg = { light: 'white', dark: 'original.dark' };
const color = { light: 'original.dark', dark: 'white' };
export const CardBody = ({ onClick = () => false, children, ...props }) => {
const { colorMode } = useColorMode();
return (
<Flex
w="100%"
maxW="100%"
rounded="md"
borderWidth="1px"
direction="column"
onClick={onClick}
bg={bg[colorMode]}
color={color[colorMode]}
overflow="hidden"
{...props}>
{children}
</Flex>
);
};

25
hyperglass/ui/components/Card/CardBody.tsx Normal file
View File

@@ -0,0 +1,25 @@
import * as React from 'react';
import { Flex } from '@chakra-ui/core';
import { useColorValue } from '~/context';
import type { ICardBody } from './types';
export const CardBody = (props: ICardBody) => {
const { onClick, ...rest } = props;
const bg = useColorValue('white', 'original.dark');
const color = useColorValue('original.dark', 'white');
return (
<Flex
bg={bg}
w="100%"
maxW="100%"
rounded="md"
color={color}
onClick={onClick}
overflow="hidden"
borderWidth="1px"
direction="column"
{...rest}
/>
);
};

15
hyperglass/ui/components/Card/CardFooter.js → hyperglass/ui/components/Card/CardFooter.tsx
View File

@@ -1,18 +1,19 @@
import * as React from 'react';
import { Flex } from '@chakra-ui/core';
export const CardFooter = ({ children, ...props }) => (
import type { FlexProps } from '@chakra-ui/core';
export const CardFooter = (props: FlexProps) => (
<Flex
p={4}
roundedBottomLeft={4}
roundedBottomRight={4}
direction="column"
borderTopWidth="1px"
overflowX="hidden"
overflowY="hidden"
flexDirection="row"
borderTopWidth="1px"
roundedBottomLeft={4}
roundedBottomRight={4}
justifyContent="space-between"
{...props}>
{children}
</Flex>
{...props}
/>
);

20
hyperglass/ui/components/Card/CardHeader.js
View File

@@ -1,20 +0,0 @@
import * as React from 'react';
import { Flex, Text, useColorMode } from '@chakra-ui/core';
const bg = { light: 'blackAlpha.50', dark: 'whiteAlpha.100' };
export const CardHeader = ({ children, ...props }) => {
const { colorMode } = useColorMode();
return (
<Flex
bg={bg[colorMode]}
p={4}
direction="column"
roundedTopLeft={4}
roundedTopRight={4}
borderBottomWidth="1px"
{...props}>
<Text fontWeight="bold">{children}</Text>
</Flex>
);
};

22
hyperglass/ui/components/Card/CardHeader.tsx Normal file
View File

@@ -0,0 +1,22 @@
import * as React from 'react';
import { Flex, Text } from '@chakra-ui/core';
import { useColorValue } from '~/context';
import type { FlexProps } from '@chakra-ui/core';
export const CardHeader = (props: FlexProps) => {
const { children, ...rest } = props;
const bg = useColorValue('blackAlpha.50', 'whiteAlpha.100');
return (
<Flex
p={4}
bg={bg}
direction="column"
roundedTopLeft={4}
roundedTopRight={4}
borderBottomWidth="1px"
{...rest}>
<Text fontWeight="bold">{children}</Text>
</Flex>
);
};

0
hyperglass/ui/components/Card/index.mjs → hyperglass/ui/components/Card/index.ts
View File

5
hyperglass/ui/components/Card/types.ts Normal file
View File

@@ -0,0 +1,5 @@
import type { FlexProps } from '@chakra-ui/core';
export interface ICardBody extends Omit<FlexProps, 'onClick'> {
onClick?: () => boolean;
}

33
hyperglass/ui/context/GlobalState.ts Normal file
View File

@@ -0,0 +1,33 @@
import { createState, useState } from '@hookstate/core';
import type { IGlobalState } from './types';
// const StateContext = createContext(null);
// export const StateProvider = ({ children }) => {
// const [isSubmitting, setSubmitting] = useState(false);
// const [formData, setFormData] = useState({});
// const [greetingAck, setGreetingAck] = useSessionStorage('hyperglass-greeting-ack', false);
// const resetForm = layoutRef => {
// layoutRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
// setSubmitting(false);
// setFormData({});
// };
// const value = useMemo(() => ({
// isSubmitting,
// setSubmitting,
// formData,
// setFormData,
// greetingAck,
// setGreetingAck,
// resetForm,
// }));
// return <StateContext.Provider value={value}>{children}</StateContext.Provider>;
// };
// export const useHyperglassState = () => useContext(StateContext);
export const globalState = createState<IGlobalState>({
isSubmitting: false,
formData: { query_location: [], query_target: '', query_type: '', query_vrf: '' },
});
export const useGlobalState = () => useState(globalState);

35
hyperglass/ui/context/HyperglassProvider.js
View File

@@ -1,35 +0,0 @@
import * as React from 'react';
import { createContext, useContext, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { CSSReset, ThemeProvider } from '@chakra-ui/core';
import { MediaProvider } from './MediaProvider';
import { StateProvider } from './StateProvider';
import { makeTheme, defaultTheme } from 'app/util';
// Disable SSR for ColorModeProvider
const ColorModeProvider = dynamic(
() => import('@chakra-ui/core').then(mod => mod.ColorModeProvider),
{ ssr: false },
);
const HyperglassContext = createContext(null);
export const HyperglassProvider = ({ config, children }) => {
const value = useMemo(() => config, [config]);
const userTheme = value && makeTheme(value.web.theme);
const theme = value ? userTheme : defaultTheme;
return (
<ThemeProvider theme={theme}>
<ColorModeProvider value={config.web.theme.default_color_mode ?? null}>
<CSSReset />
<MediaProvider theme={theme}>
<HyperglassContext.Provider value={value}>
<StateProvider>{children}</StateProvider>
</HyperglassContext.Provider>
</MediaProvider>
</ColorModeProvider>
</ThemeProvider>
);
};
export const useConfig = () => useContext(HyperglassContext);

24
hyperglass/ui/context/HyperglassProvider.tsx Normal file
View File

@@ -0,0 +1,24 @@
import * as React from 'react';
import { createContext, useContext, useMemo } from 'react';
import { ChakraProvider, useColorModeValue } from '@chakra-ui/core';
import { makeTheme, defaultTheme } from '~/util';
import type { IConfig } from '~/types';
import type { IHyperglassProvider } from './types';
const HyperglassContext = createContext<IConfig>(Object());
export const HyperglassProvider = (props: IHyperglassProvider) => {
const { config, children } = props;
const value = useMemo(() => config, []);
const userTheme = value && makeTheme(value.web.theme);
const theme = value ? userTheme : defaultTheme;
return (
<ChakraProvider theme={theme}>
<HyperglassContext.Provider value={value}>{children}</HyperglassContext.Provider>
</ChakraProvider>
);
};
export const useConfig = () => useContext(HyperglassContext);
export const useColorValue = useColorModeValue;

28
hyperglass/ui/context/StateProvider.js
View File

@@ -1,28 +0,0 @@
import * as React from 'react';
import { createContext, useContext, useMemo, useState } from 'react';
import { useSessionStorage } from 'app/hooks';
const StateContext = createContext(null);
export const StateProvider = ({ children }) => {
const [isSubmitting, setSubmitting] = useState(false);
const [formData, setFormData] = useState({});
const [greetingAck, setGreetingAck] = useSessionStorage('hyperglass-greeting-ack', false);
const resetForm = layoutRef => {
layoutRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
setSubmitting(false);
setFormData({});
};
const value = useMemo(() => ({
isSubmitting,
setSubmitting,
formData,
setFormData,
greetingAck,
setGreetingAck,
resetForm,
}));
return <StateContext.Provider value={value}>{children}</StateContext.Provider>;
};
export const useHyperglassState = () => useContext(StateContext);

2
hyperglass/ui/context/index.mjs → hyperglass/ui/context/index.ts
View File

@@ -1,3 +1,3 @@
export * from './HyperglassProvider';
export * from './MediaProvider';
export * from './StateProvider';
export * from './GlobalState';

12
hyperglass/ui/context/types.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { ReactNode, RefObject } from 'react';
import type { IConfig, IFormData } from '~/types';
export interface IHyperglassProvider {
config: IConfig;
children: ReactNode;
}
export interface IGlobalState {
isSubmitting: boolean;
formData: IFormData;
}

1
hyperglass/ui/globals.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
type Dict<T = string> = { [k: string]: T };

0
hyperglass/ui/hooks/index.mjs → hyperglass/ui/hooks/index.ts
View File

16
hyperglass/ui/jsconfig.json
View File

@@ -1,16 +0,0 @@
{
"compilerOptions": {
"target": "ES2017",
"module": "esnext",
"baseUrl": ".",
"paths": {
"app/components": ["components/index"],
"app/components/*": ["components/*"],
"app/context": ["context/index"],
"app/context/*": ["context/*"],
"app/hooks": ["hooks/index"],
"app/hooks/*": ["hooks/*"],
"app/util": ["util/index"]
}
}
}

2
hyperglass/ui/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
/// <reference types="next" />
/// <reference types="next/types/global" />

46
hyperglass/ui/package.json vendored
View File

@@ -15,16 +15,14 @@
},
"browserslist": "> 0.25%, not dead",
"dependencies": {
"@chakra-ui/core": "^0.8",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@chakra-ui/core": "1.0.0-rc.5",
"@chakra-ui/theme": "1.0.0-rc.5",
"@hookstate/core": "^3.0.1",
"@meronex/icons": "^4.0.0",
"@styled-system/should-forward-prop": "^5.1.5",
"axios": "^0.19.2",
"axios-hooks": "^1.9.0",
"chroma-js": "^2.1.0",
"dayjs": "^1.8.25",
"emotion-theming": "^10.0.27",
"framer-motion": "^1.10.0",
"lodash": "^4.17.15",
"next": "^9.5.4",
@@ -37,55 +35,27 @@
"react-string-replace": "^0.4.4",
"react-table": "^7.0.4",
"string-format": "^2.0.0",
"styled-system": "^5.1.5",
"tempy": "^0.5.0",
"use-media": "^1.4.0",
"yup": "^0.28.3"
},
"devDependencies": {
"@types/node": "^14.11.10",
"@types/react-select": "^3.0.22",
"@typescript-eslint/eslint-plugin": "^2.24.0",
"@typescript-eslint/parser": "^2.24.0",
"@upstatement/eslint-config": "^0.4.3",
"@upstatement/prettier-config": "^0.3.0",
"babel-eslint": "^10.1.0",
"es-check": "^5.1.0",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.2.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.20.1",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.3.0",
"express": "^4.17.1",
"http-proxy-middleware": "0.20.0",
"prettier": "^1.19.1"
},
"eslintConfig": {
"parser": "babel-eslint",
"rules": {
"max-len": [
"error",
100
],
"react/prop-types": 0,
"react/jsx-filename-extension": 0,
"react/jsx-props-no-spreading": 0,
"no-bitwise": 0,
"object-shorthand": 0,
"no-plusplus": 0,
"no-param-reassign": 0,
"no-unused-expressions": 0,
"no-nested-ternary": 0,
"no-underscore-dangle": 0,
"camelcase": 0
},
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"env": {
"browser": true
}
"prettier": "2.0",
"typescript": "^4.0.3"
}
}

79
hyperglass/ui/tsconfig.json Normal file
View File

@@ -0,0 +1,79 @@
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, // "lib": [], /* Specify library files to be included in the compilation. */
// "checkJs": true, /* Report errors in .js files. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
// "outDir": "./", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
"downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */, // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"baseUrl": "." /* Base directory to resolve non-absolute module names. */,
"paths": {
/* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
"~/components": ["components/index"],
"~/components/*": ["components/*"],
"~/context": ["context/index"],
"~/context/*": ["context/*"],
"~/hooks": ["hooks/index"],
"~/hooks/*": ["hooks/*"],
"~/state": ["state/index"],
"~/state/*": ["state/*"],
"~/types": ["types/index"],
"~/types/*": ["types/*"],
"~/util": ["util/index"],
"~/util/*": ["util/*"]
},
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [] /* List of folders to include type definitions from. */,
// "types": [] /* Type declaration files to be included in compilation. */,
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"noEmit": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "globals.d.ts"]
}

163
hyperglass/ui/types/config.ts Normal file
View File

@@ -0,0 +1,163 @@
import { Colors, Fonts } from './theme';
export interface IConfigMessages {
no_input: string;
acl_denied: string;
acl_not_allowed: string;
feature_not_enabled: string;
invalid_input: string;
invalid_field: string;
general: string;
request_timeout: string;
connection_error: string;
authentication_error: string;
no_response: string;
vrf_not_associated: string;
vrf_not_found: string;
no_output: string;
parsing_error: string;
}
export interface IConfigTheme {
colors: Colors;
default_color_mode: 'light' | 'dark' | null;
fonts: Fonts;
}
export interface IConfigWebText {
title_mode: string;
title: string;
subtitle: string;
query_location: string;
query_type: string;
query_target: string;
query_vrf: string;
fqdn_tooltip: string;
cache_prefix: string;
cache_icon: string;
complete_time: string;
rpki_invalid: string;
rpki_valid: string;
rpki_unknown: string;
rpki_unverified: string;
}
export interface IConfigWeb {
credit: { enable: boolean };
dns_provider: { name: string; url: string };
external_link: { enable: boolean; title: string; url: string };
greeting: { enable: boolean; title: string; button: string; required: boolean };
help_menu: { enable: boolean; title: string };
logo: { width: string; height: string | null; light_format: string; dark_format: string };
terms: { enable: boolean; title: string };
text: IConfigWebText;
theme: IConfigTheme;
}
export interface IQuery {
name: string;
enable: boolean;
display_name: string;
}
export interface IBGPCommunity {
community: string;
display_name: string;
description: string;
}
export interface IQueryBGPRoute extends IQuery {}
export interface IQueryBGPASPath extends IQuery {}
export interface IQueryPing extends IQuery {}
export interface IQueryTraceroute extends IQuery {}
export interface IQueryBGPCommunity extends IQuery {
mode: 'input' | 'select';
communities: IBGPCommunity[];
}
export interface IConfigQueries {
bgp_route: IQueryBGPRoute;
bgp_community: IQueryBGPCommunity;
bgp_aspath: IQueryBGPASPath;
ping: IQueryPing;
traceroute: IQueryTraceroute;
list: IQuery[];
}
interface IDeviceVrfBase {
id: string;
display_name: string;
}
export interface IDeviceVrf extends IDeviceVrfBase {
ipv4: boolean;
ipv6: boolean;
}
interface IDeviceBase {
network: string;
display_name: string;
}
export interface IDevice extends IDeviceBase {
vrfs: IDeviceVrf[];
}
export interface INetworkLocation extends IDeviceBase {
vrfs: IDeviceVrfBase[];
}
export interface INetwork {
display_name: string;
locations: INetworkLocation[];
}
export type TParsedDataField = [string, string, 'left' | 'right' | 'center' | null];
export interface IQueryContent {
content: string;
enable: boolean;
params: {
primary_asn: IConfig['primary_asn'];
org_name: IConfig['org_name'];
site_title: IConfig['site_title'];
title: string;
[k: string]: string;
};
}
export interface IConfigContent {
help_menu: string;
terms: string;
credit: string;
greeting: string;
vrf: {
[k: string]: {
bgp_route: IQueryContent;
bgp_community: IQueryContent;
bgp_aspath: IQueryContent;
ping: IQueryContent;
traceroute: IQueryContent;
};
};
}
export interface IConfig {
cache: { show_text: boolean; timeout: number };
debug: boolean;
developer_mode: boolean;
primary_asn: string;
request_timeout: number;
org_name: string;
google_analytics?: string;
site_title: string;
site_keywords: string[];
web: IConfigWeb;
messages: IConfigMessages;
hyperglass_version: string;
queries: IConfigQueries;
devices: IDevice[];
vrfs: IDeviceVrfBase[];
parsed_data_fields: TParsedDataField[];
content: IConfigContent;
}

8
hyperglass/ui/types/data.ts Normal file
View File

@@ -0,0 +1,8 @@
export type TQueryTypes = 'bgp_route' | 'bgp_community' | 'bgp_aspath' | 'ping' | 'traceroute';
export interface IFormData {
query_location: string[];
query_type: TQueryTypes | '';
query_vrf: string;
query_target: string;
}

3
hyperglass/ui/types/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export * from './config';
export * from './theme';
export * from './data';

46
hyperglass/ui/types/theme.ts Normal file
View File

@@ -0,0 +1,46 @@
import type { ColorHues } from '@chakra-ui/theme/dist/types/foundations/colors';
interface ChakraColors {
transparent: string;
current: string;
black: string;
white: string;
whiteAlpha: ColorHues;
blackAlpha: ColorHues;
gray: ColorHues;
red: ColorHues;
orange: ColorHues;
yellow: ColorHues;
green: ColorHues;
teal: ColorHues;
blue: ColorHues;
cyan: ColorHues;
purple: ColorHues;
pink: ColorHues;
linkedin: ColorHues;
facebook: ColorHues;
messenger: ColorHues;
whatsapp: ColorHues;
twitter: ColorHues;
telegram: ColorHues;
}
interface CustomColors {
primary: ColorHues;
secondary: ColorHues;
tertiary: ColorHues;
dark: ColorHues;
light: ColorHues;
}
type AllColors = CustomColors & ChakraColors;
type ColorKey = keyof AllColors;
export interface Colors extends AllColors {
original: { [key in ColorKey]: string };
}
export interface Fonts {
body: string;
mono: string;
}

0
hyperglass/ui/util/index.mjs → hyperglass/ui/util/index.ts
View File

1680
hyperglass/ui/yarn.lock vendored
View File

File diff suppressed because it is too large Load Diff