/*
 * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License").
 * You may not use this file except in compliance with the License.
 * A copy of the License is located at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * or in the "license" file accompanying this file. This file is distributed
 * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
 * express or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

import React, { FunctionComponent } from 'react';

export const HelpMessage: FunctionComponent = () => (
  <div className="gf-form grafana-info-box">
    <div>
      <h5>Table</h5>
      <ul>
        <li>return any set of columns</li>
      </ul>
      <br />
      <h5>Logs</h5>
      <ul>
        <li>return any set of columns</li>
      </ul>
      <br />
      <h5>Time series</h5>
      <ul>
        <li>return column as date, datetime, or timestamp</li>
        <li>return column with numeric datatype as values</li>
      </ul>
      <br />
      Example PPL query for time series:
      <br />
      <code>source=&lt;index&gt; | eval dateValue=timestamp(timestamp) | stats count(response) by dateValue</code>
    </div>
  </div>
);
