prometheus

1
import React, { Component, ChangeEvent } from 'react';
2
import { Modal, ModalBody, ModalHeader, Input } from 'reactstrap';
3
import { Fuzzy, FuzzyResult } from '@nexucis/fuzzy';
4

5
const fuz = new Fuzzy({ pre: '<strong>', post: '</strong>', shouldSort: true });
6

7
interface MetricsExplorerProps {
8
  show: boolean;
9
  updateShow(show: boolean): void;
10
  metrics: string[];
11
  insertAtCursor(value: string): void;
12
}
13

14
type MetricsExplorerState = {
15
  searchTerm: string;
16
};
17

18
class MetricsExplorer extends Component<MetricsExplorerProps, MetricsExplorerState> {
19
  constructor(props: MetricsExplorerProps) {
20
    super(props);
21
    this.state = { searchTerm: '' };
22
  }
23
  handleSearchTerm = (event: ChangeEvent<HTMLInputElement>): void => {
24
    this.setState({ searchTerm: event.target.value });
25
  };
26
  handleMetricClick = (query: string): void => {
27
    this.props.insertAtCursor(query);
28
    this.props.updateShow(false);
29
    this.setState({ searchTerm: '' });
30
  };
31

32
  toggle = (): void => {
33
    this.props.updateShow(!this.props.show);
34
  };
35
  render(): JSX.Element {
36
    return (
37
      <Modal isOpen={this.props.show} toggle={this.toggle} className="metrics-explorer" scrollable>
38
        <ModalHeader toggle={this.toggle}>Metrics Explorer</ModalHeader>
39
        <ModalBody>
40
          <Input placeholder="Search" value={this.state.searchTerm} type="text" onChange={this.handleSearchTerm} />
41
          {this.state.searchTerm.length > 0 &&
42
            fuz
43
              .filter(this.state.searchTerm, this.props.metrics)
44
              .map((result: FuzzyResult) => (
45
                <p
46
                  key={result.original}
47
                  className="metric"
48
                  onClick={this.handleMetricClick.bind(this, result.original)}
49
                  dangerouslySetInnerHTML={{ __html: result.rendered }}
50
                ></p>
51
              ))}
52
          {this.state.searchTerm.length === 0 &&
53
            this.props.metrics.map((metric) => (
54
              <p key={metric} className="metric" onClick={this.handleMetricClick.bind(this, metric)}>
55
                {metric}
56
              </p>
57
            ))}
58
        </ModalBody>
59
      </Modal>
60
    );
61
  }
62
}
63

64
export default MetricsExplorer;
65