Skip to content
Snippets Groups Projects
Commit 4ddc2572 authored by Fanna Lautenbach's avatar Fanna Lautenbach
Browse files

extract timelineitempopover + tests

parent 8fcb0486
No related branches found
No related tags found
1 merge request!1153New Week View
Hide whitespace changes
Inline Side-by-side
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.js 0 → 100644
+ 88
− 0
View file @ 4ddc2572
import UIConstants from "../../../utils/ui.constants";
import React from "react";
export default function TimelineItemPopover(props) {
const {mouseOverItem} = props;
if (!mouseOverItem) {
return;
}
return <div className="p-overlaypanel-content">
{mouseOverItem && mouseOverItem.type === "SCHEDULE" &&
<div className={`p-grid timeline-item su-${mouseOverItem.status}`} style={{width: '350px'}}>
<h3 className={`col-12 su-${mouseOverItem.status}-icon`}>
Scheduling Unit ({mouseOverItem.suId}) Overview
</h3>
<hr></hr>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Project:</label>
<div className="col-7">{mouseOverItem.project}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduling Unit:</label>
<div className="col-7">{mouseOverItem.name}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduler:</label>
<div className="col-7">{mouseOverItem.scheduleMethod}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Friends:</label>
<div className="col-7">{mouseOverItem.friends ? mouseOverItem.friends : "-"}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Start Time:</label>
<div
className="col-7">{mouseOverItem.suStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>End Time:</label>
<div
className="col-7">{mouseOverItem.suStopTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Antenna Set:</label>
<div className="col-7">{mouseOverItem.antennaSet}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Stations:</label>
<div
className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Status:</label>
<div className="col-7">{mouseOverItem.status}</div>
{mouseOverItem.status === 'unschedulable' &&
<>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Unschedule
Reason:</label>
<div className="col-7">{mouseOverItem.unschedulable_reason}</div>
</>
}
{mouseOverItem.type === 'SCHEDULE' &&
<>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Exposure
Time:</label>
<div className="col-7">{mouseOverItem.on_sky_duration}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>SU Duration:</label>
<div className="col-7">{mouseOverItem.duration}</div>
</>}
</div>
}
{(mouseOverItem && mouseOverItem.type === "RESERVATION") &&
<div className={`p-grid`} style={{
width: '350px',
backgroundColor: mouseOverItem.bgColor,
color: mouseOverItem.color
}}>
<h3 className={`col-12`}>Reservation Overview</h3>
<hr></hr>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Name:</label>
<div className="col-7">{mouseOverItem.name}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Description:</label>
<div className="col-7">{mouseOverItem.desc}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Type:</label>
<div className="col-7">{mouseOverItem.activity_type}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Stations:</label>
<div
className="col-7">{mouseOverItem.stations.groups ? `${mouseOverItem.stations.groups} : ${mouseOverItem.stations.counts}` : mouseOverItem.stations}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Project:</label>
<div className="col-7">{mouseOverItem.project ? mouseOverItem.project : "-"}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Start Time:</label>
<div
className="col-7">{mouseOverItem.displayStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>End Time:</label>
<div
className="col-7">{mouseOverItem.displayEndTime ? mouseOverItem.displayEndTime.format(UIConstants.CALENDAR_DATETIME_FORMAT) : 'Unknown'}</div>
{/* <label className={`col-5`} style={{color: mouseOverItem.color}}>Stations:</label>
<div className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div> */}
<label className={`col-5`} style={{color: mouseOverItem.color}}>Duration:</label>
<div className="col-7">{mouseOverItem.duration}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Planned:</label>
<div className="col-7">{mouseOverItem.planned ? 'Yes' : 'No'}</div>
</div>
}
</div>
}
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.test.js 0 → 100644
+ 94
− 0
View file @ 4ddc2572
import {render} from "@testing-library/react";
import TimelineItemPopover from "./TimelineItemPopover";
import moment from "moment";
import {removeReact18ConsoleErrors} from "../../../utils/test.helper";
removeReact18ConsoleErrors()
describe("TimelineItemPopover", () => {
let mouseOverItemSchedule = {
type: "SCHEDULE",
status: "scheduled",
suId: "123",
project: "X-men",
name: "Wolverine",
scheduleMethod: "dynamic",
suStartTime: moment("2023-07-27T08:00:00Z"),
suStopTime: moment("2023-07-27T10:00:00Z"),
antennaSet: "LBA",
stations: {
groups: 2,
counts: 8,
},
on_sky_duration: 2.5,
duration: 3.5,
};
test("Render type SCHEDULE for a schedulable item", () => {
const content = render(<TimelineItemPopover mouseOverItem={mouseOverItemSchedule}/>);
console.log("container")
expect(content.getByText(`Scheduling Unit (${mouseOverItemSchedule.suId}) Overview`)).toBeInTheDocument();
expect(content.getByText(`Project: ${mouseOverItemSchedule.project}`)).toBeInTheDocument();
expect(content.getByText(`Scheduling Unit: ${mouseOverItemSchedule.name}`)).toBeInTheDocument();
expect(content.getByText(`Scheduler: ${mouseOverItemSchedule.scheduleMethod}`)).toBeInTheDocument();
expect(content.getByText(`Friends: ${mouseOverItemSchedule.friends ? mouseOverItemSchedule.friends : "-"}`)).toBeInTheDocument();
expect(content.getByText(`Start Time: ${mouseOverItemSchedule.suStartTime.toISOString()}`)).toBeInTheDocument();
expect(content.getByText(`End Time: ${mouseOverItemSchedule.suStopTime.toISOString()}`)).toBeInTheDocument();
expect(content.getByText(`Antenna Set: ${mouseOverItemSchedule.antennaSet}`)).toBeInTheDocument();
expect(content.getByText(`Stations: ${mouseOverItemSchedule.stations.groups}:${mouseOverItemSchedule.stations.counts}`)).toBeInTheDocument();
expect(content.getByText(`Status: ${mouseOverItemSchedule.status}`)).toBeInTheDocument();
expect(content.getByText("Exposure Time:")).toBeInTheDocument();
expect(content.getByText(mouseOverItemSchedule.on_sky_duration.toString())).toBeInTheDocument();
expect(content.getByText("SU Duration:")).toBeInTheDocument();
expect(content.getByText(mouseOverItemSchedule.duration.toString())).toBeInTheDocument();
});
test("Render type SCHEDULE for an unschedulable item", () => {
const {getByText} = render(<TimelineItemPopover mouseOverItem={mouseOverItemSchedule}/>);
expect(getByText(`Scheduling Unit (${mouseOverItemSchedule.suId}) Overview`)).toBeInTheDocument();
expect(getByText(`Project: ${mouseOverItemSchedule.project}`)).toBeInTheDocument();
expect(getByText(`Scheduling Unit: ${mouseOverItemSchedule.name}`)).toBeInTheDocument();
expect(getByText(`Scheduler: ${mouseOverItemSchedule.scheduleMethod}`)).toBeInTheDocument();
expect(getByText(`Friends: ${mouseOverItemSchedule.friends ? mouseOverItemSchedule.friends : "-"}`)).toBeInTheDocument();
expect(getByText(`Start Time: ${mouseOverItemSchedule.suStartTime.toISOString()}`)).toBeInTheDocument();
expect(getByText(`End Time: ${mouseOverItemSchedule.suStopTime.toISOString()}`)).toBeInTheDocument();
expect(getByText(`Antenna Set: ${mouseOverItemSchedule.antennaSet}`)).toBeInTheDocument();
expect(getByText(`Stations: ${mouseOverItemSchedule.stations.groups}:${mouseOverItemSchedule.stations.counts}`)).toBeInTheDocument();
expect(getByText(`Status: ${mouseOverItemSchedule.status}`)).toBeInTheDocument();
expect(getByText("Unschedule Reason:")).toBeInTheDocument();
expect(getByText(mouseOverItemSchedule.unschedulable_reason)).toBeInTheDocument();
});
test("Render a RESERVATION", () => {
const mouseOverItem = {
type: "RESERVATION",
bgColor: "#ffffff",
color: "#000000",
name: "Reservation Name",
desc: "Reservation Description",
activity_type: "Type",
stations: "Station Name",
project: "Project Name",
displayStartTime: moment("2023-07-27T12:00:00Z"),
displayEndTime: moment("2023-07-27T14:00:00Z"),
duration: 2,
planned: true,
};
const {getByText} = render(<TimelineItemPopover mouseOverItem={mouseOverItem}/>);
expect(getByText("Reservation Overview")).toBeInTheDocument();
expect(getByText(`Name: ${mouseOverItem.name}`)).toBeInTheDocument();
expect(getByText(`Description: ${mouseOverItem.desc}`)).toBeInTheDocument();
});
test.each([null, undefined, {}])('Render nothing on invalid input: %s', (mouseOverItem) => {
const {queryByText} = render(<TimelineItemPopover mouseOverItem={mouseOverItem}/>);
expect(queryByText("Reservation Overview")).not.toBeInTheDocument();
expect(queryByText("Scheduling Unit Overview")).not.toBeInTheDocument();
});
});
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
+ 2
− 79
View file @ 4ddc2572
...@@ -34,6 +34,7 @@ import AuthUtil from '../../utils/auth.util'; ...@@ -34,6 +34,7 @@ import AuthUtil from '../../utils/auth.util';
import AuthStore from '../../authenticate/auth.store'; import AuthStore from '../../authenticate/auth.store';
import TopProgressBar from '../../layout/components/TopProgressBar'; import TopProgressBar from '../../layout/components/TopProgressBar';
import {getTimelineItem} from "./week.view.helper"; import {getTimelineItem} from "./week.view.helper";
import TimelineItemPopover from "./components/TimelineItemPopover";
// Color constant for status // Color constant for status
export const STATUS_COLORS = { export const STATUS_COLORS = {
...@@ -1648,85 +1649,7 @@ export class WeekTimelineView extends Component { ...@@ -1648,85 +1649,7 @@ export class WeekTimelineView extends Component {
{/* SU Item Tooltip popover with SU status color */} {/* SU Item Tooltip popover with SU status color */}
<div className="p-overlaypanel p-component timeline-popover" <div className="p-overlaypanel p-component timeline-popover"
style={{...this.state.popPosition, zIndex: 1324, opacity: 1.944}}> style={{...this.state.popPosition, zIndex: 1324, opacity: 1.944}}>
<div className="p-overlaypanel-content"> <TimelineItemPopover mouseOverItem={mouseOverItem}/>
{mouseOverItem && mouseOverItem.type === "SCHEDULE" &&
<div className={`p-grid su-${mouseOverItem.status}`} style={{width: '350px'}}>
<h3 className={`col-12 su-${mouseOverItem.status}-icon`}>
Scheduling Unit ({mouseOverItem.suId}) Overview
</h3>
<hr></hr>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Project:</label>
<div className="col-7">{mouseOverItem.project}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduling Unit:</label>
<div className="col-7">{mouseOverItem.name}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Scheduler:</label>
<div className="col-7">{mouseOverItem.scheduleMethod}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Friends:</label>
<div className="col-7">{mouseOverItem.friends ? mouseOverItem.friends : "-"}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Start Time:</label>
<div
className="col-7">{mouseOverItem.suStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>End Time:</label>
<div
className="col-7">{mouseOverItem.suStopTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Antenna Set:</label>
<div className="col-7">{mouseOverItem.antennaSet}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Stations:</label>
<div
className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Status:</label>
<div className="col-7">{mouseOverItem.status}</div>
{mouseOverItem.status === 'unschedulable' &&
<>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Unschedule
Reason:</label>
<div className="col-7">{mouseOverItem.unschedulable_reason}</div>
</>
}
{mouseOverItem.type === 'SCHEDULE' &&
<>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>Exposure
Time:</label>
<div className="col-7">{mouseOverItem.on_sky_duration}</div>
<label className={`col-5 su-${mouseOverItem.status}-icon`}>SU Duration:</label>
<div className="col-7">{mouseOverItem.duration}</div>
</>}
</div>
}
{(mouseOverItem && mouseOverItem.type === "RESERVATION") &&
<div className={`p-grid`} style={{
width: '350px',
backgroundColor: mouseOverItem.bgColor,
color: mouseOverItem.color
}}>
<h3 className={`col-12`}>Reservation Overview</h3>
<hr></hr>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Name:</label>
<div className="col-7">{mouseOverItem.name}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Description:</label>
<div className="col-7">{mouseOverItem.desc}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Type:</label>
<div className="col-7">{mouseOverItem.activity_type}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Stations:</label>
<div
className="col-7">{mouseOverItem.stations.groups ? `${mouseOverItem.stations.groups} : ${mouseOverItem.stations.counts}` : mouseOverItem.stations}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Project:</label>
<div className="col-7">{mouseOverItem.project ? mouseOverItem.project : "-"}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Start Time:</label>
<div
className="col-7">{mouseOverItem.displayStartTime.format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>End Time:</label>
<div
className="col-7">{mouseOverItem.displayEndTime ? mouseOverItem.displayEndTime.format(UIConstants.CALENDAR_DATETIME_FORMAT) : 'Unknown'}</div>
{/* <label className={`col-5`} style={{color: mouseOverItem.color}}>Stations:</label>
<div className="col-7">{mouseOverItem.stations.groups}:{mouseOverItem.stations.counts}</div> */}
<label className={`col-5`} style={{color: mouseOverItem.color}}>Duration:</label>
<div className="col-7">{mouseOverItem.duration}</div>
<label className={`col-5`} style={{color: mouseOverItem.color}}>Planned:</label>
<div className="col-7">{mouseOverItem.planned ? 'Yes' : 'No'}</div>
</div>
}
</div>
</div> </div>
{/* Open Websocket after loading all initial data */} {/* Open Websocket after loading all initial data */}
{!this.state.isLoading && {!this.state.isLoading &&
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment