Merge pull request #42 from tzachshabtay/time_search

Time search

README.md

@@ -14,6 +14,7 @@ Web UI to browse [kafka](https://kafka.apache.org/) and [schema registry](https:
 - Support for avro auto-detecting and decoding (via the schema registry). Different subject messages in a topic are supported as well (and as you filter for a specific event type it auto-hides all of the irrelevant columns belonging to the other messages).
 - The raw view shows the data in json format, and allows easy copying to clipboard
 - Server-side search for messages and the ability to search multiple topics at once
+- Filter messages via time range (or offsets)
 - Light and dark themes
 
 ## Images

package.json

@@ -43,12 +43,12 @@
  "ejs": "^2.7.4",
  "express": "^4.17.1",
  "kafka-avro": "^3.2.0",
- "kafkajs": "^1.14.0",
+ "kafkajs": "^1.15.0",
  "long": "^4.0.0",
  "qs": "^6.9.4",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
- "react-json-view": "^1.19.1",
+ "react-json-view": "^1.21.1",
  "react-router-dom": "^5.2.0",
  "uuid": "^8.1.0"
  }

src/client/common/card_view.tsx

@@ -7,7 +7,7 @@ export interface CardViewProps {
  searchQuery: string;
 }
 
-export const CardView: React.SFC<CardViewProps> = (props) => {
+export const CardView: React.FunctionComponent<CardViewProps> = (props) => {
  let raw = props.raw
  if (props.searchQuery) {
  raw = filterJson(props.raw, props.searchQuery)

src/client/common/cell_button.tsx

@@ -11,7 +11,7 @@ export interface CellButtonProps extends CellProps {
  getUrl: () => string;
 }
 
-export const CellButton: React.SFC<CellButtonProps> = (props) => {
+export const CellButton: React.FunctionComponent<CellButtonProps> = (props) => {
  let msg = "Loading"
  if (props.value || props.value === 0) {
  msg = props.value.toString()

src/client/common/data_view.tsx

@@ -41,7 +41,7 @@ function TabPanel(props: TabPanelProps) {
  );
 }
 
-export const DataView: React.SFC<DataViewProps> = (props) => {
+export const DataView: React.FunctionComponent<DataViewProps> = (props) => {
  const showRaw = props.url.Get(`raw`) === `true`
  const firstTab = showRaw ? 1 : 0;
  const [tab, setTab] = useState(firstTab)

src/client/common/error_msg.tsx

@@ -6,7 +6,7 @@ interface ErrorProps {
  error: any
 }
 
-export const ErrorMsg: React.SFC<ErrorProps> = (props) => {
+export const ErrorMsg: React.FunctionComponent<ErrorProps> = (props) => {
  if (!props.error) {
  return null
  }

src/client/common/grid.tsx

@@ -16,7 +16,7 @@ export interface GridProps {
  onFilterChanged?(event: FilterChangedEvent): void;
 }
 
-export const Grid: React.SFC<GridProps> = (props) => {
+export const Grid: React.FunctionComponent<GridProps> = (props) => {
  let rows = props.rows
  if (props.searchQuery) {
  rows = rows.filter(props.search)

src/client/common/toolbar.tsx

@@ -75,7 +75,7 @@ const useStyles = makeStyles((theme) => ({
  },
 }));
 
-const ThemeToggle: React.SFC = () => {
+const ThemeToggle: React.FunctionComponent = () => {
  const {theme, saveTheme} = useTheme()
 
  const handleTheme = (event: React.MouseEvent<HTMLElement>, newTheme: string) => {
@@ -110,7 +110,7 @@ interface Props {
  url: Url;
 }
 
-export const KafkaToolbar: React.SFC<Props> = (props) => {
+export const KafkaToolbar: React.FunctionComponent<Props> = (props) => {
  const classes = useStyles();
  const [anchorElement, setAnchorElement] = React.useState(null);
 

src/client/common/url.ts

@@ -1,6 +1,6 @@
 import qs = require('qs');
 
-export type UrlProperty = `raw` | `search` | `offset` | `limit` | `searchFrom` | `topics`
+export type UrlProperty = `raw` | `search` | `offset` | `limit` | `searchFrom` | `topics` | `from_time` | `to_time`
 
 export class Url {
  obj: qs.ParsedQs

src/client/kafka/messages/go_button.tsx

@@ -8,7 +8,7 @@ interface Props {
  onClick: () => void;
 }
 
-export const GoButton: React.SFC<Props> = (props) => {
+export const GoButton: React.FunctionComponent<Props> = (props) => {
  return (
  <div>
  <Button color="primary" variant="contained" style={{ marginTop: 18 }} disabled={props.isRunning}

src/client/kafka/messages/messages.tsx

@@ -214,6 +214,8 @@ export class Messages extends React.Component<Props, State> {
  search={this.state.search}
  offset={this.url.Get(`offset`)}
  limit={this.url.Get(`limit`)}
+ fromTime={this.url.Get(`from_time`)}
+ toTime={this.url.Get(`to_time`)}
  onDataFetched={this.onDataFetched}
  onDataFetchStarted={this.onDataFetchStarted}>
  </SingleTopicInput>