import * as React from 'react' ; import './LogContent.css' ; import { Settings } from '../common-interfaces' ; declare var $ ; declare var moment ; const DATERANGEPICKER_DOM_ID = 'daterange-picker' ; const DOWNLOADBUTTON_DOM_ID = 'download-button' ; export interface Props { settings : Settings ; logGroupName ? : string ; logStreamName ? : string ; startDate : Date ; endDate : Date ; logText : string ; SetDateRange : ( startDate : Date , endDate : Date ) => void ; DownloadLogs : ( settings : Settings , logGroupName : string , logStreamName : string , startDate : Date , endDate : Date ) => void ; } class LogContent extends React . Component < Props > { constructor ( props ) { super ( props ) ; } componentDidMount ( ) { let start = this . props . startDate ; let end = this . props . endDate ; let SetDateRange = this . props . SetDateRange ; $ ( '#' + DATERANGEPICKER_DOM_ID ) . dateRangePicker ( { startOfWeek : 'monday' , separator : ' ~ ' , format : 'YYYY/MM/DD HH:mm (Z)' , autoClose : false , time : { enabled : true , } , defaultTime : start , defaultEndTime : end , getValue : function ( ) { return this . innerHTML ; } , setValue : function ( range , startDate , endDate ) { this . innerHTML = range ; SetDateRange ( new Date ( startDate ) , new Date ( endDate ) ) ; } , } ) ; $ ( '#' + DATERANGEPICKER_DOM_ID ) . data ( 'dateRangePicker' ) . setDateRange ( moment ( start ) . format ( 'YYYY/MM/DD HH:mm (Z)' ) , moment ( end ) . format ( 'YYYY/MM/DD HH:mm (Z)' ) ) ; } render ( ) { return ( < div className = "LogContent" > < p id = { DATERANGEPICKER_DOM_ID } > dummy text < /p> < div className = "clearfix" > { downloadButton ( this . props ) } < /div> { } < span > < strong > Latest Messages < /strong></span > < pre className = "log-text" > { `${ this . props . logText }` } < /pre> < /div>); } } function downloadButton ( props ) { const { settings , logGroupName , logStreamName , startDate , endDate , DownloadLogs } = props ; if ( ! logGroupName || ! logStreamName ) { return < button type = "button" id = { DOWNLOADBUTTON_DOM_ID } className = "btn btn-negative" disabled = { true } > Download Logs < /button>; } let onClick = ( ) => DownloadLogs ( settings , logGroupName , logStreamName , startDate , endDate ) ; return < button type = "button" id = { DOWNLOADBUTTON_DOM_ID } className = "btn btn-primary" onClick = { onClick } > Download Logs < /button>; } export default LogContent ;