-
Notifications
You must be signed in to change notification settings - Fork 626
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(webapp): Add settings/apps page #1424
Conversation
3613486
to
85eb9b4
Compare
85eb9b4
to
f13d6b5
Compare
/create-server |
Will review more in depth later, but right now: |
name="Search app input" | ||
/> | ||
</div> | ||
<table |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't seem to be using the table component #1403
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
my bad, fixed in the next commit
async (app: App, thunkAPI) => { | ||
const res = await deleteAppAPI({ name: app.name }); | ||
|
||
// eslint-disable-next-line @typescript-eslint/no-floating-promises |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's true we do have this rule, but I wonder why it doesn't trigger in other places like here https://github.com/pyroscope-io/pyroscope/blob/main/webapp/javascript/redux/reducers/continuous.ts#L230
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it does, but warnings only
) : ( | ||
<tr> | ||
<td className={appsStyles.appsTableEmptyMessage} colSpan={7}> | ||
The list is empty |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are distinguishing between an empty list (ie no apps) vs there's no apps bc it's a loading state?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rn it's just an empty list message while data is loading, do we have some kinda spinner component for it? If so, we need to update user list too
const response = await request(`/api/apps`, { | ||
method: 'DELETE', | ||
body: JSON.stringify({ name }), | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can take a long time (there are instances with 15+ minutes). How much is the timeout currently?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We are using fetch
for request, default timeouts is 300s in Chrome and 90s in Firefox and looks like there is no way to increase this values. Possible fix may be switching to axios or similar lib
size-limit report 📦
|
Codecov Report
@@ Coverage Diff @@
## main #1424 +/- ##
==========================================
+ Coverage 68.37% 68.51% +0.14%
==========================================
Files 129 129
Lines 4252 4248 -4
Branches 1155 1138 -17
==========================================
+ Hits 2907 2910 +3
+ Misses 1340 1333 -7
Partials 5 5
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. |
cdfb495
to
cee6097
Compare
|
||
useEffect(() => { | ||
dispatch(reloadApps()); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Addressed in 66cc28d
import { getAppTableRows } from './getAppTableRows'; | ||
|
||
const headRow = [ | ||
{ name: '', label: '', sortable: 0 }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Addressed in 66cc28d
/create-server |
Looks good! Have a couple thoughts:
Kapture.2022-08-19.at.12.33.40.mp4
For a) That message needs to be overwriten, since behaviour will change in the cloud |
.popup label { | ||
color: var(--ps-neutral-2); | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I removed this style because it hide inputLabel in modal window and looks like we are not using inputLabel anywhere else
Screen.Recording.2022-08-22.at.14.04.23.mov |
.then(() => { | ||
setAppsInProcessing(appsInProcessing.filter((x) => x !== app.name)); | ||
setDeletedApps([...deletedApps, app.name]); | ||
// eslint-disable-next-line @typescript-eslint/no-floating-promises |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe it's better to move same rules to top of the file (line 48, 54 etc.)?
/* eslint-disable @typescript-eslint/no-floating-promises */
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
@@ -0,0 +1,10 @@ | |||
import { z } from 'zod'; | |||
|
|||
export const appModel = z.object({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@eh-am should we use uppercase in zod entities?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
like appModel => AppModel
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
or AppSchema
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made names here like in this users.ts file
type: 'pristine' | 'loading' | 'loaded' | 'failed'; | ||
data?: Users; | ||
}; | ||
enum FetchStatus { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
enum keys and values are the same, maybe it's better to use Numeric enums, instead of String ones?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point, but we are using the same strings statuses in other reducers and I think we should refactor them all in the other task
@@ -91,9 +93,14 @@ function Table({ | |||
table, | |||
tableBodyRef, | |||
className, | |||
isLoading, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You've added loading state for all tables in the app, @eh-am does it work for web app?
|
||
import styles from './AppTableItem.module.css'; | ||
|
||
interface IDeleteButtorProps { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we dont use I
prefix
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
function confirmDelete({ | ||
objectName, | ||
objectType, | ||
object, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we use objectName
prop instead of object
? since they have same string
type
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
const isLoading = useAppSelector(selectIsLoadingApps); | ||
const [search, setSearchField] = useState(''); | ||
const [appsInProcessing, setAppsInProcessing] = useState([] as string[]); | ||
const [deletedApps, setDeletedApps] = useState([] as string[]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const [deletedApps, setDeletedApps] = useState([] as string[]); | |
const [deletedApps, setDeletedApps] = useState<string[]>([]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
@@ -0,0 +1,10 @@ | |||
import { z } from 'zod'; | |||
|
|||
export const appModel = z.object({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
or AppSchema
/create-server |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Last version with changes requested by @Rperry2174 Screen.Recording.2022-08-24.at.17.29.32.mov |
Brief
Changes
Concerns