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

fix SU summary styling + removal of white lines in class

parent 31fd65a6
Branches
Tags
1 merge request!1153New Week View
Hide whitespace changes
Inline Side-by-side
SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_suSummary.scss
+ 7
− 0
View file @ f862e770
......@@ -56,4 +56,11 @@
overflow-y: scroll;
border: 1px solid lightgrey;
padding: 0px 10px 10px 10px;
left: 15px;
max-width: 5rem !important;
}
.station-information {
display: flex;
column-gap: 5rem;
}
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
+ 17
− 0
View file @ f862e770
......@@ -113,8 +113,25 @@
.timeline-details-pane {
font-size: 14px;
flex-direction: column;
}
.timeline-details-header {
display: flex;
}
.timeline-details-overview {
display: flex;
flex-direction: column;
.group {
display: flex;
flex-direction: row;
line-height: 0;
}
}
#now-btn {
margin-left: 10px;
}
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/summary.js
+ 139
− 105
View file @ f862e770
......@@ -44,11 +44,11 @@ export class SchedulingUnitSummary extends Component {
this.showCancelSUConfirmation = this.showCancelSUConfirmation.bind(this);
this.cancelSchedulingUnit = this.cancelSchedulingUnit.bind(this);
this.closeDialog = this.closeDialog.bind(this);
}
}
/**
* Function to close the summary panel and call parent callback function to close.
*/
*/
closeSUDets() {
if (this.props.closeCallback) {
this.props.closeCallback();
......@@ -57,7 +57,7 @@ export class SchedulingUnitSummary extends Component {
/**
* Order the properties in the constraint object in the predefined order
* @param {Object} constraintsDoc
* @param {Object} constraintsDoc
*/
getOrderedConstraints(constraintsDoc, constraintsOrder) {
let orderedConstraints = {};
......@@ -72,7 +72,7 @@ export class SchedulingUnitSummary extends Component {
}
/**
* warn before cancel the page if any changes detected
* warn before cancel the page if any changes detected
*/
checkIsDirty() {
if (this.state.isDirty) {
......@@ -86,7 +86,7 @@ export class SchedulingUnitSummary extends Component {
/**
* Format the constraint object i.e removes the empty values to show only available values.
* @param {Object} constraint
* @param {Object} constraint
*/
getFormattedConstraint(constraint) {
if (constraint) {
......@@ -133,7 +133,7 @@ export class SchedulingUnitSummary extends Component {
refPointing['pointing']['angle1'] = UnitConverter.getAngleInput(refPointing['pointing']['angle1']);
refPointing['pointing']['angle2'] = UnitConverter.getAngleInput(refPointing['pointing']['angle2'], true);
refPointing['enabled'] = refPointing.enabled?'true':'false';
newObject[objectKey.replace(/_/g, ' ')] = refPointing;
newObject[objectKey.replace(/_/g, ' ')] = refPointing;
} else {
let object = this.getFormattedConstraint(constraint[objectKey]);
if (object) {
......@@ -156,9 +156,9 @@ export class SchedulingUnitSummary extends Component {
}
/**
* Gets the output from the SchedulingConstraints editor without output formatting so that the values entered in the
* Gets the output from the SchedulingConstraints editor without output formatting so that the values entered in the
* editor can be shown in the summary without any conversion.
* @param {Object} jsonOutput
* @param {Object} jsonOutput
*/
setConstraintsEditorOutput(jsonOutput, errors) {
/* to update particular value on current component */
......@@ -181,11 +181,11 @@ export class SchedulingUnitSummary extends Component {
}
async componentDidMount() {
const promises = [
const promises = [
AuthUtil.getUserRolePermission()
];
this.setState({disableCancelBtn: this.props.schedulingUnit.status === 'cancelled'?true:false});
this.updateConstraintTemplate();
this.updateConstraintTemplate();
await Promise.all(promises).then(responses => {
this.setState({userrole: responses[0],editCheck:1});
});
......@@ -193,15 +193,15 @@ export class SchedulingUnitSummary extends Component {
/**
* Add new fields for plus/minu value for offset (from & to)
* @param {*} constraintTemplate
* @returns
* @param {*} constraintTemplate
* @returns
*/
async updateConstraintTemplate() {
if (this.props.constraintsTemplate) {
let constraintTemplate = this.props.constraintsTemplate;
constraintTemplate.schema.properties.sky.properties.transit_offset.properties.from.default =
constraintTemplate.schema.properties.sky.properties.transit_offset.properties.from.default =
UnitConverter.getSecsToHHmmssWithSign(this.props.constraintsTemplate.schema.properties.sky.properties.transit_offset.properties.from.default);
constraintTemplate.schema.properties.sky.properties.transit_offset.properties.to.default =
constraintTemplate.schema.properties.sky.properties.transit_offset.properties.to.default =
UnitConverter.getSecsToHHmmssWithSign(this.props.constraintsTemplate.schema.properties.sky.properties.transit_offset.properties.to.default);
this.setState({constraintTemplate: constraintTemplate});
}
......@@ -209,8 +209,8 @@ export class SchedulingUnitSummary extends Component {
/**
* Format constraint field value for UI
* @param {*} scheduling_constraints_doc
* @returns
* @param {*} scheduling_constraints_doc
* @returns
*/
formatConstraintDocForUI(scheduleunit) {
if (scheduleunit.scheduling_constraints_doc && scheduleunit.scheduling_constraints_doc.sky && scheduleunit.scheduling_constraints_doc.sky.transit_offset) {
......@@ -223,7 +223,7 @@ export class SchedulingUnitSummary extends Component {
}
return scheduleunit;
}
/**
* Confirm Autodeletion before update the value
*/
......@@ -233,7 +233,7 @@ export class SchedulingUnitSummary extends Component {
dialog.header= "Confirm Pin/Unpin data after ingest";
dialog.detail = this.props.schedulingUnit.output_pinned ? 'Do you want to Unpin data after ingest?' : 'Do you want to Pin data after ingest?';
dialog.content = '';
dialog.actions = [{id: 'yes', title: this.props.schedulingUnit.output_pinned?'Unpin data': 'Pin data',
dialog.actions = [{id: 'yes', title: this.props.schedulingUnit.output_pinned?'Unpin data': 'Pin data',
className:this.props.schedulingUnit.output_pinned?'act-btn-dispose':'', callback: this.setAutoDeletion},
{id: 'no', title: 'Cancel', className:'act-btn-cancel', callback: this.closeDialog}];
dialog.onSubmit = this.setAutoDeletion;
......@@ -255,7 +255,7 @@ export class SchedulingUnitSummary extends Component {
async setAutoDeletion() {
let suCopy = _.cloneDeep(this.props.schedulingUnit);
let tasks = [];
let updatedResSU = await ScheduleService.updateSchedulingUnitValue('blueprint',
let updatedResSU = await ScheduleService.updateSchedulingUnitValue('blueprint',
{id: this.props.schedulingUnit.id, 'output_pinned': !this.props.schedulingUnit.output_pinned}, tasks);
if (updatedResSU) {
appGrowl.show({ severity: 'success', summary: 'Success', detail: `${updatedResSU.output_pinned?'Pin':'Unpin'} data after ingest updated successfully` });
......@@ -306,7 +306,7 @@ export class SchedulingUnitSummary extends Component {
}
render() {
const permissions = this.state.userrole.userRolePermission.scheduleunit;
const permissions = this.state.userrole.userRolePermission.scheduleunit;
let schedulingUnit = _.cloneDeep(this.props.schedulingUnit);
if (this.currentSU.id !== schedulingUnit.id) {
this.setState({schedulingUnit: schedulingUnit});
......@@ -325,97 +325,131 @@ export class SchedulingUnitSummary extends Component {
}
return task;
});
const constraintsTemplate = this.props.constraintsTemplate;
const constraintsTemplate = this.props.constraintsTemplate;
// After receiving output from the SchedulingConstraint editor order and format it to display
schedulingUnit = this.formatConstraintDocForUI(schedulingUnit);
let constraintsDoc = schedulingUnit.scheduling_constraints_doc ? this.getOrderedConstraints(schedulingUnit.scheduling_constraints_doc,this.constraintsOrder) : null;
let constraintsDoc = schedulingUnit.scheduling_constraints_doc ? this.getOrderedConstraints(schedulingUnit.scheduling_constraints_doc,this.constraintsOrder) : null;
let disableBtn= this.state.showerror!==0 ?true: false;
return (
<React.Fragment>
{schedulingUnit &&
<div className="p-grid timeline-details-pane" style={{ marginTop: '10px' }}>
<div className="timeline-details-header">
<h6 className="col-lg-9 col-sm-9">Scheduling Unit Details</h6>
<Link onClick={this.redirectToSUDetails} title="View Full Details">
<i className="fa fa-eye" style={{paddingRight: '3px'}}></i></Link>
<Link onClick={this.showCancelSUConfirmation}
title={this.state.schedulingUnit.status === 'cancelled'?"Scheduling Unit already cancelled":"Cancel Scheduling Unit"}
<Link onClick={this.showCancelSUConfirmation}
title={this.state.schedulingUnit.status === 'cancelled'?"Scheduling Unit already cancelled":"Cancel Scheduling Unit"}
className={this.state.schedulingUnit.status === 'cancelled'?"act-btn-disable":""} >
<i className="fa fa-ban"
style={{fontSize: '16px', paddingRight: '3px', color: this.state.schedulingUnit.status === 'cancelled'?'gray':'',
<i className="fa fa-ban"
style={{fontSize: '16px', paddingRight: '3px', color: this.state.schedulingUnit.status === 'cancelled'?'gray':'',
cursor: this.state.schedulingUnit.status === 'cancelled'?'not-allowed':''}}></i></Link>
<Link onClick={this.confirmAutoDeletion}
<Link onClick={this.confirmAutoDeletion}
title ={permissions.autodeletion? this.state.schedulingUnit.output_pinned? 'Unpin data after ingest' : 'Pin data after ingest' : `${this.access_denied_message} to do Pin/Unpin data after ingest`}>
<i className="fa fa-thumbtack" style={{fontSize: '16px', paddingRight: '3px'}}></i></Link>
<Link to={this.props.location ? this.props.location.pathname : "/su/timelineview"} onClick={this.closeSUDets} title="Close Details"><i className="fa fa-times"></i></Link>
<div className="col-5"><label>Name:</label></div>
<div className="col-7">{schedulingUnit.name}</div>
<div className="col-5"><label>Scheduling Unit Id:</label></div>
<div className="col-7">{schedulingUnit.id}</div>
<div className="col-5"><label>Project:</label></div>
<div className="col-7">{schedulingUnit.project}</div>
<div className="col-5"><label>Start Time:</label></div>
<div className="col-7">{moment.utc(schedulingUnit.start_time).format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<div className="col-5"><label>Stop Time:</label></div>
<div className="col-7">{moment.utc(schedulingUnit.stop_time).format(UIConstants.CALENDAR_DATETIME_FORMAT)}</div>
<div className="col-5"><label>Status:</label></div>
<div className="col-7">
<span className={"tag-content p-chips-token-label su-"+schedulingUnit.status}>{schedulingUnit.status}</span>
</div>
<div className="timeline-details-overview">
<div className="group">
<label className="col-5">Name:</label>
<div className="col-5">{schedulingUnit.name}</div>
</div>
<div className="group">
<label className="col-5">Scheduling Unit Id:</label>
<div className="col-5">{schedulingUnit.id}</div>
</div>
<div className="group">
<label className="col-5">Project:</label>
<div className="col-5">{schedulingUnit.project}</div>
</div>
<div className="group">
<label className="col-5">Start Time:</label>
<div className="col-5">
{moment.utc(schedulingUnit.start_time).format(UIConstants.CALENDAR_DATETIME_FORMAT)}
</div>
</div>
<div className="group">
<label className="col-5">Stop Time:</label>
<div className="col-5">
{moment.utc(schedulingUnit.stop_time).format(UIConstants.CALENDAR_DATETIME_FORMAT)}
</div>
</div>
<div className="group">
<label className="col-5">Status:</label>
<div className="col-5">
<span className={"tag-content p-chips-token-label su-" + schedulingUnit.status}>
{schedulingUnit.status}
</span>
</div>
</div>
{schedulingUnit.status === 'unschedulable' &&
<div className="group">
<label className="col-5">Unschedule Reason:</label>
<div className="col-5">{schedulingUnit.unschedulable_reason}</div>
</div>
}
</div>
{schedulingUnit.status === 'unschedulable' &&
<>
<div className="col-5"><label>Unschedule Reason:</label></div>
<div className="col-7">{schedulingUnit.unschedulable_reason}</div>
</>
}
{constraintsDoc &&
{constraintsDoc &&
<>
<>
<>
<div className="col-12 constraints-summary" style={{ top:"0px",position:"relative",}}>
<label>Constraints:</label>
{permissions.edit && (_.includes(_.split(process.env.REACT_APP_CONSTRAINT_EDITABLE_STATUS, ',' ), schedulingUnit.status)) ?
<i class="fa fa-pencil-alt" style={{ marginLeft:"5px",position:"absolute",top:"-3px",cursor:"pointer"}}
title = {'Edit Scheduling Constraint'}
{permissions.edit && (_.includes(_.split(process.env.REACT_APP_CONSTRAINT_EDITABLE_STATUS, ',' ), schedulingUnit.status)) ?
<i class="fa fa-pencil-alt" style={{ marginLeft:"5px",cursor:"pointer"}}
title = {'Edit Scheduling Constraint'}
onClick={()=> this.props.onCloseFn(true)}>
</i> :
<i class="fa fa-pencil-alt" style={{ marginLeft:"5px",position:"absolute",top:"-3px",color:"grey",cursor:"not-allowed"}}
title = {permissions.edit?`Constraints of scheduling unit with status ${schedulingUnit.status} cannot be edited`:
<i class="fa fa-pencil-alt" style={{ marginLeft:"5px",color:"grey",cursor:"not-allowed"}}
title = {permissions.edit?`Constraints of scheduling unit with status ${schedulingUnit.status} cannot be edited`:
`Don't have permission to edit constraints`}
onClick={()=> false }></i>
}
</div>
</div>
<div className="col-12">
<JsonToTable json={constraintsDoc} />
</div>
</>
</>
}
<div className="col-12"><label>Stations:</label></div>
<div className="col-12 station-list">
{this.props.stationGroup && this.props.stationGroup.map((station, index) => (
<div key={`stn-${index}`}>{station}</div>
))}
</div>
{this.props.missingStations && this.props.missingStations.length>0 &&
<>
<div className="col-12"><label>Missing Stations:</label></div>
}
<div className="station-information">
<div>
<div className="col-12"><label>Stations:</label></div>
<div className="col-12 station-list">
{this.props.missingStations && this.props.missingStations.map((station, index) => (
<div key={`mis-stn-${index}`}>{station}</div>
{this.props.stationGroup && this.props.stationGroup.map((station, index) => (
<div key={`stn-${index}`}>{station}</div>
))}
</div>
</div>
<div>
<div className="col-12"><label>Missing Stations:</label></div>
<div className="col-12 station-list">
<div>MOI</div>
</div>
{this.props.missingStations && this.props.missingStations.length>0 &&
<div className="col-12 station-list">
{this.props.missingStations && this.props.missingStations.map((station, index) => (
<div key={`mis-stn-${index}`}>{station}</div>
))}
</div>
}
</div>
</>
}
</div>
<div className="col-12 task-summary">
<label>Tasks:</label>
<ViewTable
data={suTaskList}
defaultcolumns={[{id: "ID", name: "Name", short_description: "Short Description" ,
typeValue:"Type", controlId: 'Control ID',
start_time:{name:"Start Time", format:UIConstants.CALENDAR_DATETIME_FORMAT},
stop_time:{name:"End Time", format:UIConstants.CALENDAR_DATETIME_FORMAT},
<ViewTable
data={suTaskList}
defaultcolumns={[{id: "ID", name: "Name", short_description: "Short Description" ,
typeValue:"Type", controlId: 'Control ID',
start_time:{name:"Start Time", format:UIConstants.CALENDAR_DATETIME_FORMAT},
stop_time:{name:"End Time", format:UIConstants.CALENDAR_DATETIME_FORMAT},
status: {name:"Status", showTag: true, tagClass: 'su-$dynamic$'}, unschedulable_reason: {name:"Unschedulable Reason"}, antenna_set: "Antenna Set", band: 'Band', obsolete: 'Obsolete'}]}
optionalcolumns={[{actionpath: "actionpath"}]}
columnclassname={[{"ID": "filter-input-50","Name":"filter-input-75","Type":"filter-input-75","Control ID":"filter-input-75", "Start Time": "filter-input-75", "End Time": "filter-input-75",
......@@ -428,72 +462,72 @@ export class SchedulingUnitSummary extends Component {
showColumnFilter={false}
allowColumnSelection={false}
/>
</div>
</div>
</div>
}
}
{/* model for Constraints start */}
<div className={`custom-dlg`}>
<Dialog inputId="edit_constraint"
maximizable maximized={false}
style={{ width: '80vw' }}
header="Scheduling Constraints - Edit"
<div className={`custom-dlg`}>
<Dialog inputId="edit_constraint"
maximizable maximized={false}
style={{ width: '80vw' }}
header="Scheduling Constraints - Edit"
visible={this.props.onClose || false}
onHide = {
() => {
if (this.state.editCheck < 3) {
this.setState({
editCheck:1
editCheck:1
},this.props.onCloseFn(false));
} else {
if (this.props.onSavedisable === false)
this.setState({
editCheck:1
}, this.props.cancelCheckstatus(true));
}
editCheck:1
}, this.props.cancelCheckstatus(true));
}
}
}
modal={true}
footer={
<div>
<div>
<Button key="submit" className="p-button-primary"
disabled={disableBtn}
disabled={disableBtn}
icon="pi pi-check" label="Save" onClick={() => {
this.props.onUpdate(this.props.schedulingUnit.id,this.state.updatedConstraintsValue)
this.props.onUpdate(this.props.schedulingUnit.id,this.state.updatedConstraintsValue)
this.setState({
editCheck:1
editCheck:1
});
}
}
/>
/>
<Button key="cancel" className="act-btn-cancel" icon="pi pi-times" label="Cancel" onClick={() => {
if (this.state.editCheck < 3) {
this.setState({
editCheck:1
editCheck:1
},this.props.onCloseFn(false));
} else {
if (this.props.onSavedisable === false)
this.setState({
editCheck:1
}, this.props.cancelCheckstatus(true));
}
}}
/>
editCheck:1
}, this.props.cancelCheckstatus(true));
}
}}
/>
</div>
}
>
>
<SchedulingConstraints
constraintTemplate={constraintsTemplate}
initValue={this.props.schedulingUnit.scheduling_constraints_doc}
callback={this.setConstraintsEditorOutput}
/>
callback={this.setConstraintsEditorOutput}
/>
</Dialog>
</div>
{/* moder for Constraints End */}
<CustomDialog type="confirmation" visible={this.props.cancelStatus} width="40vw"
header={'Edit Scheduling Constraints'} message={'Do you want to discard your changes? Your changes to the Constraints will not be saved.'}
content={''}
header={'Edit Scheduling Constraints'} message={'Do you want to discard your changes? Your changes to the Constraints will not be saved.'}
content={''}
onClose = {
() => {
if (this.state.editCheck < 3 && this.state.close === true) {
......@@ -511,7 +545,7 @@ export class SchedulingUnitSummary extends Component {
}
}
actions={ [ {id:"yes", title: 'Discard', callback: () =>{
actions={ [ {id:"yes", title: 'Discard', callback: () =>{
this.setState({
editCheck: 1,
close:true
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment