setUrl(e.target.value)} />;\n const isSubmitDisabled = !url || (editing && url === hookUrl);\n return (\n <>\n \n \n {editing ? (\n \n {urlInput}\n \n ) : (\n urlInput\n )}\n {editing ? (\n \n {descriptionInput}\n \n ) : (\n descriptionInput\n )}\n \n setSecret(e.target.value)}\n type={editing ? 'password' : 'text'}\n value={secret}\n />\n \n
\n \n \n \n {!editing && (\n \n )}\n
\n \n );\n};\n\nexport const WebhookCreation = ({ adding, onCancel, ...props }) => (\n \n \n
Add a webhook
\n \n \n \n \n \n \n \n);\n\nexport default WebhookConfiguration;\n","import createSvgIcon from './utils/createSvgIcon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z\"\n}), 'Circle');","// Copyright 2022 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useMemo, useState } from 'react';\n\n// material ui\nimport { ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Circle as CircleIcon } from '@mui/icons-material';\nimport { Accordion, AccordionDetails, AccordionSummary, accordionClasses } from '@mui/material';\nimport { accordionSummaryClasses } from '@mui/material/AccordionSummary';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { DEVICE_LIST_DEFAULTS } from '../../../constants/deviceConstants';\nimport { toggle } from '../../../helpers';\nimport Pagination from '../../common/pagination';\nimport Time from '../../common/time';\n\nconst useStyles = makeStyles()(theme => ({\n activityList: {\n display: 'flexbox',\n flexDirection: 'column',\n ['.header']: {\n padding: `0px ${theme.spacing(2)}`,\n marginBottom: theme.spacing()\n },\n [`.header, .${accordionSummaryClasses.content}`]: {\n display: 'grid',\n gridTemplateColumns: '1fr 2fr 1fr 50px'\n },\n [`.${accordionSummaryClasses.content}`]: {\n cursor: 'pointer',\n [`&>time, &>.trigger-type`]: {\n color: theme.palette.secondary.main\n },\n [`&>:last-child`]: {\n paddingRight: 'initial'\n }\n },\n [`.${accordionClasses.root}`]: {\n backgroundColor: theme.palette.background.default\n }\n },\n divider: { marginTop: theme.spacing(), marginBottom: theme.spacing() }\n}));\n\nconst triggerMap = {\n 'device-decommissioned': 'Device decommissioned',\n 'device-provisioned': 'Device provisioned',\n 'device-status-changed': 'Device status updated'\n};\n\nconst iconStyles = {\n status: { fontSize: 12, marginRight: 8 },\n dropDown: { justifySelf: 'right', marginRight: 8 }\n};\n\nconst DeliveryStatus = ({ entry, webhook = {} }) => {\n const { delivery_statuses = [] } = entry;\n\n const status = useMemo(() => {\n const status = delivery_statuses.find(status => status.integration_id === webhook.id) ?? delivery_statuses[0];\n if (status) {\n return { code: status.status_code, signal: status.success ? 'green' : 'red' };\n }\n return { code: 418, signal: 'disabled' };\n }, [JSON.stringify(delivery_statuses), webhook.id]);\n\n return (\n \n
\n
= 400 ? 'muted' : ''}>{status.code}
\n
{triggerMap[entry.type] ?? entry.type}
},\n { key: 'status', title: 'Status', render: ({ entry, webhook }) => },\n {\n key: 'details',\n title: 'Details',\n render: ({ isExpanded }) => (isExpanded ? : )\n }\n];\n\nconst ListItem = ({ entry = {}, webhook }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const { data = {} } = entry;\n\n return (\n \n setIsExpanded(toggle)}>\n {columns.map(({ key, render: Column }) => (\n \n ))}\n \n \n {JSON.stringify(data)}\n \n \n );\n};\n\nconst { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;\nconst WebhookActivity = ({ events = [], getWebhookEvents, eventTotal, webhook }) => {\n const { classes } = useStyles();\n const [page, setPage] = useState(defaultPage);\n\n useEffect(() => {\n getWebhookEvents({ page, perPage: defaultPerPage });\n }, [page]);\n\n return (\n \n {events.length ? (\n <>\n
\n {columns.map(({ key, title }) => (\n
{title}
\n ))}\n
\n
\n {events.map(entry => (\n
\n ))}\n {eventTotal > defaultPerPage && (\n
\n )}\n
\n \n ) : (\n
No webhook activity yet.
\n )}\n
\n
Manage webhook
\n
\n \n \n \n \n
\n
\n
Webhooks
\n {webhooks.length ? (\n
\n ) : (\n
\n No webhooks are configured yet. Learn more about webhooks in our{' '}\n
\n documentation\n \n
\n )}\n
dispatch(getWebhookEvents(options))}\n onCancel={onCancel}\n onSubmit={onSubmit}\n onRemove={onRemoveClick}\n webhook={selectedWebhook}\n />\n \n \n \n \n \n
\n );\n};\n\nconst ConnectionStringInput = ({ connectionConfig, isEditing, setConnectionConfig, title }) => {\n const [value, setValue] = useState(connectionConfig.connection_string);\n const debouncedValue = useDebounce(value, TIMEOUTS.debounceDefault);\n\n const { classes } = useStyles();\n\n useEffect(() => {\n setConnectionConfig({ connection_string: debouncedValue });\n }, [debouncedValue]);\n\n useEffect(() => {\n setValue(connectionConfig.connection_string);\n }, [connectionConfig.connection_string]);\n\n const updateConnectionConfig = ({ target: { value = '' } }) => setValue(value);\n\n return (\n \n );\n};\n\nconst providerConfigMap = {\n 'iot-core': ConnectionDetailsInput,\n 'iot-hub': ConnectionStringInput\n};\n\nexport const IntegrationConfiguration = ({ integration, isLast, onCancel, onDelete, onSave }) => {\n const { credentials = {}, provider } = integration;\n const [connectionConfig, setConnectionConfig] = useState(credentials);\n // eslint-disable-next-line no-unused-vars\n const { type, ...otherProps } = credentials;\n const [isEditing, setIsEditing] = useState(!Object.values(otherProps).some(i => i));\n const [isDeleting, setIsDeleting] = useState(false);\n\n const { classes } = useStyles();\n\n useEffect(() => {\n const { credentials = {} } = integration;\n // eslint-disable-next-line no-unused-vars\n const { type, ...otherProps } = credentials;\n setConnectionConfig(credentials);\n setIsEditing(!Object.values(otherProps).some(i => i));\n }, [integration]);\n\n const onCancelClick = () => {\n setIsEditing(false);\n setConnectionConfig(credentials);\n onCancel(integration);\n };\n const onDeleteClick = () => setIsDeleting(true);\n const onDeleteConfirm = () => onDelete(integration);\n const onEditClick = () => setIsEditing(true);\n const onSaveClick = () =>\n onSave({\n ...integration,\n credentials: {\n type: EXTERNAL_PROVIDER[provider].credentialsType,\n ...connectionConfig\n }\n });\n\n const ConfigInput = providerConfigMap[provider];\n const { configHint, title } = EXTERNAL_PROVIDER[provider];\n return (\n <>\n {title}
\n \n
\n
\n {isEditing ? (\n <>\n \n \n \n ) : (\n <>\n \n \n \n )}\n
\n {isDeleting &&
setIsDeleting(false)} />}\n \n
Integrations
\n {configuredIntegrations.map((integration, index) => (\n dispatch(deleteIntegration(integration))}\n onSave={onSaveClick}\n />\n ))}\n {!configuredWebhook && !!availableIntegrations.length && (\n \n )}\n {!!configuredWebhook && }\n \n \n );\n};\n\nexport default Integrations;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useMemo, useState } from 'react';\n\n// material ui\nimport { Close as CloseIcon, InfoOutlined as InfoOutlinedIcon } from '@mui/icons-material';\nimport { Button, Checkbox, Divider, Drawer, FormControl, FormHelperText, IconButton, InputLabel, MenuItem, Select, TextField, Tooltip } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport validator from 'validator';\n\nimport { ALL_DEVICES } from '../../constants/deviceConstants';\nimport { ALL_RELEASES } from '../../constants/releaseConstants';\nimport { emptyRole, emptyUiPermissions, itemUiPermissionsReducer, rolesById, uiPermissionsByArea, uiPermissionsById } from '../../constants/userConstants';\nimport { deepCompare, isEmpty } from '../../helpers';\n\nconst menuProps = {\n anchorOrigin: {\n vertical: 'bottom',\n horizontal: 'left'\n },\n transformOrigin: {\n vertical: 'top',\n horizontal: 'left'\n }\n};\n\nconst permissionEnabledDisabled = (uiPermission, values, permissionsArea, unscoped) => {\n const { permissionLevel, value: permissionValue, unscopedOnly = {} } = uiPermission;\n const disabled = values.some(permission => uiPermissionsById[permission].permissionLevel > permissionLevel);\n const enabled = values.some(permission => permission === permissionValue) || disabled;\n const skip = unscopedOnly[permissionsArea] && !unscoped;\n return { enabled, disabled, skip };\n};\n\nconst useStyles = makeStyles()(theme => ({\n buttons: { '&.flexbox.centered': { justifyContent: 'flex-end' } },\n roleDeletion: { marginRight: theme.spacing(2) },\n permissionSelect: { marginLeft: theme.spacing(-1.5) },\n permissionsTitle: { marginBottom: theme.spacing(-1), minHeight: theme.spacing(3) }\n}));\n\nconst PermissionsSelect = ({ disabled, label, onChange, options, permissionsArea, unscoped, values }) => {\n const { classes } = useStyles();\n\n const onInputChange = ({ target: { value } }) => {\n if (value.includes('')) {\n return onChange([]);\n }\n return onChange(value);\n };\n\n const { editablePermissions, selectedValues } = useMemo(\n () =>\n options.reduce(\n (accu, uiPermission) => {\n const { enabled, disabled, skip } = permissionEnabledDisabled(uiPermission, values, permissionsArea, unscoped);\n if (skip) {\n return accu;\n }\n accu.editablePermissions.push({ enabled, disabled, ...uiPermission });\n if (enabled) {\n accu.selectedValues.push(uiPermission.value);\n }\n return accu;\n },\n { editablePermissions: [], selectedValues: [] }\n ),\n [options, permissionsArea, unscoped, values]\n );\n\n return (\n \n {label && !values.length ? label : ''}\n (selectedValues.length ? selectedValues.map(value => uiPermissionsById[value].title).join(', ') : 'None')}\n value={values}\n >\n {editablePermissions.map(uiPermission => (\n \n ))}\n \n \n \n );\n};\n\nconst PermissionsAreaTitle = ({ className = '', explanation, title }) => (\n \n {title}\n \n \n \n
\n);\n\nconst PermissionsItem = ({ area, ...remainder }) => (\n <>\n \n \n \n);\n\nconst groupsFilter = stateGroups =>\n Object.entries(stateGroups).reduce(\n (accu, [name, groupInfo]) => {\n if (!groupInfo.filters.length) {\n accu.push(name);\n }\n return accu;\n },\n [ALL_DEVICES]\n );\n\nconst releasesFilter = stateReleaseTags => [ALL_RELEASES, ...Object.keys(stateReleaseTags)];\n\nconst scopedPermissionAreas = {\n groups: {\n key: 'groups',\n filter: groupsFilter,\n placeholder: 'Search groups',\n excessiveAccessConfig: {\n selector: ALL_DEVICES,\n warning: `For 'All devices', users with the Manage permission may also create, edit and delete devices groups.`\n }\n },\n releases: {\n key: 'releases',\n filter: releasesFilter,\n placeholder: 'Search release tags',\n excessiveAccessConfig: {\n selector: ALL_RELEASES,\n warning: `For 'All releases', users with the Manage permission may also upload and delete releases.`\n }\n }\n};\n\nconst maybeExtendPermissionSelection = (changedGroupSelection, currentGroup, items) => {\n if (items.every(item => changedGroupSelection.some(selectionItem => selectionItem.item === item))) {\n return changedGroupSelection;\n }\n if (changedGroupSelection.every(selection => selection.item && selection.uiPermissions.length)) {\n changedGroupSelection.push(emptyItemSelection);\n return changedGroupSelection;\n }\n // the following is horrible, but I couldn't come up with a better solution that ensures only a single partly defined definition exists\n const filtered = changedGroupSelection.filter(selection => !((!selection.item || !selection.uiPermissions.length) && selection !== currentGroup));\n if (!filtered.some(selection => !selection.item || !selection.uiPermissions.length)) {\n filtered.push(emptyItemSelection);\n }\n return filtered;\n};\n\nconst ItemSelection = ({\n disableEdit,\n items,\n itemsSelection,\n setter,\n permissionsArea,\n placeholder,\n excessiveAccessConfig: { selector: excessiveAccessSelector, warning: excessiveAccessWarning }\n}) => {\n const onItemSelect = (index, { target: { value } }, currentSelection) => {\n let changedSelection = [...currentSelection];\n changedSelection[index] = { ...changedSelection[index], item: value };\n changedSelection = maybeExtendPermissionSelection(changedSelection, changedSelection[index], items);\n setter(changedSelection);\n };\n\n const onItemPermissionSelect = (index, selectedPermissions, currentSelection) => {\n let changedSelection = [...currentSelection];\n changedSelection[index] = { ...changedSelection[index], uiPermissions: selectedPermissions };\n changedSelection = maybeExtendPermissionSelection(changedSelection, changedSelection[index], items);\n setter(changedSelection);\n };\n\n const { title, uiPermissions, explanation } = uiPermissionsByArea[permissionsArea];\n return (\n <>\n \n {itemsSelection.map((itemSelection, index) => {\n const disabled = disableEdit || itemSelection.disableEdit;\n return (\n \n
\n {disabled ? (\n // empty label as a shortcut to align the layout with the select path\n
\n ) : (\n
\n {!itemSelection.item ? placeholder : ''}\n \n \n )}\n
onItemPermissionSelect(index, selectedPermissions, itemsSelection)}\n options={uiPermissions}\n permissionsArea={permissionsArea}\n unscoped={itemSelection.item === excessiveAccessSelector}\n values={itemSelection.uiPermissions}\n />\n \n {itemSelection.item === excessiveAccessSelector && (\n
\n {excessiveAccessWarning}\n
\n )}\n
\n
{adding ? 'Add a' : 'Edit'} role
\n
\n {editing && !rolesById[selectedRole.id] && (\n \n )}\n \n \n \n
\n
\n \n \n {nameError && Invalid character in role name. Valid characters are a-z, A-Z, 0-9, _ and -}\n \n setDescription(e.target.value)}\n value={description}\n />\n
\n\n \n Permissions\n \n \n
\n
\n {!hasReleaseTags && (\n
\n )}\n
\n \n \n
\n \n );\n};\n\nexport default RoleDefinition;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\n// material ui\nimport { Add as AddIcon, ArrowRightAlt as ArrowRightAltIcon } from '@mui/icons-material';\nimport { Chip } from '@mui/material';\n\nimport { getDynamicGroups, getGroups } from '../../actions/deviceActions';\nimport { createRole, editRole, getRoles, removeRole } from '../../actions/userActions';\nimport { UNGROUPED_GROUP } from '../../constants/deviceConstants';\nimport { emptyRole, rolesById } from '../../constants/userConstants';\nimport { getFeatures } from '../../selectors';\nimport DetailsTable from '../common/detailstable';\nimport RoleDefinition from './roledefinition';\n\nconst columns = [\n { key: 'name', title: 'Role', render: ({ name }) => name },\n { key: 'description', title: 'Description', render: ({ description }) => description || '-' },\n {\n key: 'manage',\n title: 'Manage',\n render: () => (\n \n )\n }\n];\n\nexport const RoleManagement = () => {\n const [adding, setAdding] = useState(false);\n const [editing, setEditing] = useState(false);\n const [role, setRole] = useState({ ...emptyRole });\n const dispatch = useDispatch();\n const features = useSelector(getFeatures);\n const groups = useSelector(state => {\n // eslint-disable-next-line no-unused-vars\n const { [UNGROUPED_GROUP.id]: ungrouped, ...groups } = state.devices.groups.byId;\n return groups;\n });\n const releaseTags = useSelector(state => state.releases.releaseTags.reduce((accu, key) => ({ ...accu, [key]: key }), {}));\n const roles = useSelector(state => Object.entries(state.users.rolesById).map(([id, role]) => ({ id, ...role })));\n\n useEffect(() => {\n if (Object.keys(groups).length) {\n return;\n }\n dispatch(getDynamicGroups());\n dispatch(getGroups());\n dispatch(getRoles());\n }, []);\n\n const addRole = () => {\n setAdding(true);\n setEditing(false);\n setRole({ ...emptyRole });\n };\n\n const onEditRole = editedRole => {\n setAdding(false);\n setEditing(true);\n setRole(editedRole);\n };\n\n const onCancel = () => {\n setAdding(false);\n setEditing(false);\n };\n\n const onSubmit = submittedRole => {\n if (adding) {\n dispatch(createRole(submittedRole));\n } else {\n dispatch(editRole(submittedRole));\n }\n onCancel();\n };\n\n const items = useMemo(\n () =>\n Object.keys(rolesById)\n .reverse()\n .reduce((accu, key) => {\n const index = accu.findIndex(({ id }) => id === key);\n accu = [accu[index], ...accu.filter((item, itemIndex) => index !== itemIndex)];\n return accu;\n }, roles),\n [JSON.stringify(roles)]\n );\n\n return (\n \n
Roles
\n \n } label=\"Add a role\" onClick={addRole} />\n dispatch(removeRole(name))}\n selectedRole={role}\n stateGroups={groups}\n stateReleaseTags={releaseTags}\n />\n \n );\n};\n\nexport default RoleManagement;\n","import createSvgIcon from './utils/createSvgIcon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"m21.41 11.58-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z\"\n}), 'LocalOffer');","// Copyright 2021 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\n\nimport { makeStyles } from 'tss-react/mui';\n\nimport { PLANS } from '../../constants/appConstants';\nimport InfoText from '../common/infotext';\n\nexport const useStyles = makeStyles()(theme => ({\n planNote: { marginBottom: -11, fontSize: 'smaller' },\n planPanel: {\n borderColor: theme.palette.background.lightgrey,\n ['&.active,&:hover']: {\n borderColor: theme.palette.grey[50],\n boxShadow: '0 1px 6px rgba(0, 0, 0, 0.15)'\n },\n ['&.active']: {\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[400]\n },\n '&.addon': {\n alignItems: 'center',\n columnGap: 10,\n display: 'grid',\n gridTemplateColumns: 'max-content minmax(150px, min-content) 1fr max-content',\n height: 'initial',\n marginTop: 10,\n minWidth: 550,\n width: 'initial'\n },\n '&.addon.upgrade': {\n gridTemplateColumns: 'max-content minmax(120px, min-content) minmax(120px, min-content) 1fr max-content'\n }\n },\n price: { fontSize: '1rem' }\n}));\n\nexport const PlanSelection = ({ currentPlan = 'os', isTrial, offerValid, offerTag, setUpdatedPlan, updatedPlan }) => {\n const { classes } = useStyles();\n const canUpgrade = plan => Object.keys(PLANS).indexOf(plan) >= Object.keys(PLANS).indexOf(currentPlan);\n const onPlanSelect = plan => (isTrial || canUpgrade(plan) ? setUpdatedPlan(plan) : undefined);\n return (\n <>\n {isTrial ? '1. Choose a plan' : 'Plans'}
\n \n {Object.values(PLANS).map(item => (\n
onPlanSelect(item.value)}\n >\n {!isTrial && canUpgrade(item.value) && (\n {item.value === currentPlan ? 'current plan' : 'upgrade'}
\n )}\n \n {item.name} {item.offer && isTrial && offerValid ? offerTag : null}\n
\n \n {item.offer && isTrial && offerValid ? (\n <>\n
{item.offerprice}
\n
{item.price2}
\n \n ) : (\n <>\n
{item.price}
\n
{item.deviceCount}
\n \n )}\n
\n {item.features.map((feature, index) => (\n - \n {feature}\n
\n ))}\n
\n Get more features with add-ons
\n\n \n
\n Extend Mender features with our add-ons. Select one or more from the list and submit to request add-ons to be added to your plan. We'll adjust\n your subscription and confirm it with you.\n
\n {relevantAddons.map(addOn => {\n const isEligible = addOn.eligible.indexOf(updatedPlan) > -1;\n\n return (\n
(isEligible ? onAddOnClick(e, addOn.name, !addOn.isEnabled) : () => false)}\n >\n \n {addOn.title}
\n {isUpgrade && (\n \n
{addOn[updatedPlan].price}
\n
{addOn[updatedPlan].deviceCount}
\n
\n
{title}
\n {isEnterpriseUpgrade ? 'You are requesting a quote for the following subscription:' : 'You are requesting the following changes:'}\n
\n
\n Plan: {isUpgrade ? 'Upgrade to ' : ''}\n {PLANS[updatedPlan].name}\n {!isTrial && !!addOns.length && (\n \n
\n Add-ons: {addOns.map(addon => ADDONS[addon.name].title).join(', ')}\n \n )}\n
\n
\n
\n Your message\n setMessage(e.target.value)} />\n \n
\n {isTrial || isEnterpriseUpgrade\n ? `After we receive your request, we'll be in touch to discuss your needs and provide a quote.`\n : `We'll send you a confirmation of any changes to your subscription.`}\n
\n
onSendMessage(message)}\n style={{ alignSelf: 'flex-start' }}\n variant=\"contained\"\n >\n Submit request\n \n \n
Upgrade now
\n
\n
\n Your upgrade was successful! You are now signed up to the {newPlan} plan.\n
\n
Redirecting you to your organization page...
\n
\n
\n
\n
{title}
\n
{description}
\n
\n Learn more about the different plans and at{' '}\n \n mender.io/plans/pricing\n \n . Prices can change at larger device counts, please see our{' '}\n \n price calculator\n {' '}\n for more.\n
\n
\n {isTrial && offerValid && (\n
\n {offerTag} – upgrade before December 31st to get a 20% discount for 6 months on Mender Basic and Mender Professional plans. The discount will be\n automatically applied to your account.\n
\n )}\n {isTrial ?
:
}\n {isTrial && updatedPlan !== PLANS.enterprise.value && (\n <>\n
2. Enter your payment details
\n
\n You are upgrading to{' '}\n \n Mender {PLANS[updatedPlan].name}\n {' '}\n for {PLANS[updatedPlan].price}\n
\n
Promise.resolve(dispatch(cancelUpgrade(org.id)))}\n onComplete={handleUpgrade}\n onSubmit={() => Promise.resolve(dispatch(startUpgrade(org.id)))}\n setSnackbar={message => dispatch(setSnackbar(message))}\n isSignUp={true}\n />\n \n )}\n {(!isTrial || updatedPlan === PLANS.enterprise.value) && (\n \n )}\n \n
\n
\n {loadingFinished && (\n \n \n \n )}\n
\n
\n
\n
An error occured.
\n
Try refreshing the page, or look below for more information on the error that occured.
\n
\n {this.state.error.toString()}\n
\n {this.state.info.componentStack}\n \n
\n
\n We prepared an image, ready for Mender, for you to start with. You can find it in the{' '}\n \n Prepare a Raspberry Pi device\n {' '}\n documentation, which also contains instructions for initial device setup. Once you're done flashing you can go ahead and proceed to the next step.\n
\n);\n\nconst IntegrationsLink = () => (\n \n Integration settings\n \n);\n\nexport const ExternalProviderTip = ({ hasExternalIntegration, integrationProvider }) => (\n \n {hasExternalIntegration ? (\n \n Devices added here will be automatically integrated with the {EXTERNAL_PROVIDER[integrationProvider].title} you set in the{' '}\n .\n
\n ) : (\n \n To connect your devices with {EXTERNAL_PROVIDER[integrationProvider].title}, go to and set up the integration.\n
\n )}\n \n }\n >\n \n \n);\n\nexport const DeviceTypeTip = () => (\n \n \n If you don't see your exact device on the list, choose Generic ARMv6 or newer to continue the tutorial for now.\n
\n \n (Note: if your device is not based on ARMv6 or newer, the tutorial won't work - instead, go back and use the virtual device)\n
\n \n }\n >\n \n \n
\n \n);\n\nexport const DeviceTypeSelectionStep = ({\n docsVersion,\n hasConvertedImage,\n hasExternalIntegration,\n integrationProvider,\n onboardingState,\n onSelect,\n selection = '',\n version\n}) => {\n const shouldShowOnboardingTip = !onboardingState.complete && onboardingState.showTips && onboardingState.showHelptips;\n const hasExternalIntegrationSupport = versionCompare(version, '3.2') > -1;\n return (\n <>\n Enter your device type
\n Setting this attribute on the device ensures that the device will only receive updates for compatible software releases.
\n\n \n
{\n // Value selected with enter, right from the input\n if (typeof option === 'string') {\n return option;\n }\n if (option.key === 'custom' && option.value === selection) {\n return option.value;\n }\n return option.title;\n }}\n handleHomeEndKeys\n includeInputInList\n filterOptions={(options, params) => {\n const filtered = filter(options, params);\n if (filtered.length !== 1 && params.inputValue !== '') {\n filtered.push({\n value: params.inputValue,\n key: 'custom',\n title: `Use \"${params.inputValue}\"`\n });\n }\n return filtered;\n }}\n options={types}\n onChange={onSelect}\n renderInput={params => (\n \n )}\n style={{ maxWidth: 300 }}\n value={selection}\n />\n {shouldShowOnboardingTip ? : }\n {hasExternalIntegrationSupport && }\n Log into your device and install the Mender client
\n \n Copy & paste and run this command on your device:\n
\n advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START)} withDescription={true} />\n This downloads the Mender client on the device, sets the configuration and starts the client.
\n \n Once the client has started, your device will attempt to connect to the server. It will then appear in your Pending devices tab and you can continue.\n
\n \n );\n};\n\nconst steps = {\n 1: DeviceTypeSelectionStep,\n 2: InstallationStep\n};\n\nconst integrationProvider = EXTERNAL_PROVIDER['iot-hub'].provider;\n\nexport const PhysicalDeviceOnboarding = ({ progress }) => {\n const [selection, setSelection] = useState('');\n const hasExternalIntegration = useSelector(state => {\n const { credentials = {} } = state.organization.externalDeviceIntegrations.find(integration => integration.provider === integrationProvider) ?? {};\n const { [EXTERNAL_PROVIDER['iot-hub'].credentialsAttribute]: azureConnectionString = '' } = credentials;\n return !!azureConnectionString;\n });\n const docsVersion = useSelector(getDocsVersion);\n const ipAddress = useSelector(state => state.app.hostAddress);\n const isEnterprise = useSelector(getIsEnterprise);\n const { isDemoMode, isHosted } = useSelector(getFeatures);\n const isPreRelease = useSelector(getIsPreview);\n const onboardingState = useSelector(getOnboardingState);\n const { tenant_token: tenantToken } = useSelector(getOrganization);\n const { Integration: version } = useSelector(getVersionInformation);\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(setOnboardingApproach('physical'));\n }, []);\n\n const onSelect = (e, deviceType, reason) => {\n if (reason === 'selectOption') {\n dispatch(setOnboardingDeviceType(deviceType.value));\n setSelection(deviceType.value);\n } else if (reason === 'clear') {\n dispatch(setOnboardingDeviceType(''));\n setSelection('');\n }\n };\n\n const hasConvertedImage = !!selection && selection.length && (selection.startsWith('raspberrypi3') || selection.startsWith('raspberrypi4'));\n\n const ComponentToShow = steps[progress];\n return (\n dispatch(advanceOnboarding(step))}\n hasExternalIntegration={hasExternalIntegration}\n docsVersion={docsVersion}\n hasConvertedImage={hasConvertedImage}\n integrationProvider={integrationProvider}\n ipAddress={ipAddress}\n isEnterprise={isEnterprise}\n isHosted={isHosted}\n isDemoMode={isDemoMode}\n isPreRelease={isPreRelease}\n onboardingState={onboardingState}\n onSelect={onSelect}\n selection={selection}\n tenantToken={tenantToken}\n version={version}\n />\n );\n};\n\nexport default PhysicalDeviceOnboarding;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport * as OnboardingConstants from '../constants/onboardingConstants';\n\nexport const initialState = {\n approach: null,\n artifactIncluded: null,\n complete: false,\n deviceType: null,\n demoArtifactPort: 85,\n progress: null,\n showCreateArtifactDialog: false,\n showTips: null,\n showTipsDialog: false\n};\n\nconst userReducer = (state = initialState, action) => {\n switch (action.type) {\n case OnboardingConstants.SET_DEMO_ARTIFACT_PORT:\n return {\n ...state,\n demoArtifactPort: action.value\n };\n case OnboardingConstants.SET_SHOW_CREATE_ARTIFACT:\n return {\n ...state,\n showCreateArtifactDialog: action.show\n };\n case OnboardingConstants.SET_SHOW_ONBOARDING_HELP:\n return {\n ...state,\n showTips: action.show\n };\n case OnboardingConstants.SET_SHOW_ONBOARDING_HELP_DIALOG:\n return {\n ...state,\n showTipsDialog: action.show\n };\n case OnboardingConstants.SET_ONBOARDING_COMPLETE:\n return {\n ...state,\n complete: action.complete\n };\n case OnboardingConstants.SET_ONBOARDING_PROGRESS:\n return {\n ...state,\n progress: action.value\n };\n case OnboardingConstants.SET_ONBOARDING_DEVICE_TYPE:\n return {\n ...state,\n deviceType: action.value\n };\n case OnboardingConstants.SET_ONBOARDING_APPROACH:\n return {\n ...state,\n approach: action.value\n };\n case OnboardingConstants.SET_ONBOARDING_ARTIFACT_INCLUDED:\n return {\n ...state,\n artifactIncluded: action.value\n };\n\n default:\n return state;\n }\n};\n\nexport default userReducer;\n","// Copyright 2019 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { setOnboardingApproach } from '../../../actions/onboardingActions';\nimport { initialState as onboardingReducerState } from '../../../reducers/onboardingReducer';\nimport { getDocsVersion, getFeatures, getOrganization } from '../../../selectors';\nimport CopyCode from '../copy-code';\n\nexport const getDemoDeviceCreationCommand = tenantToken =>\n tenantToken\n ? `TENANT_TOKEN='${tenantToken}'\\ndocker run -it -p ${onboardingReducerState.demoArtifactPort}:${onboardingReducerState.demoArtifactPort} -e SERVER_URL='https://${window.location.hostname}' \\\\\\n-e TENANT_TOKEN=$TENANT_TOKEN --pull=always mendersoftware/mender-client-qemu`\n : './demo --client up';\n\nexport const VirtualDeviceOnboarding = () => {\n const dispatch = useDispatch();\n const docsVersion = useSelector(getDocsVersion);\n const { isHosted } = useSelector(getFeatures);\n const { tenant_token: tenantToken } = useSelector(getOrganization);\n\n useEffect(() => {\n dispatch(setOnboardingApproach('virtual'));\n }, []);\n\n const codeToCopy = getDemoDeviceCreationCommand(tenantToken);\n\n return (\n \n {isHosted ? (\n
\n ) : (\n
\n
1. Prerequisites\n
\n As you are running Mender on-premise, for these instructions we assume that you already have Docker installed and the Mender integration environment\n up and running on your machine.\n
\n
To start a virtual device, change directory into the folder where you cloned Mender integration.
\n
\n )}\n
\n 2. Copy & paste and run the following command to start the virtual device:\n
\n
\n
The device should appear in the Pending devices view in a couple of minutes.
\n
\n Visit{' '}\n \n our documentation\n {' '}\n for more information on managing the virtual device.\n
\n
\n You can connect almost any device and Linux OS with Mender, but to make things simple during evaluation we recommend you use a Raspberry Pi as a test\n device.\n
\n \n
Raspberry Pi quick start
\n
We'll walk you through the steps to connect a Raspberry Pi and deploy your first update with Mender.
\n
\n
\n {[raspberryPi, raspberryPi4].map((tile, index) => (\n
\n ))}\n
\n
\n
\n
\n
\n
\n
Use a virtual device
\n
\n
\n
Don't have a Raspberry Pi?
\n
You can use our Docker-run virtual device to go through the same tutorial.
\n {hasMonitor && (\n
\n If you want to evaluate our commercial components such as mender-monitor, please use a physical device instead as the virtual client does not\n support these components at this time.\n \n )}\n
setVirtualDevice(true)}>Try a virtual device\n
\n
\n
Other devices
\n
See the documentation to integrate the following with Mender:
\n
\n {[\n { key: 'debian', target: `https://docs.mender.io/${docsVersion}operating-system-updates-debian-family`, title: 'Debian family' },\n { key: 'yocto', target: `https://docs.mender.io/${docsVersion}operating-system-updates-yocto-project`, title: 'Yocto OSes' }\n ].map(item => (\n - \n \n {item.title}\n \n
\n ))}\n
\n Or visit{' '}\n
\n Mender Hub\n {' '}\n and search integrations for your device and OS.\n
\n
\n {targets.map(({ key, target, title }) => (\n
\n {title}\n \n ))}\n
\n
\n
\n {announcement}\n
\n
\n
Demo mode
\n \n Mender is currently running in demo mode.\n
\n \n \n See the documentation for help switching to production mode\n \n .\n
\n \n }\n >\n <>\n \n Demo mode\n \n \n);\n\nexport default DemoNotification;\n","// Copyright 2017 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\n// material ui\nimport { Refresh as RefreshIcon } from '@mui/icons-material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { DEPLOYMENT_ROUTES } from '../../constants/deploymentConstants';\n\nconst useStyles = makeStyles()(theme => ({\n icon: { color: theme.palette.grey[500], margin: '0 7px 0 10px', top: '5px', fontSize: '20px' }\n}));\n\nconst DeploymentNotifications = props => {\n const { classes } = useStyles();\n return (\n \n {props.inprogress}\n \n \n );\n};\n\nexport default DeploymentNotifications;\n","import createSvgIcon from './utils/createSvgIcon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H4V5h14v14zM6 13h5v4H6zm6-6h4v3h-4zM6 7h5v5H6zm6 4h4v6h-4z\"\n}), 'DeveloperBoard');","// Copyright 2017 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\n// material ui\nimport { DeveloperBoard as DeveloperBoardIcon } from '@mui/icons-material';\n\nimport pluralize from 'pluralize';\n\nimport { MenderTooltipClickable } from '../common/mendertooltip';\n\nconst DeviceNotifications = ({ total, limit, pending }) => {\n const approaching = limit && total / limit > 0.8;\n const warning = limit && limit <= total;\n const content = (\n <>\n \n {total.toLocaleString()}\n {limit ? /{limit.toLocaleString()} : null}\n\n \n \n {pending ? (\n \n {pending.toLocaleString()} pending\n \n ) : null}\n \n );\n if (!limit) {\n return {content}
;\n }\n return (\n \n Device limit
\n {approaching || warning ? (\n You {approaching ? are nearing : have reached} your device limit.
\n ) : (\n \n You can still connect another {(limit - total).toLocaleString()} {pluralize('devices', limit - total)}.\n
\n )}\n \n If you need a higher device limit, you can contact us by email at support@mender.io to change your plan.\n
\n \n Learn about the different plans available by visiting{' '}\n \n mender.io/pricing\n \n
\n \n }\n >\n {content}\n \n );\n};\nexport default DeviceNotifications;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\n\nimport { Announcement as AnnouncmentIcon, Close as CloseIcon } from '@mui/icons-material';\n\nconst OfferHeader = ({ docsVersion, onHide }) => (\n \n);\n\nexport default OfferHeader;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { InfoOutlined as InfoIcon, Payment } from '@mui/icons-material';\nimport { Button } from '@mui/material';\n\nimport moment from 'moment';\nimport momentDurationFormatSetup from 'moment-duration-format';\nimport pluralize from 'pluralize';\n\nimport { MenderTooltipClickable } from '../common/mendertooltip';\n\nmomentDurationFormatSetup(moment);\n\nconst today = new Date();\n\nconst TrialInformation = () => (\n <>\n Trial plan
\n You're using the trial version of Mender – it's free for up to 10 devices for 12 months.
\n \n Upgrade to a plan to add more devices and continue using Mender after the trial expires.\n
\n \n Or compare the plans at{' '}\n \n mender.io/plans/pricing\n \n .\n
\n \n);\n\nconst TrialNotification = ({ iconClassName, sectionClassName, expiration }) => {\n const expirationDate = moment(expiration);\n const duration = moment.duration(expirationDate.diff(moment(today)));\n const daysLeft = Math.floor(duration.asDays());\n return (\n \n
}>\n <>\n
\n Trial plan\n \n \n
} to=\"/settings/upgrade\">\n Upgrade now\n \n\n {expiration && daysLeft <= 100 && daysLeft >= 0 && (\n
\n You have {daysLeft} {pluralize('day', daysLeft)} remaining on the trial plan\n
\n )}\n
\n {Object.entries(versionInformation).reduce((accu, [key, version]) => {\n if (version) {\n accu.push(\n
\n {linkables[key] ? (\n \n {key}\n \n ) : (\n {key}
\n )}\n \n {version}\n
\n \n );\n }\n return accu;\n }, [])}\n
\n {title}\n
\n \n );\n};\n\nexport const LeftNav = () => {\n const releasesRef = useRef();\n const { classes } = useStyles();\n\n const docsVersion = useSelector(getDocsVersion);\n const onboardingState = useSelector(getOnboardingState);\n const tenantCapabilities = useSelector(getTenantCapabilities);\n const userCapabilities = useSelector(getUserCapabilities);\n\n const licenseLink = (\n \n License information\n \n );\n\n let onboardingComponent;\n if (releasesRef.current) {\n onboardingComponent = getOnboardingComponentFor(onboardingSteps.APPLICATION_UPDATE_REMINDER_TIP, onboardingState, {\n anchor: {\n left: releasesRef.current.offsetWidth - 48,\n top: releasesRef.current.offsetTop + releasesRef.current.offsetHeight / 2\n },\n place: 'right'\n });\n }\n return (\n \n \n {listItems.reduce((accu, item, index) => {\n if (!item.canAccess({ tenantCapabilities, userCapabilities })) {\n return accu;\n }\n accu.push(\n \n \n \n );\n return accu;\n }, [])}\n
\n {onboardingComponent ? onboardingComponent : null}\n \n \n \n \n \n } secondary={licenseLink} />\n \n
\n
\n );\n};\n\nexport default LeftNav;\n","// Copyright 2022 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\n\nimport { Close as CloseIcon } from '@mui/icons-material';\n// material ui\nimport { Drawer, IconButton, Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport pluralize from 'pluralize';\n\nimport { setSearchState } from '../actions/appActions';\nimport { setDeviceListState } from '../actions/deviceActions';\nimport { SORTING_OPTIONS, TIMEOUTS } from '../constants/appConstants';\nimport { getIdAttribute, getMappedDevicesList, getOnboardingState, getUserSettings } from '../selectors';\nimport { getHeaders } from './devices/authorized-devices';\nimport { routes } from './devices/base-devices';\nimport Devicelist from './devices/devicelist';\n\nconst useStyles = makeStyles()(theme => ({\n drawerOffset: {\n top: theme.mixins.toolbar.minHeight + 1,\n left: 200\n },\n paper: {\n maxWidth: '100vw',\n minHeight: '20vh',\n boxShadow: 'none'\n }\n}));\n\nconst leftNavOffset = 500;\nconst ResultTitle = ({ onClick, term, total }) => {\n const content = `${total ? total : 'No'} ${pluralize('device', total)} found for \"${term}\"`;\n let props = { className: 'bold' };\n let style = {};\n if (!total) {\n props = { className: 'info' };\n style = { width: `calc(100% - ${leftNavOffset}px)` };\n }\n return (\n \n );\n};\n\nexport const SearchResult = ({ onToggleSearchResult, open = true }) => {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n\n const { columnSelection } = useSelector(getUserSettings);\n const customColumnSizes = useSelector(state => state.users.customColumns);\n const devices = useSelector(state => getMappedDevicesList(state, 'search'));\n const idAttribute = useSelector(getIdAttribute);\n const onboardingState = useSelector(getOnboardingState);\n const searchState = useSelector(state => state.app.searchState);\n\n const { classes } = useStyles();\n\n const [columnHeaders, setColumnHeaders] = useState(getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute));\n\n const { isSearching, searchTerm, searchTotal, sort = {} } = searchState;\n const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;\n\n useEffect(() => {\n const columnHeaders = getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute);\n setColumnHeaders(columnHeaders);\n }, [columnSelection, idAttribute.attribute]);\n\n useEffect(() => {\n if (!open && isSearching) {\n onToggleSearchResult();\n }\n }, [open, isSearching]);\n\n useEffect(() => {\n if (open && !searchTerm) {\n onToggleSearchResult();\n }\n }, [open, searchTerm]);\n\n const onDeviceSelect = device => {\n dispatch(setDeviceListState({ selectedId: device.id }));\n onToggleSearchResult();\n setTimeout(() => navigate(`/devices/${device.status}?id=${device.id}`), TIMEOUTS.debounceShort);\n };\n\n const handlePageChange = page => {\n dispatch(setSearchState({ page }));\n };\n\n const onSortChange = attribute => {\n let changedSortCol = attribute.name;\n let changedSortDown = sortDown === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;\n if (changedSortCol !== sortCol) {\n changedSortDown = SORTING_OPTIONS.desc;\n }\n dispatch(setSearchState({ page: 1, sort: { direction: changedSortDown, key: changedSortCol, scope: attribute.scope } }));\n };\n\n const onClearClick = () => {\n dispatch(setSearchState({ searchTerm: '' }));\n onToggleSearchResult();\n };\n\n return (\n \n \n \n \n \n \n
\n {!!searchTotal && (\n \n )}\n \n );\n};\n\nexport default SearchResult;\n","// Copyright 2022 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useCallback, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { Cancel as CancelIcon } from '@mui/icons-material';\nimport { Drawer, IconButton, LinearProgress, Tooltip, drawerClasses } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport pluralize from 'pluralize';\n\nimport { cancelFileUpload } from '../actions/releaseActions';\nimport { FileSize } from '../helpers';\n\nconst useStyles = makeStyles()(theme => ({\n progress: {\n backgroundColor: theme.palette.grey[600],\n gridColumn: 1,\n margin: '15px 0'\n },\n drawer: {\n [`.${drawerClasses.paper}`]: {\n maxWidth: 'initial'\n }\n },\n progressBarContainer: {\n position: 'fixed',\n display: 'grid',\n bottom: 0,\n gridTemplateRows: 'min-content',\n height: 'max-content',\n padding: `0 ${theme.spacing(2)}px`,\n overflow: 'hidden',\n width: '100%',\n zIindex: 10000,\n transition: 'all 0.2s ease-in-out'\n },\n progressContainer: {\n backgroundColor: theme.palette.background.default,\n borderColor: theme.palette.grey[300],\n color: theme.palette.grey[600],\n display: 'grid',\n gridTemplateRows: '30px 30px',\n gridTemplateColumns: '1fr 60px',\n columnGap: theme.spacing(2),\n ['> .MuiIconButton-root']: {\n gridColumn: 2,\n gridRowStart: 1,\n gridRowEnd: 2,\n height: 60\n }\n }\n}));\n\nconst UploadProgressBar = ({ classes, upload, uploadId }) => {\n const { name, size, uploadProgress } = upload;\n const dispatch = useDispatch();\n const onCancelClick = useCallback(() => dispatch(cancelFileUpload(uploadId)), [uploadId]);\n return (\n \n
\n {Math.round(uploadProgress)}% - {name} ()\n
\n
\n
\n \n \n \n \n
\n {isUploading && !isHovering && }\n \n {pluralize('Upload', Object.keys(uploads).length)} in progress
\n {Object.entries(uploads).map(([uploadId, upload]) => (\n \n ))}\n \n
\n );\n};\n\nexport default Uploads;\n","// Copyright 2015 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useState } from 'react';\nimport { useIdleTimer, workerTimers } from 'react-idle-timer';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useLocation, useNavigate } from 'react-router-dom';\n\nimport { CssBaseline } from '@mui/material';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport withStyles from '@mui/styles/withStyles';\nimport { makeStyles } from 'tss-react/mui';\n\nimport Cookies from 'universal-cookie';\n\nimport { parseEnvironmentInfo, setSnackbar } from '../actions/appActions';\nimport { logoutUser, setAccountActivationCode, setShowConnectingDialog } from '../actions/userActions';\nimport { expirySet, getToken, updateMaxAge } from '../auth';\nimport SharedSnackbar from '../components/common/sharedsnackbar';\nimport { PrivateRoutes, PublicRoutes } from '../config/routes';\nimport { onboardingSteps } from '../constants/onboardingConstants';\nimport ErrorBoundary from '../errorboundary';\nimport { toggle } from '../helpers';\nimport { getOnboardingState, getUserSettings } from '../selectors';\nimport { dark as darkTheme, light as lightTheme } from '../themes/Mender';\nimport Tracking from '../tracking';\nimport { getOnboardingComponentFor } from '../utils/onboardingmanager';\nimport ConfirmDismissHelptips from './common/dialogs/confirmdismisshelptips';\nimport DeviceConnectionDialog from './common/dialogs/deviceconnectiondialog';\nimport Footer from './footer';\nimport Header from './header/header';\nimport LeftNav from './leftnav';\nimport SearchResult from './search-result';\nimport Uploads from './uploads';\n\nconst activationPath = '/activate';\nexport const timeout = 900000; // 15 minutes idle time\nconst cookies = new Cookies();\n\nconst reducePalette =\n prefix =>\n (accu, [key, value]) => {\n if (value instanceof Object) {\n return {\n ...accu,\n ...Object.entries(value).reduce(reducePalette(`${prefix}-${key}`), {})\n };\n } else {\n accu[`${prefix}-${key}`] = value;\n }\n return accu;\n };\n\nconst cssVariables = ({ palette }) => {\n const muiVariables = Object.entries(palette).reduce(reducePalette('--mui'), {});\n return {\n '@global': {\n ':root': {\n ...muiVariables,\n '--mui-overlay': palette.grey[400]\n }\n }\n };\n};\n\nconst WrappedBaseline = withStyles(cssVariables)(CssBaseline);\n\nconst useStyles = makeStyles()(() => ({\n public: {\n display: 'grid',\n gridTemplateRows: 'max-content 1fr max-content',\n height: '100vh',\n '.content': {\n alignSelf: 'center',\n justifySelf: 'center'\n }\n }\n}));\n\nexport const AppRoot = () => {\n const [showSearchResult, setShowSearchResult] = useState(false);\n const navigate = useNavigate();\n const { pathname = '', hash } = useLocation();\n\n const dispatch = useDispatch();\n const currentUser = useSelector(state => state.users.currentUser);\n const onboardingState = useSelector(getOnboardingState);\n const showDismissHelptipsDialog = useSelector(state => !state.onboarding.complete && state.onboarding.showTipsDialog);\n const showDeviceConnectionDialog = useSelector(state => state.users.showConnectDeviceDialog);\n const snackbar = useSelector(state => state.app.snackbar);\n const trackingCode = useSelector(state => state.app.trackerCode);\n const { mode } = useSelector(getUserSettings);\n\n useEffect(() => {\n dispatch(parseEnvironmentInfo());\n if (!trackingCode) {\n return;\n }\n if (!cookies.get('_ga')) {\n Tracking.cookieconsent().then(({ trackingConsentGiven }) => {\n if (trackingConsentGiven) {\n Tracking.initialize(trackingCode);\n Tracking.pageview();\n }\n });\n } else {\n Tracking.initialize(trackingCode);\n }\n trackLocationChange(pathname);\n }, [trackingCode]);\n\n useEffect(() => {\n trackLocationChange(pathname);\n // the following is added to ensure backwards capability for hash containing routes & links (e.g. /ui/#/devices => /ui/devices)\n if (hash) {\n navigate(hash.substring(1));\n }\n }, [hash, pathname]);\n\n const trackLocationChange = pathname => {\n let page = pathname;\n // if we're on page whose path might contain sensitive device/ group/ deployment names etc. we sanitize the sent information before submission\n if (page.includes('=') && (page.startsWith('/devices') || page.startsWith('/deployments'))) {\n const splitter = page.lastIndexOf('/');\n const filters = page.slice(splitter + 1);\n const keyOnlyFilters = filters.split('&').reduce((accu, item) => `${accu}:${item.split('=')[0]}&`, ''); // assume the keys to filter by are not as revealing as the values things are filtered by\n page = `${page.substring(0, splitter)}?${keyOnlyFilters.substring(0, keyOnlyFilters.length - 1)}`; // cut off the last & of the reduced filters string\n } else if (page.startsWith(activationPath)) {\n dispatch(setAccountActivationCode(page.substring(activationPath.length + 1)));\n navigate('/settings/my-profile', { replace: true });\n }\n Tracking.pageview(page);\n };\n\n const onIdle = () => {\n if (expirySet() && currentUser) {\n // logout user and warn\n return dispatch(logoutUser('Your session has expired. You have been automatically logged out due to inactivity.')).catch(updateMaxAge);\n }\n };\n\n useIdleTimer({ crossTab: true, onAction: updateMaxAge, onActive: updateMaxAge, onIdle, syncTimers: 400, timeout, timers: workerTimers });\n\n const onToggleSearchResult = () => setShowSearchResult(toggle);\n\n const onboardingComponent = getOnboardingComponentFor(onboardingSteps.ARTIFACT_CREATION_DIALOG, onboardingState);\n const theme = createTheme(mode === 'dark' ? darkTheme : lightTheme);\n\n const { classes } = useStyles();\n\n return (\n \n \n <>\n {getToken() ? (\n \n
\n
\n
\n {onboardingComponent ? onboardingComponent : null}\n {showDismissHelptipsDialog &&
}\n {showDeviceConnectionDialog &&
dispatch(setShowConnectingDialog(false))} />}\n