|
| 1 | +import React, { useState, useEffect } from 'react'; |
| 2 | +import Container from 'react-bootstrap/Container'; |
| 3 | +import Row from 'react-bootstrap/Row'; |
| 4 | +import Col from 'react-bootstrap/Col'; |
| 5 | +import Stack from 'react-bootstrap/Stack'; |
| 6 | +import Form from 'react-bootstrap/Form'; |
| 7 | +import SyntaxHighlighter from 'react-syntax-highlighter'; |
| 8 | +import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'; |
| 9 | +import { compareVersions } from 'compare-versions'; |
| 10 | +import { convertRequests, loadSchema, listFormats } from "@elastic/request-converter"; |
| 11 | + |
| 12 | +function App() { |
| 13 | + const formats = listFormats().sort(); |
| 14 | + const [versions, setVersions] = useState<string[]>(['main']); |
| 15 | + const [schemaVersion, setSchemaVersion] = useState<string>('main'); |
| 16 | + const [hasSchema, setHasSchema] = useState<boolean>(false); |
| 17 | + const [source, setSource] = useState<string>('GET /_search'); |
| 18 | + const [error, setError] = useState<string | null>(null); |
| 19 | + const [code, setCode] = useState<string>('Loading...'); |
| 20 | + const [language, setLanguage] = useState<string>(formats[0]); |
| 21 | + |
| 22 | + useEffect(() => { |
| 23 | + const sourceElem = document.getElementById("source"); |
| 24 | + if (sourceElem) { |
| 25 | + sourceElem.focus(); |
| 26 | + } |
| 27 | + }, []); |
| 28 | + |
| 29 | + useEffect(() => { |
| 30 | + void (async () => { |
| 31 | + const r = await fetch('https://api.github.com/repos/elastic/elasticsearch-specification/branches'); |
| 32 | + if (r.status === 200) { |
| 33 | + const s: {name: string}[] = (await r.json()) as {name: string}[]; |
| 34 | + const versions = s.map(v => v.name).filter(v => v.match(/^[0-9]+\.[0-9x]+$/)); |
| 35 | + setVersions(['main'].concat(versions.sort(compareVersions).reverse())); |
| 36 | + } |
| 37 | + })(); |
| 38 | + }, []); |
| 39 | + |
| 40 | + useEffect(() => { |
| 41 | + void (async () => { |
| 42 | + const response = await fetch(`https://raw.githubusercontent.com/elastic/elasticsearch-specification/refs/heads/${schemaVersion}/output/schema/schema.json`); |
| 43 | + if (response.ok) { |
| 44 | + setHasSchema(false); |
| 45 | + await loadSchema((await response.json()) as object); |
| 46 | + setHasSchema(true); |
| 47 | + } |
| 48 | + })(); |
| 49 | + }, [schemaVersion]); |
| 50 | + |
| 51 | + useEffect(() => { |
| 52 | + void (async () => { |
| 53 | + if (hasSchema) { |
| 54 | + let c: string = ""; |
| 55 | + try { |
| 56 | + c = await convertRequests(source, language, {complete: true, printResponse: true}) as string; |
| 57 | + setError(null); |
| 58 | + } |
| 59 | + catch (err) { |
| 60 | + if (err instanceof Error) { |
| 61 | + setError(err.toString()); |
| 62 | + } |
| 63 | + else { |
| 64 | + setError('Uknown error'); |
| 65 | + } |
| 66 | + } |
| 67 | + if (c) { |
| 68 | + setCode(c); |
| 69 | + } |
| 70 | + } |
| 71 | + })(); |
| 72 | + }, [hasSchema, source, language]); |
| 73 | + |
| 74 | + const onRequestChanged = (ev: React.ChangeEvent<HTMLSelectElement>) => { |
| 75 | + setSource(ev.target.value); |
| 76 | + ev.target.style.height = ev.target.scrollHeight + "px"; |
| 77 | + }; |
| 78 | + |
| 79 | + return ( |
| 80 | + <Container id="main-container"> |
| 81 | + <h1>Elasticsearch Request Converter Demo</h1> |
| 82 | + <p>→ <a href="./docs/index.html">Library documentation</a></p> |
| 83 | + <Row> |
| 84 | + <Col className="col-6"> |
| 85 | + <Stack direction="horizontal" className="heading"> |
| 86 | + <p>Source Request</p> |
| 87 | + <p className="spacer"></p> |
| 88 | + <Form.Select id="version-choice" size="sm" defaultValue="main" onChange={ev => setSchemaVersion(ev.target.value)}> |
| 89 | + {versions.map(v => <option key={v} value={v}>{v}</option>)} |
| 90 | + </Form.Select> |
| 91 | + </Stack> |
| 92 | + </Col> |
| 93 | + <Col className="col-6"> |
| 94 | + <Stack direction="horizontal" className="heading"> |
| 95 | + <p>Converted Code</p> |
| 96 | + <p className="spacer"></p> |
| 97 | + <Form.Select id="language-choice" size="sm" defaultValue={language} onChange={ev => setLanguage(ev.target.value)}> |
| 98 | + {formats.map(fmt => <option key={fmt} value={fmt}>{fmt}</option>)} |
| 99 | + </Form.Select> |
| 100 | + </Stack> |
| 101 | + </Col> |
| 102 | + </Row> |
| 103 | + <Form id="main-form"> |
| 104 | + <Row id="main-row"> |
| 105 | + <Col className="col-6"> |
| 106 | + <Form.Control className={error ? "is-invalid" : ""} as="textarea" id="source" value={source} onChange={(ev: any) => onRequestChanged(ev)} /> |
| 107 | + {error && <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>} |
| 108 | + </Col> |
| 109 | + <Col className="col-6"> |
| 110 | + <SyntaxHighlighter wrapLongLines={true} language={language} style={atomOneLight}>{code}</SyntaxHighlighter> |
| 111 | + </Col> |
| 112 | + </Row> |
| 113 | + </Form> |
| 114 | + </Container> |
| 115 | + ) |
| 116 | +} |
| 117 | + |
| 118 | +export default App |
0 commit comments