From a1f9c36992a300a13ddd46297432d8ccae7cf7f3 Mon Sep 17 00:00:00 2001 From: pndllxzzy Date: Sat, 26 Sep 2020 01:11:57 +0800 Subject: [PATCH 1/4] feat(server): add compare different url --- .../src/ui/routes/build-view/build-view.css | 11 ++-- .../src/ui/routes/build-view/build-view.jsx | 51 ++++++++++++++----- .../ui/routes/build-view/lhr-comparison.jsx | 7 +-- 3 files changed, 49 insertions(+), 20 deletions(-) diff --git a/packages/server/src/ui/routes/build-view/build-view.css b/packages/server/src/ui/routes/build-view/build-view.css index d6ae209d2..04a007542 100644 --- a/packages/server/src/ui/routes/build-view/build-view.css +++ b/packages/server/src/ui/routes/build-view/build-view.css @@ -4,13 +4,18 @@ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -.build-view--with-lhr-link-hover .lhr-comparison__scores-and-dropdowns .dropdown--url { +.build-view--with-lhr-base-link-hover .lhr-comparison__scores-and-dropdowns .dropdown--base-url, +.build-view--with-lhr-compare-link-hover .lhr-comparison__scores-and-dropdowns .dropdown--compare-url { background: var(--compare-secondary-highlight-color); } -.build-view--with-lhr-link-hover +.build-view--with-lhr-base-link-hover .lhr-comparison__scores-and-dropdowns - .dropdown--url + .dropdown--base-url + .dropdown__label, +.build-view--with-lhr-compare-link-hover + .lhr-comparison__scores-and-dropdowns + .dropdown--compare-url .dropdown__label { padding-left: calc(var(--base-spacing) / 4); margin-right: calc(var(--base-spacing) / 4); diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx index 3185a067a..d44a19dfa 100644 --- a/packages/server/src/ui/routes/build-view/build-view.jsx +++ b/packages/server/src/ui/routes/build-view/build-view.jsx @@ -47,20 +47,24 @@ function computeSelectedUrl(props, compareRuns) { return urlsInBothRuns[0] || fallbackUrl; } -/** @param {{project: LHCI.ServerCommand.Project, build: LHCI.ServerCommand.Build, ancestorBuild: LHCI.ServerCommand.Build | null, runs: Array, compareUrl?: string, hasBaseOverride: boolean}} props */ +/** @param {{project: LHCI.ServerCommand.Project, build: LHCI.ServerCommand.Build, ancestorBuild: LHCI.ServerCommand.Build | null, runs: Array, baseUrl?: string, compareUrl?: string, hasBaseOverride: boolean}} props */ const BuildView_ = props => { const [openBuildHash, setOpenBuild] = useState(/** @type {null|'base'|'compare'} */ (null)); - const [isOpenLhrLinkHovered, setLhrLinkHover] = useState(false); + const [isOpenLhrBaseLinkHovered, setLhrBaseLinkHover] = useState(false); + const [isOpenLhrCompareLinkHovered, setLhrCompareLinkHover] = useState(false); const buildHashSelectorCloseFn = useCallback(() => setOpenBuild(null), [setOpenBuild]); const compareRuns = props.runs.filter(run => run.buildId === props.build.id); - const selectedUrl = computeSelectedUrl(props, compareRuns); + const compareUrl = props.compareUrl || computeSelectedUrl(props, compareRuns); + const baseUrl = props.baseUrl || compareUrl const availableUrls = [...new Set(compareRuns.map(run => run.url))]; - const run = compareRuns.find(run => run.url === selectedUrl); + const run = compareRuns.find(run => run.url === compareUrl); const ancestorBuildId = props.ancestorBuild && props.ancestorBuild.id; const baseRuns = props.runs.filter(run => run.buildId === ancestorBuildId); - const baseRun = baseRuns.find(run => run.url === selectedUrl); + const baseRun = baseRuns.find(run => run.url === baseUrl); + + const availableUrlOptions = availableUrls.map(url => ({value: url, label: url})) /** @type {LH.Result|undefined} */ let lhr; @@ -117,7 +121,7 @@ const BuildView_ = props => { lhr={baseLhr} isDimmed={openBuildHash === 'compare'} isOpen={openBuildHash === 'base'} - setLhrLinkHover={setLhrLinkHover} + setLhrLinkHover={setLhrBaseLinkHover} onClick={() => setOpenBuild(openBuildHash === 'base' ? null : 'base')} /> { lhr={lhr} isDimmed={openBuildHash === 'base'} isOpen={openBuildHash === 'compare'} - setLhrLinkHover={setLhrLinkHover} + setLhrLinkHover={setLhrCompareLinkHover} onClick={() => setOpenBuild(openBuildHash === 'compare' ? null : 'compare')} /> @@ -159,24 +163,42 @@ const BuildView_ = props => { ) : ( undefined ), - dropdowns: ( + dropdownsBase: ( + { + const to = new URL(window.location.href); + to.searchParams.set('baseUrl', url); + to.searchParams.set('compareUrl', compareUrl); + route(`${to.pathname}${to.search}`); + }} + options={availableUrlOptions} + /> + ), + dropdownsCompare: ( { const to = new URL(window.location.href); + to.searchParams.set('baseUrl', baseUrl); to.searchParams.set('compareUrl', url); route(`${to.pathname}${to.search}`); }} - options={availableUrls.map(url => ({value: url, label: url}))} + options={availableUrlOptions} /> ), }} @@ -185,7 +207,7 @@ const BuildView_ = props => { ); }; -/** @param {{projectSlug: string, partialBuildId: string, baseBuild?: string, compareUrl?: string}} props */ +/** @param {{projectSlug: string, partialBuildId: string, baseBuild?: string, baseUrl?: string, compareUrl?: string}} props */ export const BuildView = props => { const projectLoadingData = useProjectBySlug(props.projectSlug); const projectId = projectLoadingData[1] && projectLoadingData[1].id; @@ -232,6 +254,7 @@ export const BuildView = props => { , selectedAuditId?: string | null, lhr?: LH.Result, baseLhr?: LH.Result, percentAbsoluteDeltaThreshold: number, setPercentAbsoluteDeltaThreshold: (x: number) => void}} props */ +/** @param {{hookElements: LHCI.HookElements<'dropdownsBase'|'dropdownsCompare'>, selectedAuditId?: string | null, lhr?: LH.Result, baseLhr?: LH.Result, percentAbsoluteDeltaThreshold: number, setPercentAbsoluteDeltaThreshold: (x: number) => void}} props */ const LhrComparisonScoresAndUrl = props => { return (
- {props.hookElements.dropdowns} + {props.hookElements.dropdownsBase} + {props.hookElements.dropdownsCompare} { ); }; -/** @param {{lhr: LH.Result, baseLhr: LH.Result|undefined, hookElements: LHCI.HookElements<'dropdowns'|'warnings'>, className?: string}} props */ +/** @param {{lhr: LH.Result, baseLhr: LH.Result|undefined, hookElements: LHCI.HookElements<'dropdownsBase'|'dropdownsCompare'|'warnings'>, className?: string}} props */ export const LhrComparison = props => { const {lhr, baseLhr} = props; const defaultAck = /** @type {'none'|'acknowledged'|'closed'} */ ('none'); From 60722351fac45332588da7426374cc343ac0a30f Mon Sep 17 00:00:00 2001 From: pndllxzzy Date: Fri, 9 Oct 2020 21:30:14 +0800 Subject: [PATCH 2/4] feat(server): combine dropdowns --- .../src/ui/routes/build-view/build-view.jsx | 54 +++++++++---------- .../ui/routes/build-view/lhr-comparison.jsx | 7 ++- 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx index d44a19dfa..afa48ff4a 100644 --- a/packages/server/src/ui/routes/build-view/build-view.jsx +++ b/packages/server/src/ui/routes/build-view/build-view.jsx @@ -173,33 +173,33 @@ const BuildView_ = props => { ) : ( undefined ), - dropdownsBase: ( - { - const to = new URL(window.location.href); - to.searchParams.set('baseUrl', url); - to.searchParams.set('compareUrl', compareUrl); - route(`${to.pathname}${to.search}`); - }} - options={availableUrlOptions} - /> - ), - dropdownsCompare: ( - { - const to = new URL(window.location.href); - to.searchParams.set('baseUrl', baseUrl); - to.searchParams.set('compareUrl', url); - route(`${to.pathname}${to.search}`); - }} - options={availableUrlOptions} - /> + dropdowns: ( + + { + const to = new URL(window.location.href); + to.searchParams.set('baseUrl', url); + to.searchParams.set('compareUrl', compareUrl); + route(`${to.pathname}${to.search}`); + }} + options={availableUrlOptions} + /> + { + const to = new URL(window.location.href); + to.searchParams.set('baseUrl', baseUrl); + to.searchParams.set('compareUrl', url); + route(`${to.pathname}${to.search}`); + }} + options={availableUrlOptions} + /> + ), }} /> diff --git a/packages/server/src/ui/routes/build-view/lhr-comparison.jsx b/packages/server/src/ui/routes/build-view/lhr-comparison.jsx index b7dec032e..a8354398c 100644 --- a/packages/server/src/ui/routes/build-view/lhr-comparison.jsx +++ b/packages/server/src/ui/routes/build-view/lhr-comparison.jsx @@ -113,14 +113,13 @@ export function computeAuditGroups(lhr, baseLhr, options) { return auditGroups; } -/** @param {{hookElements: LHCI.HookElements<'dropdownsBase'|'dropdownsCompare'>, selectedAuditId?: string | null, lhr?: LH.Result, baseLhr?: LH.Result, percentAbsoluteDeltaThreshold: number, setPercentAbsoluteDeltaThreshold: (x: number) => void}} props */ +/** @param {{hookElements: LHCI.HookElements<'dropdowns'>, selectedAuditId?: string | null, lhr?: LH.Result, baseLhr?: LH.Result, percentAbsoluteDeltaThreshold: number, setPercentAbsoluteDeltaThreshold: (x: number) => void}} props */ const LhrComparisonScoresAndUrl = props => { return (
- {props.hookElements.dropdownsBase} - {props.hookElements.dropdownsCompare} + {props.hookElements.dropdowns} { ); }; -/** @param {{lhr: LH.Result, baseLhr: LH.Result|undefined, hookElements: LHCI.HookElements<'dropdownsBase'|'dropdownsCompare'|'warnings'>, className?: string}} props */ +/** @param {{lhr: LH.Result, baseLhr: LH.Result|undefined, hookElements: LHCI.HookElements<'dropdowns'|'warnings'>, className?: string}} props */ export const LhrComparison = props => { const {lhr, baseLhr} = props; const defaultAck = /** @type {'none'|'acknowledged'|'closed'} */ ('none'); From bf2b33fa512b1a2a7083afb1addfa35fd2fa13a1 Mon Sep 17 00:00:00 2001 From: pndllxzzy <369945911@qq.com> Date: Sun, 11 Oct 2020 20:06:23 +0800 Subject: [PATCH 3/4] Update packages/server/src/ui/routes/build-view/build-view.jsx Co-authored-by: Patrick Hulce --- packages/server/src/ui/routes/build-view/build-view.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx index afa48ff4a..49db33e5e 100644 --- a/packages/server/src/ui/routes/build-view/build-view.jsx +++ b/packages/server/src/ui/routes/build-view/build-view.jsx @@ -176,7 +176,7 @@ const BuildView_ = props => { dropdowns: ( { From d91bf2c83e1fa31d886c4646b938eead96e404c0 Mon Sep 17 00:00:00 2001 From: pndllxzzy <369945911@qq.com> Date: Sun, 11 Oct 2020 20:07:27 +0800 Subject: [PATCH 4/4] Update packages/server/src/ui/routes/build-view/build-view.jsx Co-authored-by: Patrick Hulce --- packages/server/src/ui/routes/build-view/build-view.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx index 49db33e5e..ec3f8cbe0 100644 --- a/packages/server/src/ui/routes/build-view/build-view.jsx +++ b/packages/server/src/ui/routes/build-view/build-view.jsx @@ -188,7 +188,7 @@ const BuildView_ = props => { options={availableUrlOptions} /> {