通用自定义页面开发案例

import React, { useEffect, useState } from "react";
import {
  LoginManager,
  ELoginType,
  SearchManager,
  EEventName,
} from "@qn-pandora/app-sdk";
import { Table } from "@qn-pandora/pandora-component";
import "./App.css";
import "@qn-pandora/pandora-component/lib/index.css";

function Search() {
  const [dataset, setDataset] = useState({
    fields: [] as Array<{ name: string }>,
    rows: [] as Array<Array<any>>,
  });

  useEffect(() => {
    mainEffect();
  }, []);

  async function mainEffect() {
    // 从Pandora平台搜索数据
    const searchCondition = {
      queryString: `
        repo="app_doc" 
        | fields _time, request.url, request.method, response.statusName, action.name 
        | limit 10
      `, // 搜索条件
      time: {
        start: 0, // 起始时间
        end: 1597588690623, // 结束时间
      },
    };
    const option = {
      task: {
        event: true,
        summary: false,
        timeline: false,
        result: true,
      },
    };
    const searchManager = new SearchManager({
      option: option,
    });
    searchManager.on(EEventName.DONE, ({ result }) => {
      setDataset(result);
    });
    searchManager.search(searchCondition);
  }

  const columns = dataset.fields.map((field) => ({
    title: field.name,
    dataIndex: field.name,
    key: field.name,
    width: 120,
  }));
  const dataSource = dataset.rows.map((row) => {
    const item: { [key: string]: string } = {};
    row.forEach((ele, i) => {
      item[dataset.fields[i].name] = ele;
    });
    return item;
  });
  return (
    <div className="App">
      <h1>这是一个自定义页面Demo</h1>
      <Table columns={columns} dataSource={dataSource}></Table>
    </div>
  );
}

export default Search;

import * as React from 'react'
import { Switch, Route, HashRouter } from 'react-router-dom'
import { Boot } from './Boot'
import Search from './Search'

import * as style from './style.module.less'

export default function App() {
  return (
    <HashRouter>
      <Boot />
      <div className={style.content}>
        <Switch>
          <Route exact path="/">
            <Search />
          </Route>
        </Switch>
      </div>
    </HashRouter>
  )
}