Skip to content

Commit

Permalink
feat: Port to PatternFly V6, add light logo variant, fix a11y contras…
Browse files Browse the repository at this point in the history 
…t issues with chart
  • Loading branch information
@pojntfx
pojntfx committed May 16, 2024
1 parent c7b0bc8 commit 466ba5d
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 98 deletions.
88 changes: 44 additions & 44 deletions pkg/frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 14 additions & 11 deletions pkg/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,29 @@
"devDependencies": {
"@parcel/transformer-sass": "^2.12.0",
"@types/papaparse": "^5.3.14",
"@types/react": "^18.2.67",
"@types/react-dom": "^18.2.22",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"parcel": "^2.12.0",
"process": "^0.11.10",
"typescript": "^5.4.2"
"typescript": "^5.4.5"
},
"dependencies": {
"@patternfly/patternfly": "^5.3.1",
"@patternfly/react-charts": "^7.3.0",
"@patternfly/react-core": "^5.3.3",
"@patternfly/react-icons": "^5.3.2",
"@pojntfx/panrpc": "^0.7.1",
"@streamparser/json-whatwg": "^0.0.20",
"@patternfly/patternfly": "^6.0.0-alpha.134",
"@patternfly/react-charts": "^8.0.0-alpha.20",
"@patternfly/react-core": "^6.0.0-alpha.57",
"@patternfly/react-icons": "^6.0.0-alpha.20",
"@pojntfx/panrpc": "^0.7.2",
"@streamparser/json-whatwg": "^0.0.21",
"papaparse": "^5.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"use-async": "^1.1.0",
"usehooks-ts": "^2.9.1"
},
"@parcel/resolver-default": {
"packageExports": true
},
"@parcel/transformer-css": {
"errorRecovery": true
}
}
74 changes: 44 additions & 30 deletions pkg/frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import {
Modal,
Page,
PageSection,
PageSectionVariants,
Spinner,
TextInput,
TextInputGroup,
Expand All @@ -47,13 +46,14 @@ import {
import { ILocalContext, IRemoteContext, Registry } from "@pojntfx/panrpc";
import { JSONParser } from "@streamparser/json-whatwg";
import Papa from "papaparse";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import useAsyncEffect from "use-async";
import { useElementSize } from "usehooks-ts";
import logo from "./logo-dark.png";
import logoDark from "./logo-dark.png";
import logoLight from "./logo-light.png";
import "./main.scss";

const DARK_THEME_CLASS_NAME = "pf-v5-theme-dark";
const DARK_THEME_CLASS_NAME = "pf-v6-theme-dark";

class Local {
constructor(
Expand Down Expand Up @@ -403,15 +403,15 @@ const App = () => {
<Title headingLevel="h2">Commands</Title>

{commands.length <= 0 ? (
<HelperText className="pf-v5-u-py-sm">
<HelperTextItem className="pf-v5-x-text--helper">
<HelperText className="pf-v6-u-py-sm">
<HelperTextItem className="pf-v6-x-text--helper">
No commands have been set up yet.
</HelperTextItem>
</HelperText>
) : (
<DataList
isCompact
className="pf-v5-u-my-md"
className="pf-v6-u-my-md"
aria-label="List of commands to test"
>
{commands.map((command, i) => (
Expand All @@ -420,7 +420,7 @@ const App = () => {
<DataListItemCells
dataListCells={[
<DataListCell
className="pf-v5-u-display-flex pf-v5-u-justify-content-flex-start pf-v5-u-align-self-center"
className="pf-v6-u-display-flex pf-v6-u-justify-content-flex-start pf-v6-u-align-self-center"
key={1}
>
<span id={`command-${i}`}>{command}</span>
Expand Down Expand Up @@ -450,7 +450,7 @@ const App = () => {
</DataList>
)}

<TextInputGroup className="pf-v5-u-mt-sm">
<TextInputGroup className="pf-v6-u-mt-sm">
<TextInputGroupMain
placeholder="Command to add"
value={command}
Expand All @@ -472,16 +472,16 @@ const App = () => {
setCommand("");
}}
>
<PlusIcon className="pf-v5-u-mr-0 pf-v5-u-mr-sm-on-md" />
<PlusIcon className="pf-v6-u-mr-0 pf-v6-u-mr-sm-on-md" />

<span className="pf-v5-u-display-none pf-v5-u-display-inline-block-on-md">
<span className="pf-v6-u-display-none pf-v6-u-display-inline-block-on-md">
Add command
</span>
</Button>
</TextInputGroupUtilities>
</TextInputGroup>

<Title headingLevel="h2" className="pf-v5-u-pt-lg pf-v5-u-pb-sm">
<Title headingLevel="h2" className="pf-v6-u-pt-lg pf-v6-u-pb-sm">
Connection
</Title>

Expand Down Expand Up @@ -568,12 +568,26 @@ const App = () => {
<Page
header={
<PageHeader
logo={<Brand src={logo} alt="LatenSee logo" />}
logo={
<>
<Brand
src={logoDark}
className="pf-v6-c-brand--dark pf-v6-u-py-sm"
alt="LatenSee logo (dark variant)"
/>

<Brand
src={logoLight}
className="pf-v6-c-brand--light pf-v6-u-py-sm"
alt="LatenSee logo (light variant)"
/>
</>
}
logoComponent="div"
headerTools={
<PageHeaderTools>
<Toolbar>
<ToolbarContent>
<ToolbarContent className="pf-v6-u-pr-0">
<ToolbarItem>
<Button
variant="plain"
Expand Down Expand Up @@ -632,9 +646,9 @@ const App = () => {
document.body.removeChild(element);
}}
>
<DownloadIcon className="pf-v5-u-mr-0 pf-v5-u-mr-sm-on-md" />
<DownloadIcon className="pf-v6-u-mr-0 pf-v6-u-mr-sm-on-md" />

<span className="pf-v5-u-display-none pf-v5-u-display-inline-block-on-md">
<span className="pf-v6-u-display-none pf-v6-u-display-inline-block-on-md">
Download CSV
</span>
</Button>
Expand All @@ -658,9 +672,9 @@ const App = () => {
setIsLatencyMeasuring(false);
}}
>
<TimesIcon className="pf-v5-u-mr-0 pf-v5-u-mr-sm-on-md" />
<TimesIcon className="pf-v6-u-mr-0 pf-v6-u-mr-sm-on-md" />

<span className="pf-v5-u-display-none pf-v5-u-display-inline-block-on-md">
<span className="pf-v6-u-display-none pf-v6-u-display-inline-block-on-md">
Stop test
</span>
</Button>
Expand Down Expand Up @@ -700,12 +714,12 @@ const App = () => {
}}
>
{isLatencyMeasuring ? (
<PauseIcon className="pf-v5-u-mr-0 pf-v5-u-mr-sm-on-md" />
<PauseIcon className="pf-v6-u-mr-0 pf-v6-u-mr-sm-on-md" />
) : (
<PlayIcon className="pf-v5-u-mr-0 pf-v5-u-mr-sm-on-md" />
<PlayIcon className="pf-v6-u-mr-0 pf-v6-u-mr-sm-on-md" />
)}

<span className="pf-v5-u-display-none pf-v5-u-display-inline-block-on-md">
<span className="pf-v6-u-display-none pf-v6-u-display-inline-block-on-md">
{isLatencyMeasuring
? "Pause"
: isStoppable
Expand All @@ -722,17 +736,17 @@ const App = () => {
/>
}
>
<div ref={ref} className="pf-v5-x-chart">
<PageSection variant={PageSectionVariants.light}>
<div ref={ref} className="pf-v6-x-chart">
<PageSection>
<div
style={{
height: (height || 0) - 48,
width: (width || 0) - 48,
height: (height || 0) - 8,
width: width || 0,
}}
>
<Chart
height={(height || 0) - 48}
width={(width || 0) - 48}
height={(height || 0) - 8}
width={width || 0}
ariaTitle="Latency results"
ariaDesc="Graph displaying the latency results"
containerComponent={
Expand All @@ -756,8 +770,8 @@ const App = () => {
padding={{
bottom: 75, // Adjusted to accommodate legend
left: 75, // Adjusted to accommodate legend
right: 50,
top: 50,
right: 0,
top: 0,
}}
>
<ChartAxis tickFormat={(tick) => tick.toFixed(1) + " s"} />
Expand Down Expand Up @@ -789,7 +803,7 @@ const App = () => {
</>
) : (
<Flex
className="pf-v5-u-p-md pf-v5-u-h-100"
className="pf-v6-u-p-md pf-v6-u-h-100"
spaceItems={{ default: "spaceItemsMd" }}
direction={{ default: "column" }}
justifyContent={{ default: "justifyContentCenter" }}
Expand Down
Binary file added pkg/frontend/src/logo-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 466ba5d

Please sign in to comment.