crono_trigger 0.3.2 → 0.3.4

data/web/app/src/SchedulableRecordTableCell.tsx

@@ -0,0 +1,19 @@
+import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+import TableCell from '@material-ui/core/TableCell';
+import * as React from 'react';
+
+const styles = createStyles({
+  property: {
+    padding: "4px 16px 4px 8px"
+  }
+});
+
+interface ITableCellProps extends WithStyles<typeof styles> {
+  children: string | number | null | React.ReactNode | React.ReactNode[],
+}
+
+const SchedulableRecordTableCell = withStyles(styles)((props: ITableCellProps) => (
+  <TableCell className={props.classes.property}>{props.children}</TableCell>
+));
+
+export default SchedulableRecordTableCell;

data/web/app/src/SchedulableRecords.tsx

@@ -0,0 +1,110 @@
+import FormControl from '@material-ui/core/FormControl';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import TextField from '@material-ui/core/TextField';
+import { debounce } from 'lodash';
+import * as React from 'react';
+
+import { IGlobalWindow, ISchedulableRecordsProps, ISchedulableRecordsStates } from './interfaces';
+import SchedulableRecord from './SchedulableRecord';
+import SchedulableRecordTableCell from './SchedulableRecordTableCell';
+
+declare var window: IGlobalWindow;
+
+class SchedulableRecords extends React.Component<ISchedulableRecordsProps, ISchedulableRecordsStates> {
+  private fetchLoop: any;
+
+  private handleTimeRangeFilterChange = debounce((event: any) => {
+    this.setState({timeRangeMinute: parseInt(event.target.value, 10)});
+    this.fetchSchedulableRecord();
+  }, 500)
+
+  constructor(props: ISchedulableRecordsProps) {
+    super(props);
+
+    this.state = {records: [], timeRangeMinute: 10};
+  }
+
+  public componentDidMount() {
+    this.fetchSchedulableRecord();
+    this.setFetchSchedulableRecordLoop();
+  }
+
+  public componentWillUnmount() {
+    if (this.fetchLoop) {
+      clearTimeout(this.fetchLoop);
+    }
+  }
+
+  public setFetchSchedulableRecordLoop(): void {
+    this.fetchLoop = setTimeout(() => {
+      this.fetchSchedulableRecord();
+      this.setFetchSchedulableRecordLoop();
+    }, 3000);
+  }
+
+  public fetchSchedulableRecord(): void {
+    const that = this;
+    fetch(`${window.mountPath}/models/${this.props.model_name}.json?after=${this.state.timeRangeMinute}`)
+      .then((res) => res.json())
+      .then((data) => {
+        that.setState(data);
+      }).catch((err) => {
+        console.error(err);
+      });
+  }
+
+  public render() {
+    return (
+      <div id="schedulable-models">
+        <FormControl className="filter-form">
+          <TextField
+            id="time-range-input"
+            label="Time Range"
+            type="number"
+            defaultValue={this.state.timeRangeMinute}
+            helperText="minute after"
+            margin="normal"
+            onChange={this.wrappedHandleTimeRangeFilterChange}
+          />
+        </FormControl>
+        <Paper className="models-container" style={{marginTop: "8px"}}>
+          <Table className="models">
+            <TableHead>
+              <TableRow>
+                <SchedulableRecordTableCell>Status</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>ID</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Cron</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Next Execute At</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Delay Sec</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Execute Lock</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Time To Unlock</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Last Executed At</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Locked By</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Last Error Time</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Retry Count</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Detail</SchedulableRecordTableCell>
+                <SchedulableRecordTableCell>Ops</SchedulableRecordTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {this.state.records.map((record) => (
+                <SchedulableRecord key={record.id} model_name={this.props.model_name} record={record} />
+              ))}
+            </TableBody>
+          </Table>
+        </Paper>
+      </div>
+    )
+  }
+
+  private wrappedHandleTimeRangeFilterChange = (event: any) => {
+    event.persist();
+    this.handleTimeRangeFilterChange(event);
+  }
+}
+
+export default SchedulableRecords;

data/web/app/src/Signal.tsx

@@ -0,0 +1,21 @@
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import * as React from 'react';
+
+import { ISignalProps } from './interfaces';
+
+class Signal extends React.Component<ISignalProps, any> {
+  public render() {
+    const signal = this.props.signal;
+    return (
+      <TableRow>
+        <TableCell>{signal.worker_id}</TableCell>
+        <TableCell>{signal.signal}</TableCell>
+        <TableCell>{signal.sent_at}</TableCell>
+        <TableCell>{signal.received_at}</TableCell>
+      </TableRow>
+    )
+  }
+}
+
+export default Signal;

data/web/app/src/Signals.tsx

@@ -0,0 +1,74 @@
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import * as React from 'react';
+
+import { IGlobalWindow, ISignalsState } from './interfaces';
+import Signal from './Signal';
+
+declare var window: IGlobalWindow;
+
+class Signals extends React.Component<any, ISignalsState> {
+  private fetchLoop: any;
+
+  constructor(props: any) {
+    super(props)
+    this.state = {records: []}
+  }
+
+  public componentDidMount() {
+    this.fetchSignals();
+    this.setFetchSignalLoop();
+  }
+
+  public componentWillUnmount() {
+    if (this.fetchLoop) {
+      clearTimeout(this.fetchLoop);
+    }
+  }
+
+  public setFetchSignalLoop(): void {
+    this.fetchLoop = setTimeout(() => {
+      this.fetchSignals();
+      this.setFetchSignalLoop();
+    }, 3000);
+  }
+
+  public fetchSignals(): void {
+    const that = this;
+    fetch(`${window.mountPath}/signals.json`)
+      .then((res) => res.json())
+      .then((data) => {
+        that.setState(data);
+      }).catch((err) => {
+        console.error(err);
+      });
+  }
+
+  public render() {
+    return (
+      <Paper className="signals-container">
+        <Table className="signals">
+          <TableHead>
+            <TableRow>
+              <TableCell>Worker ID</TableCell>
+              <TableCell>Signal</TableCell>
+              <TableCell>Sent At</TableCell>
+              <TableCell>Received At</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {this.state.records.map((record) => {
+              return <Signal key={`${record.worker_id}-${record.sent_at}`} signal={record} />
+            })}
+          </TableBody>
+        </Table>
+      </Paper>
+    )
+  }
+}
+
+export default Signals;

data/web/app/src/Worker.tsx

@@ -0,0 +1,106 @@
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import * as React from 'react';
+
+import { IGlobalWindow, IWorkerProps } from "./interfaces";
+
+declare var window: IGlobalWindow;
+
+class Worker extends React.Component<IWorkerProps, any> {
+  constructor(props: IWorkerProps) {
+    super(props)
+    this.handleQuietClick = this.handleQuietClick.bind(this)
+    this.handleStopClick = this.handleStopClick.bind(this)
+    this.handleNotificationClose = this.handleNotificationClose.bind(this)
+    this.state = {
+      notificationMessage: <span />,
+      notificationOpen: false,
+    }
+  }
+
+  public render() {
+    const worker = this.props.worker;
+    return (
+      <TableRow>
+        <TableCell>{worker.worker_id}</TableCell>
+        <TableCell numeric={true}>{worker.max_thread_size}</TableCell>
+        <TableCell numeric={true}>{worker.current_queue_size}</TableCell>
+        <TableCell numeric={true}>{worker.current_executing_size}</TableCell>
+        <TableCell>{worker.executor_status}</TableCell>
+        <TableCell>{worker.polling_model_names}</TableCell>
+        <TableCell>{worker.last_heartbeated_at}</TableCell>
+        <TableCell>
+          <Button variant="contained" style={{"marginRight": "8px"}} onClick={this.handleQuietClick}>Quiet</Button>
+          <Button variant="contained" color="secondary" onClick={this.handleStopClick}>Stop</Button>
+          <Snackbar
+            anchorOrigin={{vertical: "bottom", horizontal: "right"}}
+            open={this.state.notificationOpen}
+            autoHideDuration={3000}
+            onClose={this.handleNotificationClose}
+            message={this.state.notificationMessage}
+          />
+        </TableCell>
+
+      </TableRow>
+    )
+  }
+
+  private handleQuietClick(event: any) {
+    const worker = this.props.worker;
+    fetch(`${window.mountPath}/signals`, {
+      body: JSON.stringify({"worker_id": worker.worker_id, "signal": "TSTP"}),
+      headers: {"content-type": "application/json"},
+      method: "POST"
+    }).then(this.handleResponseStatus).then((res) => {
+      this.setState({
+        notificationMessage: <span>Quiet {worker.worker_id}</span>,
+        notificationOpen: true,
+      })
+    }).catch((err) => {
+      this.setState({
+        notificationMessage: <span>Failed to Quiet ({err.message})</span>,
+        notificationOpen: true,
+      })
+    })
+  }
+
+  private handleStopClick(event: any) {
+    const worker = this.props.worker;
+    fetch(`${window.mountPath}/signals`, {
+      body: JSON.stringify({"worker_id": worker.worker_id, "signal": "TERM"}),
+      headers: {"content-type": "application/json"},
+      method: "POST"
+    }).then(this.handleResponseStatus).then((res) => {
+      this.setState({
+        notificationMessage: <span>Stop {worker.worker_id}</span>,
+        notificationOpen: true,
+      })
+    }).catch((err) => {
+      this.setState({
+        notificationMessage: <span>Failed to Stop ({err.message})</span>,
+        notificationOpen: true,
+      })
+    })
+  }
+
+  private handleResponseStatus(res: Response): Promise<Response | Error> {
+    if (!res.ok) {
+      return res.json().then((data: any) => {
+        throw new Error(data.error);
+      })
+    } else {
+      return Promise.resolve(res);
+    }
+  }
+
+  private handleNotificationClose(ev: any, reason: any) {
+    this.setState({
+      ...this.state,
+      notificationOpen: false,
+    })
+  }
+}
+
+export default Worker;

data/web/app/src/Workers.tsx

@@ -0,0 +1,78 @@
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import * as React from 'react';
+
+import { IGlobalWindow, IWorkersState } from "./interfaces";
+import Worker from "./Worker";
+
+declare var window: IGlobalWindow;
+
+class Workers extends React.Component<any, IWorkersState> {
+  private fetchLoop: any;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {records: []};
+  }
+
+  public componentDidMount() {
+    this.fetchWorkers();
+    this.setFetchWorkerLoop();
+  }
+
+  public componentWillUnmount() {
+    if (this.fetchLoop) {
+      clearTimeout(this.fetchLoop);
+    }
+  }
+
+  public setFetchWorkerLoop(): void {
+    this.fetchLoop = setTimeout(() => {
+      this.fetchWorkers();
+      this.setFetchWorkerLoop();
+    }, 3000);
+  }
+
+  public fetchWorkers(): void {
+    const that = this;
+    fetch(`${window.mountPath}/workers.json`)
+      .then((res) => res.json())
+      .then((data) => {
+        that.setState(data);
+      }).catch((err) => {
+        console.error(err);
+      });
+  }
+
+  public render() {
+    return (
+      <Paper className="workers-container">
+        <Table className="workers">
+          <TableHead>
+            <TableRow>
+              <TableCell>Worker ID</TableCell>
+              <TableCell numeric={true}>Thread</TableCell>
+              <TableCell numeric={true}>Internal Queue</TableCell>
+              <TableCell numeric={true}>Executing</TableCell>
+              <TableCell>Status</TableCell>
+              <TableCell>Polling Models</TableCell>
+              <TableCell>Last Heatbeated At</TableCell>
+              <TableCell>&nbsp;</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {this.state.records.map((record) => {
+              return <Worker key={record.worker_id} worker={record} />
+            })}
+          </TableBody>
+        </Table>
+      </Paper>
+    )
+  }
+}
+
+export default Workers;

data/web/app/src/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

data/web/app/src/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from "react-router-dom";
+import App from './App';
+import './index.css';
+import { IGlobalWindow } from './interfaces';
+
+declare var window: IGlobalWindow
+
+ReactDOM.render(
+  <Router basename={window.mountPath || "/"}>
+    <App />
+  </Router>
+  , document.getElementById('root') as HTMLElement
+);

data/web/app/src/interfaces.ts

@@ -0,0 +1,77 @@
+interface IGlobalWindow {
+  mountPath: string
+}
+
+interface IWorkerRecord {
+  worker_id: string,
+  max_thread_size: number,
+  current_queue_size: number,
+  current_executing_size: number,
+  polling_model_names: string[],
+  executor_status: string,
+  last_heartbeated_at: string,
+}
+interface IWorkersState {
+  records: IWorkerRecord[]
+}
+interface IWorkerProps {
+  worker: IWorkerRecord
+}
+
+interface ISignalRecord {
+  worker_id: string,
+  signal: string,
+  sent_at: string,
+  received_at: string,
+}
+interface ISignalsState {
+  records: ISignalRecord[]
+}
+interface ISignalProps {
+  signal: ISignalRecord
+}
+
+interface ISchedulableRecord {
+  crono_trigger_status: string,
+  id: number,
+  cron: string | null,
+  next_execute_at: string | null,
+  last_executed_at: string | null,
+  timezone: string | null,
+  execute_lock: number,
+  locked_by: string | null,
+  started_at: string,
+  finished_at: string,
+  last_error_name: string,
+  last_error_reason: string,
+  last_error_time: string,
+  retry_count: number,
+  time_to_unlock: number,
+  delay_sec: number,
+}
+interface ISchedulableRecordsProps {
+  model_name: string
+}
+interface ISchedulableRecordsStates {
+  records: ISchedulableRecord[],
+  timeRangeMinute: number,
+}
+
+interface ISchedulableRecordProps {
+  model_name: string,
+  record: ISchedulableRecord
+}
+
+export {
+  IGlobalWindow,
+  IWorkerRecord,
+  IWorkersState,
+  IWorkerProps,
+  ISignalRecord,
+  ISignalsState,
+  ISignalProps,
+  ISchedulableRecord,
+  ISchedulableRecordsProps,
+  ISchedulableRecordsStates,
+  ISchedulableRecordProps
+}