Skip to content

Commit

Permalink
Merge pull request #121 from parca-dev/fix-lint
Browse files Browse the repository at this point in the history 
ui: Fix various linting errors
  • Loading branch information
@brancz
brancz authored Sep 24, 2021
2 parents 09f6855 + 4faebb4 commit 0822cb5
Show file tree
Hide file tree
Showing 27 changed files with 671 additions and 656 deletions.
3 changes: 3 additions & 0 deletions ui/.eslintignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@ out/
dist/
node_modules/
next-env.d.ts
packages/shared/client/src/google
packages/shared/client/src/parca
packages/shared/parser/src/selector.js
14 changes: 7 additions & 7 deletions ui/.eslintrc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ rules:

no-labels: [ error, { allowLoop: true } ]
no-void: 0
# TODO(kakkoyun): The following fixes the already broken linter,
# but the changes are too many so deferring it.
# '@typescript-eslint/member-delimiter-style': warn
'@typescript-eslint/member-delimiter-style':
- singleline:
- delimiter: 'semi'
requireLast: false
# TODO fix these in follow ups
"@typescript-eslint/explicit-function-return-type": "off"
#'@typescript-eslint/member-delimiter-style':
# - error
# - singleline:
# delimiter: 'semi'
# requireLast: false
4 changes: 2 additions & 2 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"version": "0.1.0",
"private": true,
"scripts": {
"lint": "eslint --ext .ts,.tsx,.js packages/app/*",
"fix": "eslint --fix --ext .ts,.tsx,.js packages/app/*",
"lint": "eslint --ext .ts,.tsx,.js packages/*",
"fix": "eslint --fix --ext .ts,.tsx,.js packages/*",
"test": "jest --coverage --config jest.config.js",
"dev": "next dev",
"build": "next build",
Expand Down
58 changes: 29 additions & 29 deletions ui/packages/app/web/src/components/CompareButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,51 +4,51 @@ import Button from './ui/Button'

const CompareButton = ({
disabled,
onClick,
onClick
}: {
disabled: boolean
onClick: () => void
}) => {
const [compareHover, setCompareHover] = useState<boolean>(false)
const [comparePopperReferenceElement, setComparePopperReferenceElement] = useState<HTMLDivElement | null>(null)
const [comparePopperElement, setComparePopperElement] = useState<HTMLDivElement | null>(null);
const [comparePopperElement, setComparePopperElement] = useState<HTMLDivElement | null>(null)
const { styles, attributes } = usePopper(comparePopperReferenceElement, comparePopperElement, {
placement: 'bottom',
});
placement: 'bottom'
})

const compareExplanation =
'Compare two profiles and see the relative difference between them more clearly.'

if (disabled) return <></>

return (
<div
ref={setComparePopperReferenceElement}
<div
ref={setComparePopperReferenceElement}
>
<Button
color='neutral'
disabled={disabled}
onClick={onClick}
onMouseEnter={() => setCompareHover(true)}
onMouseLeave={() => setCompareHover(false)}
>
<Button
color='neutral'
disabled={disabled}
onClick={onClick}
onMouseEnter={() => setCompareHover(true)}
onMouseLeave={() => setCompareHover(false)}
>
Compare
</Button>
{compareHover && (
<div ref={setComparePopperElement} style={styles.popper} {...attributes.popper}>
<div className="flex">
<div className="relative mx-2">
<svg className="text-black h-1 w-full left-0" x="0px" y="0px" viewBox="0 0 255 127.5">
<polygon className="fill-current" points="0,127.5 127.5,0 255,127.5"/>
</svg>
<div className="bg-black text-white text-xs rounded py-2 px-3 right-0 w-40">
{compareExplanation}
</div>
</div>
</div>
Compare
</Button>
{compareHover && (
<div ref={setComparePopperElement} style={styles.popper} {...attributes.popper}>
<div className="flex">
<div className="relative mx-2">
<svg className="text-black h-1 w-full left-0" x="0px" y="0px" viewBox="0 0 255 127.5">
<polygon className="fill-current" points="0,127.5 127.5,0 255,127.5"/>
</svg>
<div className="bg-black text-white text-xs rounded py-2 px-3 right-0 w-40">
{compareExplanation}
</div>
)}
</div>
</div>
</div>
</div>
)}
</div>
)
}

Expand Down
136 changes: 67 additions & 69 deletions ui/packages/app/web/src/components/MatchersInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Fragment, useRef, useState, useEffect } from 'react'
import React, { Fragment, useState, useEffect } from 'react'
import { Transition } from '@headlessui/react'
import { Query } from '@parca/parser'
import { LabelsResponse, LabelsRequest, QueryServiceClient, ServiceError } from '@parca/client'
Expand Down Expand Up @@ -45,7 +45,7 @@ class Suggestion {
typeahead: string
value: string

constructor(type: string, typeahead: string, value: string) {
constructor (type: string, typeahead: string, value: string) {
this.type = type
this.typeahead = typeahead
this.value = value
Expand All @@ -56,7 +56,7 @@ class Suggestions {
literals: Suggestion[]
labelNames: Suggestion[]

constructor() {
constructor () {
this.literals = []
this.labelNames = []
}
Expand All @@ -73,10 +73,10 @@ const MatchersInput = ({
const [showSuggest, setShowSuggest] = useState(true)
const [highlightedSuggestionIndex, setHighlightedSuggestionIndex] = useState(-1)
const [lastCompleted, setLastCompleted] = useState<Suggestion>(new Suggestion('', '', ''))
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
const { styles, attributes } = usePopper(inputRef, popperElement, {
placement: 'bottom',
});
placement: 'bottom'
})

const { response: labelNamesResponse, error: labelNamesError } = useLabelNames(queryClient)
const labelNames =
Expand Down Expand Up @@ -140,8 +140,6 @@ const MatchersInput = ({
}

const getSuggestion = (index): Suggestion => {
console.log("suggestionSections.labelNames.length", suggestionSections.labelNames.length)
console.log("index", index)
if (index < suggestionSections.labelNames.length) {
return suggestionSections.labelNames[index]
}
Expand Down Expand Up @@ -240,67 +238,67 @@ const MatchersInput = ({
}

return (
<>
<input
type='text'
className='bg-transparent focus:ring-indigo-800 flex-1 block w-full px-2 py-2 text-sm border-gray-300 dark:border-gray-600 border-b outline-none'
placeholder='filter profiles...'
ref={setInputRef}
onChange={onChange}
value={value}
onBlur={unfocus}
onFocus={focus}
onKeyPress={handleKeyPress}
onKeyDown={handleKeyDown}
/>
{focusedInput && showSuggest && suggestionSections.labelNames.length + suggestionSections.literals.length > 0 && (
<div
ref={setPopperElement}
style={{...styles.popper, width: inputRef?.offsetWidth, marginLeft: 0}}
{...attributes.popper}
className='absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm'
>
<Transition
show={focusedInput && showSuggest}
as={Fragment}
leave='transition ease-in duration-100'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div>
{suggestionSections.labelNames.map((l, i) => (
<div
key={i}
className={cx(highlightedSuggestionIndex === i && 'text-white bg-indigo-600',
'cursor-default select-none relative py-2 pl-3 pr-9'
)}
onMouseOver={() => setHighlightedSuggestionIndex(i)}
onClick={() => applySuggestion(i)}
onMouseOut={() => resetHighlight()}
>
{l.value}
</div>
))}
{suggestionSections.literals.map((l, i) => (
<div
key={i}
className={cx(highlightedSuggestionIndex === i + suggestionSections.labelNames.length && 'text-white bg-indigo-600',
'cursor-default select-none relative py-2 pl-3 pr-9'
)}
onMouseOver={() =>
setHighlightedSuggestionIndex(i + suggestionSections.labelNames.length)
}
onClick={() => applySuggestion(i + suggestionSections.labelNames.length)}
onMouseOut={() => resetHighlight()}
>
{l.value}
</div>
))}
</div>
</Transition>
</div>
)}
</>
<>
<input
type='text'
className='bg-transparent focus:ring-indigo-800 flex-1 block w-full px-2 py-2 text-sm border-gray-300 dark:border-gray-600 border-b outline-none'
placeholder='filter profiles...'
ref={setInputRef}
onChange={onChange}
value={value}
onBlur={unfocus}
onFocus={focus}
onKeyPress={handleKeyPress}
onKeyDown={handleKeyDown}
/>
{focusedInput && showSuggest && suggestionSections.labelNames.length + suggestionSections.literals.length > 0 && (
<div
ref={setPopperElement}
style={{ ...styles.popper, width: inputRef?.offsetWidth, marginLeft: 0 }}
{...attributes.popper}
className='absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm'
>
<Transition
show={focusedInput && showSuggest}
as={Fragment}
leave='transition ease-in duration-100'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div>
{suggestionSections.labelNames.map((l, i) => (
<div
key={i}
className={cx(highlightedSuggestionIndex === i && 'text-white bg-indigo-600',
'cursor-default select-none relative py-2 pl-3 pr-9'
)}
onMouseOver={() => setHighlightedSuggestionIndex(i)}
onClick={() => applySuggestion(i)}
onMouseOut={() => resetHighlight()}
>
{l.value}
</div>
))}
{suggestionSections.literals.map((l, i) => (
<div
key={i}
className={cx(highlightedSuggestionIndex === i + suggestionSections.labelNames.length && 'text-white bg-indigo-600',
'cursor-default select-none relative py-2 pl-3 pr-9'
)}
onMouseOver={() =>
setHighlightedSuggestionIndex(i + suggestionSections.labelNames.length)
}
onClick={() => applySuggestion(i + suggestionSections.labelNames.length)}
onMouseOut={() => resetHighlight()}
>
{l.value}
</div>
))}
</div>
</Transition>
</div>
)}
</>
)
}

Expand Down
58 changes: 29 additions & 29 deletions ui/packages/app/web/src/components/MergeButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,51 +4,51 @@ import Button from './ui/Button'

const MergeButton = ({
disabled,
onClick,
onClick
}: {
disabled: boolean
onClick: () => void
}) => {
const [mergeHover, setMergeHover] = useState<boolean>(false)
const [mergePopperReferenceElement, setMergePopperReferenceElement] = useState<HTMLDivElement | null>(null)
const [mergePopperElement, setMergePopperElement] = useState<HTMLDivElement | null>(null);
const [mergePopperElement, setMergePopperElement] = useState<HTMLDivElement | null>(null)
const { styles, attributes } = usePopper(mergePopperReferenceElement, mergePopperElement, {
placement: 'bottom',
});
placement: 'bottom'
})

const mergeExplanation =
'Merging allows combining all profile samples of a query into a single report.'

if (disabled) return <></>

return (
<div
ref={setMergePopperReferenceElement}
<div
ref={setMergePopperReferenceElement}
>
<Button
color='neutral'
disabled={disabled}
onClick={onClick}
onMouseEnter={() => setMergeHover(true)}
onMouseLeave={() => setMergeHover(false)}
>
<Button
color='neutral'
disabled={disabled}
onClick={onClick}
onMouseEnter={() => setMergeHover(true)}
onMouseLeave={() => setMergeHover(false)}
>
Merge
</Button>
{mergeHover && (
<div ref={setMergePopperElement} style={styles.popper} {...attributes.popper}>
<div className="flex">
<div className="relative mx-2">
<svg className="text-black h-1 w-full left-0" x="0px" y="0px" viewBox="0 0 255 127.5">
<polygon className="fill-current" points="0,127.5 127.5,0 255,127.5"/>
</svg>
<div className="bg-black text-white text-xs rounded py-2 px-3 right-0 w-40 z-50">
{mergeExplanation}
</div>
</div>
</div>
Merge
</Button>
{mergeHover && (
<div ref={setMergePopperElement} style={styles.popper} {...attributes.popper}>
<div className="flex">
<div className="relative mx-2">
<svg className="text-black h-1 w-full left-0" x="0px" y="0px" viewBox="0 0 255 127.5">
<polygon className="fill-current" points="0,127.5 127.5,0 255,127.5"/>
</svg>
<div className="bg-black text-white text-xs rounded py-2 px-3 right-0 w-40 z-50">
{mergeExplanation}
</div>
)}
</div>
</div>
</div>
</div>
)}
</div>
)
}

Expand Down
Loading

0 comments on commit 0822cb5

Please sign in to comment.