Skip to content

Commit

Permalink
used Prettier code formatter extension, fixed useCallback stuff, remo…
Browse files Browse the repository at this point in the history 
…ved items from modals and put labels in the props
  • Loading branch information
@maxcao13
maxcao13 committed Jun 30, 2022
1 parent 560929f commit 23e5b2b
Show file tree
Hide file tree
Showing 10 changed files with 312 additions and 333 deletions.
76 changes: 36 additions & 40 deletions src/app/Archives/AllArchivedRecordingsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,14 @@ import { ArchivedRecording } from '@app/Shared/Services/Api.service';
import { ServiceContext } from '@app/Shared/Services/Services';
import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
import { useSubscriptions } from '@app/utils/useSubscriptions';
import { Button, Checkbox, Label, Text, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
import { Tbody, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
import { RecordingActions } from '@app/Recordings/RecordingActions';
import { RecordingsTable } from '@app/Recordings/RecordingsTable';
import { ReportFrame } from '@app/Recordings/ReportFrame';
import { Observable, forkJoin, merge } from 'rxjs';
import { first } from 'rxjs/operators';
import { PlusIcon, UploadIcon } from '@patternfly/react-icons';
import { UploadIcon } from '@patternfly/react-icons';
import { ArchiveUploadModal } from './ArchiveUploadModal';
import { parseLabels } from '@app/RecordingMetadata/RecordingLabel';
import { LabelCell } from '@app/RecordingMetadata/LabelCell';
Expand Down Expand Up @@ -96,7 +96,7 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
setIsLoading(true);
addSubscription(
context.api.doGet<ArchivedRecording[]>('recordings', 'v1')
.subscribe(handleRecordings)
.subscribe(handleRecordings)
);
}, [addSubscription, context, context.api, setIsLoading, handleRecordings]);

Expand Down Expand Up @@ -130,7 +130,6 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
);
}, [addSubscription, context, context.notificationChannel, setRecordings]);


const handleDeleteRecordings = () => {
const tasks: Observable<any>[] = [];
recordings.forEach((r: ArchivedRecording, idx) => {
Expand Down Expand Up @@ -165,7 +164,7 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
return parseLabels(props.recording.metadata.labels);
}, [props.recording.metadata.labels]);

const expandedRowId =`archived-table-row-${props.index}-exp`;
const expandedRowId = `archived-table-row-${props.index}-exp`;
const handleToggle = () => {
toggleExpanded(expandedRowId);
};
Expand All @@ -179,7 +178,7 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
};

const parentRow = React.useMemo(() => {
return(
return (
<Tr key={`${props.index}_parent`}>
<Td key={`archived-table-row-${props.index}_0`}>
<Checkbox
Expand All @@ -190,21 +189,21 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
/>
</Td>
<Td
key={`archived-table-row-${props.index}_1`}
id={`archived-ex-toggle-${props.index}`}
aria-controls={`archived-ex-expand-${props.index}`}
expand={{
rowIndex: props.index,
isExpanded: isExpanded,
onToggle: handleToggle,
}}
/>
key={`archived-table-row-${props.index}_1`}
id={`archived-ex-toggle-${props.index}`}
aria-controls={`archived-ex-expand-${props.index}`}
expand={{
rowIndex: props.index,
isExpanded: isExpanded,
onToggle: handleToggle,
}}
/>
<Td key={`archived-table-row-${props.index}_2`} dataLabel={tableColumns[0]}>
{props.recording.name}
</Td>
<Td key={`active-table-row-${props.index}_3`} dataLabel={tableColumns[1]}>
<LabelCell
labels={parsedLabels}
<LabelCell
labels={parsedLabels}
/>
</Td>
<RecordingActions
Expand All @@ -224,9 +223,9 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
dataLabel={"Content Details"}
colSpan={tableColumns.length + 3}
>
<ExpandableRowContent>
<ReportFrame isExpanded={isExpanded} recording={props.recording} width="100%" height="640" />
</ExpandableRowContent>
<ExpandableRowContent>
<ReportFrame isExpanded={isExpanded} recording={props.recording} width="100%" height="640" />
</ExpandableRowContent>
</Td>
</Tr>
)
Expand Down Expand Up @@ -259,16 +258,13 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco

const RecordingsToolbar = () => {
const deleteArchivedWarningModal = React.useMemo(() => {
const filtered = recordings.filter((r: ArchivedRecording, idx: number) => checkedIndices.includes(idx));
const items = filtered.map((r) => `${r.name}`);
return <DeleteWarningModal
return <DeleteWarningModal
warningType={DeleteWarningType.DeleteArchivedRecordings}
items={items}
visible={warningModalOpen}
onAccept={handleDeleteRecordings}
onClose={handleWarningModalClose}
onClose={handleWarningModalClose}
disableDialog={disableDeletionDialog}
/>
/>
}, [recordings, checkedIndices]);
return (
<Toolbar id="archived-recordings-toolbar">
Expand All @@ -280,19 +276,19 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
</ToolbarGroup>
<ToolbarGroup variant="icon-button-group">
<ToolbarItem>
<Button key="upload" variant="secondary" onClick={() => setShowUploadModal(true)}>
<UploadIcon/>
</Button>
<Button key="upload" variant="secondary" onClick={() => setShowUploadModal(true)}>
<UploadIcon />
</Button>
</ToolbarItem>
</ToolbarGroup>
{ deleteArchivedWarningModal }
{deleteArchivedWarningModal}
</ToolbarContent>
</Toolbar>
);
};

const recordingRows = React.useMemo(() => {
return recordings.map((r, idx) => <RecordingRow key={idx} recording={r} index={idx}/>)
return recordings.map((r, idx) => <RecordingRow key={idx} recording={r} index={idx} />)
}, [recordings, expandedRows, checkedIndices]);

const handleModalClose = React.useCallback(() => {
Expand All @@ -302,19 +298,19 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco

return (<>
<RecordingsTable
tableTitle="Archived Flight Recordings"
toolbar={<RecordingsToolbar />}
tableColumns={tableColumns}
isHeaderChecked={headerChecked}
onHeaderCheck={handleHeaderCheck}
isLoading={isLoading}
isEmpty={!recordings.length}
errorMessage=''
tableTitle="Archived Flight Recordings"
toolbar={<RecordingsToolbar />}
tableColumns={tableColumns}
isHeaderChecked={headerChecked}
onHeaderCheck={handleHeaderCheck}
isLoading={isLoading}
isEmpty={!recordings.length}
errorMessage=''
>
{recordingRows}
</RecordingsTable>

<ArchiveUploadModal visible={showUploadModal} onClose={handleModalClose}/>
<ArchiveUploadModal visible={showUploadModal} onClose={handleModalClose} />
</>);
};

93 changes: 46 additions & 47 deletions src/app/Events/EventTemplates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@ export const EventTemplates = () => {
const addSubscription = useSubscriptions();

const tableColumns = [
{ title: 'Name', transforms: [ sortable ] },
{ title: 'Name', transforms: [sortable] },
'Description',
{ title: 'Provider', transforms: [ sortable ] },
{ title: 'Type', transforms: [ sortable ] },
{ title: 'Provider', transforms: [sortable] },
{ title: 'Type', transforms: [sortable] },
];

React.useEffect(() => {
Expand Down Expand Up @@ -110,11 +110,11 @@ export const EventTemplates = () => {
setIsLoading(true)
addSubscription(
context.target.target()
.pipe(
filter(target => target !== NO_TARGET),
first(),
concatMap(target => context.api.doGet<EventTemplate[]>(`targets/${encodeURIComponent(target.connectUrl)}/templates`)),
).subscribe(value => handleTemplates(value), err => handleError(err))
.pipe(
filter(target => target !== NO_TARGET),
first(),
concatMap(target => context.api.doGet<EventTemplate[]>(`targets/${encodeURIComponent(target.connectUrl)}/templates`)),
).subscribe(value => handleTemplates(value), err => handleError(err))
);
}, [addSubscription, context, context.target, context.api, setIsLoading, handleTemplates, handleError]);

Expand Down Expand Up @@ -156,15 +156,15 @@ export const EventTemplates = () => {
}, [context.target]);

const displayTemplates = React.useMemo(
() => filteredTemplates.map((t: EventTemplate) => ([ t.name, t.description, t.provider, t.type.charAt(0).toUpperCase() + t.type.slice(1).toLowerCase() ])),
() => filteredTemplates.map((t: EventTemplate) => ([t.name, t.description, t.provider, t.type.charAt(0).toUpperCase() + t.type.slice(1).toLowerCase()])),
[filteredTemplates]
);

const handleDelete = (rowData) => {
addSubscription(
context.api.deleteCustomEventTemplate(rowData[0])
.pipe(first())
.subscribe(() => {} /* do nothing - notification will handle updating state */)
.pipe(first())
.subscribe(() => { } /* do nothing - notification will handle updating state */)
);
};

Expand All @@ -180,25 +180,25 @@ export const EventTemplates = () => {
] as IAction[];

const template: EventTemplate = filteredTemplates[extraData.rowIndex];
if ((template.name !== 'ALL')||(template.type !== 'TARGET')) {
if ((template.name !== 'ALL') || (template.type !== 'TARGET')) {
actions = actions.concat([
{
title: 'Download',
onClick: (event, rowId) => context.api.downloadTemplate(filteredTemplates[rowId]),
}
{
title: 'Download',
onClick: (event, rowId) => context.api.downloadTemplate(filteredTemplates[rowId]),
}
]);
}
if (template.type === 'CUSTOM') {
actions = actions.concat([
{
isSeparator: true,
{
isSeparator: true,
},
{
title: 'Delete',
onClick: (event, rowId, rowData) => {
handleDeleteButton(rowData);
},
{
title: 'Delete',
onClick: (event, rowId, rowData) => {
handleDeleteButton(rowData);
},
}
}
]);
}
return actions;
Expand Down Expand Up @@ -229,15 +229,15 @@ export const EventTemplates = () => {
setUploading(true);
addSubscription(
context.api.addCustomEventTemplate(uploadFile)
.pipe(first())
.subscribe(success => {
setUploading(false);
if (success) {
setUploadFile(undefined);
setUploadFilename('');
setModalOpen(false);
}
})
.pipe(first())
.subscribe(success => {
setUploading(false);
if (success) {
setUploadFile(undefined);
setUploadFilename('');
setModalOpen(false);
}
})
);
};

Expand Down Expand Up @@ -282,37 +282,36 @@ export const EventTemplates = () => {
<ToolbarContent>
<ToolbarGroup variant="filter-group">
<ToolbarItem>
<TextInput name="templateFilter" id="templateFilter" type="search" placeholder="Filter..." aria-label="Event template filter" onChange={setFilterText}/>
<TextInput name="templateFilter" id="templateFilter" type="search" placeholder="Filter..." aria-label="Event template filter" onChange={setFilterText} />
</ToolbarItem>
</ToolbarGroup>
<ToolbarGroup variant="icon-button-group">
<ToolbarItem>
<Button key="upload" variant="secondary" onClick={handleModalToggle}>
<UploadIcon/>
<UploadIcon />
</Button>
</ToolbarItem>
</ToolbarGroup>
<DeleteWarningModal
<DeleteWarningModal
warningType={DeleteWarningType.DeleteEventTemplates}
items={[rowDeleteData[0]]}
visible={warningModalOpen}
onAccept={handleWarningModalAccept}
onClose={handleWarningModalClose}
disableDialog={disableDeletionDialog}/>
</ToolbarContent>
onClose={handleWarningModalClose}
disableDialog={disableDeletionDialog} />
</ToolbarContent>
</Toolbar>
</>);

if (errorMessage != '') {
return (<ErrorView message={errorMessage}/>);
return (<ErrorView message={errorMessage} />);
} else if (isLoading) {
return (<>
{ toolbar }
<LoadingView/>
{toolbar}
<LoadingView />
</>);
} else {
return (<>
{ toolbar }
{toolbar}
<Table aria-label="Event Templates table"
variant={TableVariant.compact}
cells={tableColumns}
Expand All @@ -332,7 +331,7 @@ export const EventTemplates = () => {
onClose={handleModalToggle}
title="Create Custom Event Template"
description="Create a customized event template. This is a specialized XML file with the extension .jfc, typically created using JDK Mission Control, which defines a set of events and their options to configure. Not all customized templates are applicable to all targets -- a template may specify a custom application event type, which is only available in targets running the associated application."
>
>
<Form>
<FormGroup
label="Template XML"
Expand Down
Loading

0 comments on commit 23e5b2b

Please sign in to comment.