Implement Log UI (#81)

pkg/apiserver/logsearch/service.go

@@ -171,7 +171,7 @@ func (s *Service) DownloadLogs(c *gin.Context) {
 // @Description list all log search tasks in a task group by providing task group ID
 // @Produce json
 // @Param id path string true "Task Group ID"
-// @Success 200 {array} TaskGroupResponse
+// @Success 200 {object} TaskGroupResponse
 // @Failure 500 {object} utils.APIError
 // @Router /logs/taskgroups/{id} [get]
 func (s *Service) GetTaskGroup(c *gin.Context) {

ui/.github_release_version

@@ -1,3 +1,3 @@
 # This file contains a version number which will be used to release assets to
 # GitHub. To trigger a new asset release, simply increase this version number.
-20200225_2
+20200228_1

ui/src/apps/logsearch/LogSearching.js

@@ -0,0 +1,23 @@
+import { Col, Empty, Row } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { SearchHeader } from './components'
+
+export default function LogSearchingPage() {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <SearchHeader />
+      <Row type="flex" align="bottom" style={{ width: "100%", height: 500 }}>
+        <Col span={24}>
+          <Empty
+            description={
+              <span>
+                {t('logs.page.intro')}
+              </span>
+            } />
+        </Col>
+      </Row>
+    </div>
+  )
+}

ui/src/apps/logsearch/LogSearchingDetail.js

@@ -0,0 +1,27 @@
+import { Alert, Col, Row } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { SearchHeader, SearchProgress, SearchResult } from './components'
+
+export default function LogSearchingDetail() {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <Row gutter={[16, 16]}>
+        <Col span={18}>
+          <SearchHeader />
+          <Alert
+            message={t('logs.page.tip')}
+            type="info"
+            showIcon
+            style={{ marginTop: 14, marginBottom: 14 }}
+          />
+          <SearchResult />
+        </Col>
+        <Col span={6}>
+          <SearchProgress />
+        </Col>
+      </Row>
+    </div>
+  )
+}

ui/src/apps/logsearch/RootComponent.js

@@ -0,0 +1,48 @@
+import { Breadcrumb } from 'antd'
+import React, { useReducer } from 'react'
+import { HashRouter as Router, Link, Route, Switch, withRouter } from 'react-router-dom'
+import LogSearching from './LogSearching'
+import LogSearchingDetail from './LogSearchingDetail'
+import { Context, initialState, reducer } from './store'
+
+const App = withRouter(props => {
+  const { location } = props
+  const page = location.pathname.split('/').pop()
+
+  const [store, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <Context.Provider value={{ store, dispatch }}>
+      <div>
+        <div style={{ margin: 12 }}>
+          <Breadcrumb>
+            <Breadcrumb.Item>
+              <Link to="/logsearch">Log Searching</Link>
+            </Breadcrumb.Item>
+            {page === 'detail' && (
+              <Breadcrumb.Item>Detail</Breadcrumb.Item>
+            )}
+          </Breadcrumb>
+        </div>
+        <div style={{ margin: 12 }}>
+          <Switch>
+            <Route exact path="/logsearch">
+              <LogSearching />
+            </Route>
+            <Route path="/logsearch/detail">
+              <LogSearchingDetail />
+            </Route>
+          </Switch>
+        </div>
+      </div>
+    </Context.Provider>
+  )
+})
+
+export default function () {
+  return (
+    <Router>
+      <App />
+    </Router>
+  )
+}

ui/src/apps/logsearch/app.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import singleSpaReact from 'single-spa-react';
+import RootComponent from './RootComponent.js';
+
+const reactLifecycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: RootComponent,
+  domElementGetter,
+});
+
+export const bootstrap = [
+  reactLifecycles.bootstrap,
+];
+export const mount = [
+  reactLifecycles.mount,
+];
+export const unmount = [
+  reactLifecycles.unmount,
+];
+
+function domElementGetter() {
+  return document.getElementById('__spa_content__');
+}

ui/src/apps/logsearch/components/Icon.tsx

@@ -0,0 +1,18 @@
+import { Icon } from 'antd'
+import React from 'react'
+
+export function LoadingIcon() {
+  return <Icon type="loading" />
+}
+
+export function SuccessIcon() {
+  return (
+    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+  )
+}
+
+export function FailIcon() {
+  return (
+    <Icon type="info-circle" theme="twoTone" twoToneColor="#faad14" />
+  )
+}