feat(web_console): show charts of job: (bytedance#293)

* mask sensible info in kibana url
* add config KIBANA_HOST KIBANA_PORT

Co-authored-by: shenshihao <[email protected]>

web_console/constants/index.js

@@ -18,6 +18,8 @@ const DEFAULT_SERVER_CONFIG = {
   DB_SOCKET_PATH: null,
   GRPC_HOST: 'localhost',
   GRPC_PORT: 1990,
+  KIBANA_HOST: 'fedlearner-stack-kibana',
+  KIBANA_PORT: 443,
 };
 
 module.exports = {

web_console/pages/job/charts/[id].jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import useSWR from 'swr';
+import { useRouter } from 'next/router';
+import { Text, Card, Grid } from '@zeit-ui/react'
+
+import { fetcher } from '../../../libs/http';
+import Layout from '../../../components/Layout';
+import css from 'styled-jsx/css';
+
+const { converted2Urls } = require('../../../utils/kibana')
+
+function useStyle () {
+  return css`
+    iframe {
+      border: none;
+      width: 100%;
+      height: 80vh;
+    }
+  `
+}
+
+export default function charts (props) {
+  const router = useRouter()
+  const styles = useStyle()
+  const { id } = router.query
+  const { data: jobData } = useSWR(id ? `job/${id}` : null, fetcher);
+  const job = jobData ? jobData.data : null;
+  const urls = job
+  ? converted2Urls(
+    job.localdata.job_type, job.localdata.created_at,
+    new Date().toISOString(), job.localdata.name
+  )
+  : []
+  return (
+    <Layout theme={props.theme} toggleTheme={props.toggleTheme}>
+      <Text h2>{job?.localdata.name || 'Loading...'}</Text>
+      <Grid.Container gap={2}>
+        {urls.map(url =>
+          <Grid sm={24} md={24}>
+            <Card>
+              <iframe src={url}/>
+            </Card>
+          </Grid>
+        )}
+      </Grid.Container>
+      <style jsx>{styles}</style>
+    </Layout>
+  )
+}

web_console/pages/job/index.jsx

@@ -199,6 +199,11 @@ export default function JobList(props) {
       >
         <Link color>View Detail</Link>
       </NextLink>
+      <NextLink
+        href={`/job/charts/${item.localdata.id}`}
+      >
+        <Link color>View Charts</Link>
+      </NextLink>
       <Text
         className="actionText"
         onClick={() => handleClone(item)}

web_console/utils/kibana.js

@@ -1,7 +1,13 @@
 const { metrics_list } = require('./metrics_list');
+const getConfig = require('./get_confg');
+
+const config = getConfig({
+    KIBANA_HOST: process.env.KIBANA_HOST,
+    KIBANA_PORT: process.env.KIBANA_PORT,
+});
 
 function getCommonUrl(start_time, end_time, application_id){
-    let url = "http://ad-kibana.bytedance.net/fedlearner/app/kibana#" +
+    let url = `https://${config.KIBANA_HOST}:${config.KIBANA_PORT}/fedlearner/app/kibana#` +
     "/visualize/edit/95e50f80-dd3a-11ea-a472-39251c5aaace?_g=(filter" +
     "s:!(),refreshInterval:(pause:!t,value:0),time:(from:'" + start_time +
     "',to:'" + end_time + "'))&_a=(filters:!(('$state':(store:appState)," +
@@ -83,4 +89,6 @@ function converted2Urls(job_type, start_time, end_time, application_id) {
         urls.push(url);
     }
     return urls;
-}
+}
+
+module.exports = { converted2Urls }

web_console/utils/metrics_list.js

@@ -55,4 +55,6 @@ const metrics_list = {
             title: "count of fail to load data block"
         }
     ]
-};
+};
+
+module.exports = { metrics_list }