mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
refactor params.branding → params.web
This commit is contained in:
@@ -144,7 +144,7 @@ try:
|
||||
elif not user_config:
|
||||
params = _params.Params()
|
||||
try:
|
||||
params.branding.text.subtitle = params.branding.text.subtitle.format(
|
||||
params.web.text.subtitle = params.web.text.subtitle.format(
|
||||
**params.dict(exclude={"branding", "features", "messages"})
|
||||
)
|
||||
except KeyError:
|
||||
@@ -372,22 +372,20 @@ def _build_vrf_help():
|
||||
content_vrf = _build_vrf_help()
|
||||
|
||||
content_help_params = copy.copy(content_params)
|
||||
content_help_params["title"] = params.branding.help_menu.title
|
||||
content_help_params["title"] = params.web.help_menu.title
|
||||
content_help = asyncio.run(
|
||||
get_markdown(
|
||||
config_path=params.branding.help_menu,
|
||||
config_path=params.web.help_menu,
|
||||
default=DEFAULT_HELP,
|
||||
params=content_help_params,
|
||||
)
|
||||
)
|
||||
|
||||
content_terms_params = copy.copy(content_params)
|
||||
content_terms_params["title"] = params.branding.terms.title
|
||||
content_terms_params["title"] = params.web.terms.title
|
||||
content_terms = asyncio.run(
|
||||
get_markdown(
|
||||
config_path=params.branding.terms,
|
||||
default=DEFAULT_TERMS,
|
||||
params=content_terms_params,
|
||||
config_path=params.web.terms, default=DEFAULT_TERMS, params=content_terms_params
|
||||
)
|
||||
)
|
||||
content_credit = CREDIT
|
||||
|
@@ -18,16 +18,17 @@ from pydantic import validator
|
||||
|
||||
# Project Imports
|
||||
from hyperglass.configuration.models._utils import HyperglassModel
|
||||
from hyperglass.configuration.models.branding import Branding
|
||||
from hyperglass.configuration.models.docs import Docs
|
||||
from hyperglass.configuration.models.features import Features
|
||||
from hyperglass.configuration.models.messages import Messages
|
||||
from hyperglass.configuration.models.opengraph import OpenGraph
|
||||
from hyperglass.configuration.models.web import Web
|
||||
|
||||
|
||||
class Params(HyperglassModel):
|
||||
"""Validation model for all configuration variables."""
|
||||
|
||||
# Top Level Params
|
||||
debug: StrictBool = False
|
||||
developer_mode: StrictBool = False
|
||||
primary_asn: StrictStr = "65001"
|
||||
@@ -50,8 +51,6 @@ class Params(HyperglassModel):
|
||||
"network",
|
||||
"isp",
|
||||
]
|
||||
opengraph: OpenGraph = OpenGraph()
|
||||
docs: Docs = Docs()
|
||||
google_analytics: StrictStr = ""
|
||||
redis_host: StrictStr = "localhost"
|
||||
redis_port: StrictInt = 6379
|
||||
@@ -62,6 +61,13 @@ class Params(HyperglassModel):
|
||||
log_file: Optional[FilePath]
|
||||
cors_origins: List[StrictStr] = []
|
||||
|
||||
# Sub Level Params
|
||||
docs: Docs = Docs()
|
||||
features: Features = Features()
|
||||
messages: Messages = Messages()
|
||||
opengraph: OpenGraph = OpenGraph()
|
||||
web: Web = Web()
|
||||
|
||||
@validator("listen_address", pre=True, always=True)
|
||||
def validate_listen_address(cls, value, values):
|
||||
"""Set default listen_address based on debug mode.
|
||||
@@ -118,7 +124,3 @@ class Params(HyperglassModel):
|
||||
f'/tmp/hyperglass_{now.strftime(r"%Y%M%d-%H%M%S")}.log' # noqa: S108
|
||||
)
|
||||
return value
|
||||
|
||||
features: Features = Features()
|
||||
branding: Branding = Branding()
|
||||
messages: Messages = Messages()
|
||||
|
@@ -19,7 +19,7 @@ from pydantic.color import Color
|
||||
from hyperglass.configuration.models._utils import HyperglassModel
|
||||
|
||||
|
||||
class Branding(HyperglassModel):
|
||||
class Web(HyperglassModel):
|
||||
"""Validation model for params.branding."""
|
||||
|
||||
class Colors(HyperglassModel):
|
@@ -48,7 +48,7 @@ class Query(BaseModel):
|
||||
params.messages.invalid_field,
|
||||
level="warning",
|
||||
input=value,
|
||||
field=params.branding.text.query_location,
|
||||
field=params.web.text.query_location,
|
||||
)
|
||||
return value
|
||||
|
||||
|
@@ -3,13 +3,15 @@ import { Flex, useColorMode, useTheme } from "@chakra-ui/core";
|
||||
import { FiCode } from "react-icons/fi";
|
||||
import { GoLinkExternal } from "react-icons/go";
|
||||
import format from "string-format";
|
||||
import useConfig from "~/components/HyperglassProvider";
|
||||
import FooterButton from "~/components/FooterButton";
|
||||
import FooterContent from "~/components/FooterContent";
|
||||
|
||||
format.extend(String.prototype, {});
|
||||
|
||||
export default ({ general, help, extLink, credit, terms, content }) => {
|
||||
const Footer = () => {
|
||||
const theme = useTheme();
|
||||
const config = useConfig();
|
||||
const { colorMode } = useColorMode();
|
||||
const footerBg = { light: theme.colors.blackAlpha[50], dark: theme.colors.whiteAlpha[100] };
|
||||
const footerColor = { light: theme.colors.black, dark: theme.colors.white };
|
||||
@@ -20,9 +22,9 @@ export default ({ general, help, extLink, credit, terms, content }) => {
|
||||
const [helpVisible, showHelp] = useState(false);
|
||||
const [termsVisible, showTerms] = useState(false);
|
||||
const [creditVisible, showCredit] = useState(false);
|
||||
const extUrl = extLink.url.includes("{primary_asn}")
|
||||
? extLink.url.format({ primary_asn: general.primary_asn })
|
||||
: extLink.url || "/";
|
||||
const extUrl = config.external_link.url.includes("{primary_asn}")
|
||||
? config.external_link.url.format({ primary_asn: config.primary_asn })
|
||||
: config.external_link.url || "/";
|
||||
const handleCollapse = i => {
|
||||
if (i === "help") {
|
||||
showTerms(false);
|
||||
@@ -40,31 +42,31 @@ export default ({ general, help, extLink, credit, terms, content }) => {
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{help.enable && (
|
||||
{config.help.enable && (
|
||||
<FooterContent
|
||||
isOpen={helpVisible}
|
||||
content={content.help_menu}
|
||||
title={help.title}
|
||||
content={config.content.help_menu}
|
||||
title={config.help.title}
|
||||
bg={footerBg[colorMode]}
|
||||
borderColor={contentBorder[colorMode]}
|
||||
side="left"
|
||||
/>
|
||||
)}
|
||||
{terms.enable && (
|
||||
{config.terms.enable && (
|
||||
<FooterContent
|
||||
isOpen={termsVisible}
|
||||
content={content.terms}
|
||||
title={terms.title}
|
||||
content={config.content.terms}
|
||||
title={config.terms.title}
|
||||
bg={footerBg[colorMode]}
|
||||
borderColor={contentBorder[colorMode]}
|
||||
side="left"
|
||||
/>
|
||||
)}
|
||||
{credit.enable && (
|
||||
{config.credit.enable && (
|
||||
<FooterContent
|
||||
isOpen={creditVisible}
|
||||
content={content.credit}
|
||||
title={credit.title}
|
||||
content={config.content.credit}
|
||||
title={config.credit.title}
|
||||
bg={footerBg[colorMode]}
|
||||
borderColor={contentBorder[colorMode]}
|
||||
side="right"
|
||||
@@ -82,14 +84,14 @@ export default ({ general, help, extLink, credit, terms, content }) => {
|
||||
color={footerColor[colorMode]}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
{terms.enable && (
|
||||
{config.terms.enable && (
|
||||
<FooterButton side="left" onClick={() => handleCollapse("terms")}>
|
||||
{terms.title}
|
||||
{config.terms.title}
|
||||
</FooterButton>
|
||||
)}
|
||||
{help.enable && (
|
||||
{config.help.enable && (
|
||||
<FooterButton side="left" onClick={() => handleCollapse("help")}>
|
||||
{help.title}
|
||||
{config.help.title}
|
||||
</FooterButton>
|
||||
)}
|
||||
<Flex
|
||||
@@ -100,12 +102,12 @@ export default ({ general, help, extLink, credit, terms, content }) => {
|
||||
marginRight="auto"
|
||||
p={0}
|
||||
/>
|
||||
{credit.enable && (
|
||||
{config.credit.enable && (
|
||||
<FooterButton side="right" onClick={() => handleCollapse("credit")}>
|
||||
<FiCode />
|
||||
</FooterButton>
|
||||
)}
|
||||
{extLink.enable && (
|
||||
{config.external_link.enable && (
|
||||
<FooterButton
|
||||
as="a"
|
||||
href={extUrl}
|
||||
@@ -115,10 +117,13 @@ export default ({ general, help, extLink, credit, terms, content }) => {
|
||||
rightIcon={GoLinkExternal}
|
||||
size="xs"
|
||||
>
|
||||
{extLink.title}
|
||||
{config.external_link.title}
|
||||
</FooterButton>
|
||||
)}
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Footer.displayName = "Footer";
|
||||
export default Footer;
|
||||
|
@@ -21,16 +21,14 @@ const formSchema = config =>
|
||||
query_location: yup
|
||||
.array()
|
||||
.of(yup.string())
|
||||
.required(
|
||||
config.messages.no_input.format({ field: config.branding.text.query_location })
|
||||
),
|
||||
.required(config.messages.no_input.format({ field: config.web.text.query_location })),
|
||||
query_type: yup
|
||||
.string()
|
||||
.required(config.messages.no_input.format({ field: config.branding.text.query_type })),
|
||||
.required(config.messages.no_input.format({ field: config.web.text.query_type })),
|
||||
query_vrf: yup.string(),
|
||||
query_target: yup
|
||||
.string()
|
||||
.required(config.messages.no_input.format({ field: config.branding.text.query_target }))
|
||||
.required(config.messages.no_input.format({ field: config.web.text.query_target }))
|
||||
});
|
||||
|
||||
const FormRow = ({ children, ...props }) => (
|
||||
@@ -121,14 +119,14 @@ const HyperglassForm = React.forwardRef(
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<FormRow>
|
||||
<FormField
|
||||
label={config.branding.text.query_location}
|
||||
label={config.web.text.query_location}
|
||||
name="query_location"
|
||||
error={errors.query_location}
|
||||
>
|
||||
<QueryLocation onChange={handleChange} locations={config.networks} />
|
||||
</FormField>
|
||||
<FormField
|
||||
label={config.branding.text.query_type}
|
||||
label={config.web.text.query_type}
|
||||
name="query_type"
|
||||
error={errors.query_type}
|
||||
labelAddOn={
|
||||
@@ -141,19 +139,19 @@ const HyperglassForm = React.forwardRef(
|
||||
<FormRow>
|
||||
{availVrfs.length > 0 && (
|
||||
<FormField
|
||||
label={config.branding.text.query_vrf}
|
||||
label={config.web.text.query_vrf}
|
||||
name="query_vrf"
|
||||
error={errors.query_vrf}
|
||||
>
|
||||
<QueryVrf
|
||||
placeholder={config.branding.text.query_vrf}
|
||||
placeholder={config.web.text.query_vrf}
|
||||
vrfs={availVrfs}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
<FormField
|
||||
label={config.branding.text.query_target}
|
||||
label={config.web.text.query_target}
|
||||
name="query_target"
|
||||
error={errors.query_target}
|
||||
fieldAddOn={
|
||||
@@ -168,7 +166,7 @@ const HyperglassForm = React.forwardRef(
|
||||
>
|
||||
<QueryTarget
|
||||
name="query_target"
|
||||
placeholder={config.branding.text.query_target}
|
||||
placeholder={config.web.text.query_target}
|
||||
register={register}
|
||||
resolveTarget={["ping", "traceroute", "bgp_route"].includes(
|
||||
queryType
|
||||
|
@@ -14,7 +14,7 @@ const HyperglassContext = createContext(null);
|
||||
|
||||
export const HyperglassProvider = ({ config, children }) => {
|
||||
const value = useMemo(() => config, [config]);
|
||||
const userTheme = value && makeTheme(value.branding);
|
||||
const userTheme = value && makeTheme(value.web);
|
||||
const theme = value ? userTheme : defaultTheme;
|
||||
return (
|
||||
<HyperglassContext.Provider value={value}>
|
||||
|
@@ -27,7 +27,7 @@ const Layout = () => {
|
||||
setSubmitting(false);
|
||||
};
|
||||
const headerHeight =
|
||||
config.branding.text.title_mode === "all"
|
||||
config.web.text.title_mode === "all"
|
||||
? headerHeightAll[isSubmitting]
|
||||
: headerHeightDefault[isSubmitting];
|
||||
return (
|
||||
@@ -83,15 +83,8 @@ const Layout = () => {
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Flex>
|
||||
<Footer
|
||||
general={config.general}
|
||||
content={config.content}
|
||||
terms={config.branding.terms}
|
||||
help={config.branding.help_menu}
|
||||
credit={config.branding.credit}
|
||||
extLink={config.branding.external_link}
|
||||
/>
|
||||
{config.general.developer_mode && <Debugger />}
|
||||
<Footer />
|
||||
{config.developer_mode && <Debugger />}
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
|
@@ -8,10 +8,10 @@ export default () => {
|
||||
const config = useConfig();
|
||||
const theme = useTheme();
|
||||
const [location, setLocation] = useState({});
|
||||
const title = config?.general.org_name || "hyperglass";
|
||||
const description = config?.general.site_description || "The modern looking glass.";
|
||||
const title = config?.org_name || "hyperglass";
|
||||
const description = config?.site_description || "The modern looking glass.";
|
||||
const siteName = `${title} - ${description}`;
|
||||
const keywords = config?.general.site_keywords || [
|
||||
const keywords = config?.site_keywords || [
|
||||
"hyperglass",
|
||||
"looking glass",
|
||||
"lg",
|
||||
@@ -27,15 +27,13 @@ export default () => {
|
||||
"network",
|
||||
"isp"
|
||||
];
|
||||
const author = config?.general.org_name || "Matt Love, matt@hyperglass.io";
|
||||
const language = config?.general.language || "en";
|
||||
const author = config?.org_name || "Matt Love, matt@hyperglass.io";
|
||||
const language = config?.language || "en";
|
||||
const currentYear = new Date().getFullYear();
|
||||
const copyright = config
|
||||
? `${currentYear} ${config.general.org_name}`
|
||||
: `${currentYear} hyperglass`;
|
||||
const ogImage = config?.general.opengraph.image || null;
|
||||
const ogImageHeight = config?.general.opengraph.height || null;
|
||||
const ogImageWidth = config?.general.opengraph.width || null;
|
||||
const copyright = config ? `${currentYear} ${config.org_name}` : `${currentYear} hyperglass`;
|
||||
const ogImage = config?.opengraph.image || null;
|
||||
const ogImageHeight = config?.opengraph.height || null;
|
||||
const ogImageWidth = config?.opengraph.width || null;
|
||||
const primaryFont = googleFontUrl(theme.fonts.body);
|
||||
const monoFont = googleFontUrl(theme.fonts.mono);
|
||||
useEffect(() => {
|
||||
|
@@ -66,7 +66,7 @@ const ResolvedTarget = React.forwardRef(({ target, setTarget, formQueryTarget },
|
||||
<Tag>
|
||||
<Tooltip
|
||||
hasArrow
|
||||
label={config.branding.text.fqdn_tooltip.format({ protocol: "IPv4" })}
|
||||
label={config.web.text.fqdn_tooltip.format({ protocol: "IPv4" })}
|
||||
placement="bottom"
|
||||
>
|
||||
<Button
|
||||
@@ -98,7 +98,7 @@ const ResolvedTarget = React.forwardRef(({ target, setTarget, formQueryTarget },
|
||||
<Tag>
|
||||
<Tooltip
|
||||
hasArrow
|
||||
label={config.branding.text.fqdn_tooltip.format({ protocol: "IPv6" })}
|
||||
label={config.web.text.fqdn_tooltip.format({ protocol: "IPv6" })}
|
||||
placement="bottom"
|
||||
>
|
||||
<Button
|
||||
|
@@ -75,7 +75,7 @@ const Results = ({ queryLocation, queryType, queryVrf, queryTarget, setSubmittin
|
||||
animate={labelAnimate.left[mediaSize]}
|
||||
transition={{ duration: 0.3, delay: 0.3 }}
|
||||
exit={{ opacity: 0, x: -100 }}
|
||||
label={config.branding.text.query_type}
|
||||
label={config.web.text.query_type}
|
||||
value={config.features[queryType].display_name}
|
||||
valueBg={theme.colors.cyan[500]}
|
||||
fontSize={["xs", "sm", "sm", "sm"]}
|
||||
@@ -85,7 +85,7 @@ const Results = ({ queryLocation, queryType, queryVrf, queryTarget, setSubmittin
|
||||
animate={labelAnimate.center[mediaSize]}
|
||||
transition={{ duration: 0.3, delay: 0.3 }}
|
||||
exit={{ opacity: 0, scale: 0.5 }}
|
||||
label={config.branding.text.query_target}
|
||||
label={config.web.text.query_target}
|
||||
value={queryTarget}
|
||||
valueBg={theme.colors.teal[600]}
|
||||
fontSize={["xs", "sm", "sm", "sm"]}
|
||||
@@ -95,7 +95,7 @@ const Results = ({ queryLocation, queryType, queryVrf, queryTarget, setSubmittin
|
||||
animate={labelAnimate.right[mediaSize]}
|
||||
transition={{ duration: 0.3, delay: 0.3 }}
|
||||
exit={{ opacity: 0, x: 100 }}
|
||||
label={config.branding.text.query_vrf}
|
||||
label={config.web.text.query_vrf}
|
||||
value={matchedVrf.display_name}
|
||||
valueBg={theme.colors.blue[500]}
|
||||
fontSize={["xs", "sm", "sm", "sm"]}
|
||||
@@ -131,7 +131,7 @@ const Results = ({ queryLocation, queryType, queryVrf, queryTarget, setSubmittin
|
||||
transition={{ duration: 0.3, delay: i * 0.3 }}
|
||||
exit={{ opacity: 0, y: 300 }}
|
||||
key={loc}
|
||||
timeout={config.general.request_timeout * 1000}
|
||||
timeout={config.request_timeout * 1000}
|
||||
device={config.devices[loc]}
|
||||
queryLocation={loc}
|
||||
queryType={queryType}
|
||||
|
@@ -71,9 +71,9 @@ const btnJustify = {
|
||||
false: ["flex-start", "center"]
|
||||
};
|
||||
export default React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
|
||||
const { branding } = useConfig();
|
||||
const { web } = useConfig();
|
||||
const { mediaSize } = useMedia();
|
||||
const titleMode = branding.text.title_mode;
|
||||
const titleMode = web.text.title_mode;
|
||||
const MatchedMode = modeMap[titleMode];
|
||||
return (
|
||||
<Button
|
||||
@@ -90,8 +90,8 @@ export default React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
|
||||
<MatchedMode
|
||||
mediaSize={mediaSize}
|
||||
showSubtitle={!isSubmitting}
|
||||
text={branding.text}
|
||||
logo={branding.logo}
|
||||
text={web.text}
|
||||
logo={web.logo}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
|
Reference in New Issue
Block a user