diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
index 3d9c1e655a7a0ff9ff1993ea8a723e5bbd48ecf2..dc2f2b7dbd0495ec23b3a30705f487c381a391af 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
@@ -1883,7 +1883,7 @@ function ViewTable(props) {
<Table fetchData={fetchData} pageCount={pageCount} currentPage={currentPage} dataFetchStatus={loadingStatus} columns={columns}
data={data} defaultheader={defaultheader[0]} optionalheader={optionalheader[0]} showAction={props.showaction}
defaultSortColumn={defaultSortColumn} tablename={tablename} defaultpagesize={defaultpagesize} columnOrders={props.columnOrders}
- toggleBySorting={(sortData) => props.toggleBySorting(sortData)} onColumnToggle={props.onColumnToggle} lsKeySortColumn={props.lsKeySortColumn}
+ toggleBySorting={(sortData) => {if(props.toggleBySorting){props.toggleBySorting(sortData)}}} onColumnToggle={props.onColumnToggle} lsKeySortColumn={props.lsKeySortColumn}
descendingColumn={props.descendingColumn} ignoreSorting={props.ignoreSorting} setTableState={props.setTableState} />
</div>
)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
index 6c5c78d9ebd3f729e2ddc254fc93ced7e2762795..cab44def2fe830b39552340546375b3d59abb3bc 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
@@ -232,6 +232,9 @@ In Excel View the for Accordion background color override
align-items: center;
display: flex !important;
}
+.content_dlg .p-dialog-content {
+ align-items: start;
+}
.p-grid {
width: -webkit-fill-available;
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
index 26540f36b3c0238b9c8e55563adceb02cf1d97d8..79377f24f39a1d0ffd69452511bd59733628d982 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
@@ -1424,7 +1424,8 @@ class ViewSchedulingUnit extends Component {
{this.state.showStatusLogs &&
<Dialog header={`Status change logs - ${this.state.task ? this.state.task.name : ""}`}
visible={this.state.showStatusLogs} maximizable maximized={false} position="left" style={{ width: '50vw' }}
- onHide={() => { this.setState({ showStatusLogs: false }) }}>
+ onHide={() => { this.setState({ showStatusLogs: false }) }}
+ className="content_dlg">
<TaskStatusLogs taskId={this.state.task.id}></TaskStatusLogs>
</Dialog>
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
index 598c892fe255b4c5fb52f0a9469b0925cca93c5f..97edcf21f6b5d7727efa13f40087f5edfdc7fede 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
@@ -755,7 +755,8 @@ export class TaskList extends Component {
{this.state.showStatusLogs &&
<Dialog header={`Status change logs - ${this.state.task ? this.state.task.name : ""}`}
visible={this.state.showStatusLogs} maximizable maximized={false} position="left" style={{ width: '50vw' }}
- onHide={() => { this.setState({ showStatusLogs: false }) }}>
+ onHide={() => { this.setState({ showStatusLogs: false }) }}
+ className="content_dlg">
<TaskStatusLogs taskId={this.state.task.id}></TaskStatusLogs>
</Dialog>
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/state_logs.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/state_logs.js
index bd33d13b192c7efd087bf6580d4bfbd511ced14a..858d439be2a6410f5dc9908062b716166f92f30b 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/state_logs.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/state_logs.js
@@ -3,6 +3,9 @@ import _ from 'lodash';
import TaskService from '../../services/task.service';
import ViewTable from '../../components/ViewTable';
import AppLoader from '../../layout/components/AppLoader';
+import { Button } from 'primereact/button';
+import UtilService from '../../services/util.service';
+import UIConstants from '../../utils/ui.constants';
/**
* Component that list down the status change logs of subtasks
@@ -11,39 +14,93 @@ export class TaskStatusLogs extends Component {
constructor(props) {
super(props);
+ this.getStoreAttributes();
this.state = {
isLoading: true,
- logs: []
+ logs: [],
+ showLatest: this.taskListAttribute["showLatestLogs"] || false,
+ defaultSortColumn: [this.taskListAttribute["statusLogSorting"] || {id: 'Updated At', desc: true}]
}
+ this.setShowLatest = this.setShowLatest.bind(this);
}
async componentDidMount() {
let logs = await TaskService.getTaskStatusLogs(this.props.taskId);
- logs = _.sortBy(logs, ['subtask_id', 'updated_at']);
+ // logs = _.sortBy(logs, ['subtask_id', 'updated_at']);
this.setState({logs: logs, isLoading: false});
}
+ /**
+ * Function to show latest or all logs and store the option selected for rendering the same when opened again.
+ */
+ setShowLatest() {
+ let showLatest = !this.state.showLatest
+ this.taskListAttribute['showLatestLogs'] = showLatest;
+ this.setState({showLatest: showLatest});
+ this.setStoreAttributes();
+ }
+
+ /**
+ * Callback function passed to ViewTable component. This function is called from the ViewTable component
+ * when sorting on a column and the sorting option is stored in the local storage.
+ * @param {Object} sortData
+ */
+ toggleBySorting(sortData) {
+ this.taskListAttribute["statusLogSorting"] = sortData;
+ this.setStoreAttributes();
+ }
+
+ /**
+ * Function to retrieve the stored attributes for this component.
+ */
+ getStoreAttributes() {
+ this.taskListAttribute = UtilService.localStore({ type: 'get', key: "TASK_LIST_UI_ATTR" }) || {};
+ }
+
+ /**
+ * Function to store the attributes of the component to use on re-initialization
+ */
+ setStoreAttributes() {
+ UtilService.localStore({ type: 'set', key: 'TASK_LIST_UI_ATTR', value: this.taskListAttribute });
+ }
+
render() {
+ let logs = _.sortBy(this.state.logs, ['subtask_id', 'updated_at']);
+ if (this.state.showLatest) {
+ logs = _(logs).orderBy(['subtask_id', 'updated_at'], ['asc', 'desc']).uniqBy('subtask_id').value();
+ }
return(
<React.Fragment>
{ this.state.isLoading? <AppLoader /> :
- <ViewTable
- data={this.state.logs}
- defaultcolumns={[{subtask_id: "Subtask Id", subtask_type: "Type", updated_at: "Updated At",
- old_state_value: "From State", new_state_value: "To State", user: 'User'}]}
- optionalcolumns={[{}]}
- columnclassname={[{"Subtask Id": "filter-input-75", "Type": "filter-input-75",
- "Updated At": "filter-input-75", "From State": "filter-input-75",
- "To State": "filter-input-75", "User": "filter-input-75"}]}
- defaultSortColumn={[{}]}
- showaction="false"
- keyaccessor="id"
- paths={this.state.paths}
- defaultpagesize={this.state.logs.length}
- showTopTotal={false}
- showGlobalFilter={false}
- allowColumnSelection={false}
- />
+ <div className="p-grid">
+ <div className="col-lg-12" style={{zIndex:"1"}}>
+ <Button className="dialog-btn" label={this.state.showLatest?"Show All":"Show Latest Only"}
+ style={{width:"150px"}}
+ // icon={`pi ${this.state.showLatest?"pi-angle-left":"pi-angle-right"}`}
+ // iconPos={`${this.state.showLatest?"left":"right"}`}
+ onClick={(e) => this.setShowLatest()} />
+ </div>
+ <div className="col-lg-12" style={{marginTop:"-30px", zIndex:"0"}}>
+ <ViewTable
+ data={logs}
+ defaultcolumns={[{subtask_id: "Subtask Id", subtask_type: "Type",
+ updated_at: {name:"Updated At", format:UIConstants.CALENDAR_DATETIME_FORMAT},
+ old_state_value: "From State", new_state_value: "To State", user: 'User'}]}
+ optionalcolumns={[{}]}
+ columnclassname={[{"Subtask Id": "filter-input-75", "Type": "filter-input-75",
+ "Updated At": "filter-input-75", "From State": "filter-input-75",
+ "To State": "filter-input-75", "User": "filter-input-75"}]}
+ defaultSortColumn={this.state.defaultSortColumn}
+ toggleBySorting={(sortData) => {this.toggleBySorting(sortData)}}
+ showAction="false"
+ keyaccessor="id"
+ paths={this.state.paths}
+ showTopTotal={false}
+ showGlobalFilter={false}
+ allowColumnSelection={false}
+ />
+ </div>
+ </div>
}
</React.Fragment>
);
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js
index 63498d225bfb465f7d834aebfede6632e7f1aa4b..63feffcab4f5de7107272f7089105e7d4cc27bbb 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js
@@ -372,7 +372,8 @@ export class TaskView extends Component {
<div className="col-lg-4 col-md-4 col-sm-12">
<button className="p-link" onMouseOver={(e) => { this.setState({showStatusLogs: true})}}><i className="fa fa-history"></i></button>
<Dialog header="State change logs" visible={this.state.showStatusLogs} maximizable position="right" style={{ width: '50vw' }}
- onHide={() => {this.setState({showStatusLogs: false})}}>
+ onHide={() => {this.setState({showStatusLogs: false})}}
+ maximized={false} className="content_dlg">
<TaskStatusLogs taskId={this.state.taskId}></TaskStatusLogs>
</Dialog>
</div>