Merge pull request #13 from InfuseAI/feature/sc-22145/release-crane-1-0-0

Release Crane 1.0.0 Final Check

Author: aar0nTw

src/App.tsx

@@ -1,25 +1,40 @@
-import React, { Suspense } from 'react';
+import React, { useState, useEffect, Suspense } from 'react';
 import {
   HashRouter as Router,
   Redirect,
   Route,
   Switch,
 } from 'react-router-dom';
 import './App.less';
-import { Layout, Skeleton } from 'antd';
+import { Alert, Button, Space, Layout, Skeleton } from 'antd';
 import Sidebar from './Sidebar';
 import BuildImage from './BuildImage';
 import ListImage from './ListImage';
 import Settings from './Settings';
+import { send } from './utils/ipcClient';
 import CreatePrimeHubImage from './CreatePrimeHubImage';
 const { Footer } = Layout;
 
+const OK = 'ok';
+
 const Crane = () => {
+  const [missingDocker, setMissingDocker] = useState(false);
   const siderWidth = {
     collapsed: 80,
     unCollapsed: 190,
   };
 
+  useEffect(() => {
+    (async () => {
+      // @ts-ignore
+      const pong = await send('ping_docker');
+      console.log('Ping docker:', pong);
+      if (pong !== OK) {
+        setMissingDocker(true);
+      }
+    })();
+  }, []);
+
   return (
     <Layout
       style={{
@@ -29,6 +44,28 @@ const Crane = () => {
       <Router>
         <Sidebar collapsed={true} width={siderWidth.unCollapsed} />
         <Layout className='site-layout'>
+          {missingDocker ? (
+            <Alert
+              message='Error: Missing Docker runtime.'
+              description='Can not detect system docker, please check your docker enviroment.'
+              type='error'
+              showIcon
+              action={
+                <Space>
+                  <Button
+                    size='small'
+                    type='primary'
+                    href='https://docs.docker.com/get-docker/'
+                    target='_blank'
+                  >
+                    Get Docker
+                  </Button>
+                </Space>
+              }
+            />
+          ) : (
+            <></>
+          )}
           <Suspense
             fallback={
               <div className='site-layout-background'>
@@ -38,7 +75,7 @@ const Crane = () => {
           >
             <Switch>
               <Route exact path='/' component={BuildImage} />
-              <Route path='/settings' component={Settings} />
+              <Route path='/settings/:tabName' component={Settings} />
               <Route path='/images' component={ListImage} />
               <Route
                 path='/createPrimeHubImage'

src/BuildImage.tsx

@@ -118,7 +118,6 @@ export default function BuildImage() {
 
   const initialValues = {
     base_image_url: 'jupyter/base-notebook:latest',
-    apt: `curl\ngit`,
   };
 
   useEffect(() => {

src/CreatePrimeHubImage.tsx

@@ -22,7 +22,7 @@ const { Content } = Layout;
 const { Option } = Select;
 
 export default function CreatePrimeHubImage() {
-  const hisotry = useHistory();
+  const history = useHistory();
   const location = useLocation();
   const { search } = location;
   const [form] = Form.useForm();
@@ -85,7 +85,16 @@ export default function CreatePrimeHubImage() {
         console.log(error);
         notification.error({
           message: 'PrimeHub Connection Failed',
-          description: `Unable to fetch PrimeHub user group info.`,
+          duration: 5,
+          description: (
+            <div>
+              Unable to fetch PrimeHub user group info.{' '}
+              {/* eslint-disable-next-line */}
+              <a onClick={() => history.push('/settings/primehub')}>
+                App Settings
+              </a>
+            </div>
+          ),
         });
       }
     }
@@ -121,7 +130,7 @@ export default function CreatePrimeHubImage() {
         message: 'PrimeHub',
         description: `Image: ${get(result, 'data.createImage.name')} created.`,
       });
-      hisotry.push('/images/');
+      history.push('/images/');
     } catch (error) {
       console.log(error);
       notification.error({

src/ListImage.tsx

@@ -29,16 +29,28 @@ export default function ListImage() {
   const [imageList, updateImageList] = useState([]);
   const [logDrawerVisible, setLogDrawerVisible] = useState(false);
   const [logText, setLogText] = useLocalStorage('push_log');
-  const buildNotification = (name, isSuccess) => {
+  const buildNotification = (name, isSuccess, payload) => {
     if (isSuccess) {
       notification['success']({
         message: 'Push Success',
         description: `Image ${name || ''} pushed`,
       });
     } else {
+      const err = payload.output.find((x) => x.error);
       notification['error']({
         message: 'Push Failed',
-        description: `Image ${name || ''} push failed`,
+        description: (
+          <div>
+            Image ${name || ''} push failed
+            <br />
+            {err.error.split('\n').map((line) => (
+              <span>
+                {line}
+                <br />
+              </span>
+            ))}
+          </div>
+        ),
       });
     }
   };
@@ -47,7 +59,7 @@ export default function ListImage() {
     listen(ipc_name, (payload) => {
       if (payload.stage === Status.FINISHED) {
         const name = ipc_name.replace('push-log-', '');
-        buildNotification(name, !payload.output.find((x) => x.error));
+        buildNotification(name, !payload.output.find((x) => x.error), payload);
         setLogDrawerVisible(false);
         unlisten(ipc_name);
       } else if (payload.stage === Status.PROGRESSING) {

src/Settings.tsx

@@ -10,6 +10,7 @@ import {
   notification,
   Space,
 } from 'antd';
+import { useParams } from 'react-router-dom';
 import { send } from './utils/ipcClient';
 import {
   ApolloClient,
@@ -23,6 +24,7 @@ const { Content } = Layout;
 const { TabPane } = Tabs;
 
 export default function Settings() {
+  const { tabName } = useParams<{ tabName: string }>();
   const [dockerHubForm] = Form.useForm();
   const [primeHubForm] = Form.useForm();
   const onDockerHubFinish = async (values) => {
@@ -125,8 +127,12 @@ export default function Settings() {
         className='site-layout-background'
         style={{ padding: 24, minHeight: 360 }}
       >
-        <Tabs defaultActiveKey='1' size='large' style={{ marginBottom: 32 }}>
-          <TabPane tab='DOCKER HUB' key='1'>
+        <Tabs
+          defaultActiveKey={tabName}
+          size='large'
+          style={{ marginBottom: 32 }}
+        >
+          <TabPane tab='DOCKER HUB' key='dockerhub'>
             <Form
               layout='vertical'
               form={dockerHubForm}
@@ -148,7 +154,7 @@ export default function Settings() {
               </Form.Item>
             </Form>
           </TabPane>
-          <TabPane tab='PRIMEHUB' key='2' forceRender={true}>
+          <TabPane tab='PRIMEHUB' key='primehub' forceRender={true}>
             <Alert
               style={{ margin: '8px 0 16px' }}
               className='primehub-alert'

src/Sidebar.tsx

@@ -64,7 +64,7 @@ export default function Sidebar(prop) {
           key='settings'
           icon={<SettingOutlined />}
         >
-          <Link to='/settings' style={{ color: 'white' }}>
+          <Link to='/settings/dockerhub' style={{ color: 'white' }}>
             Settings
           </Link>
         </Menu.Item>

src/electron/ServerHandlers.ts

@@ -75,6 +75,14 @@ export function writeDockerfile(dockerfileContent) {
 const handlers = {
   build_events: [],
   build_status: '',
+  ping_docker: async (args) => {
+    try {
+      await docker.ping();
+    } catch (error) {
+      return error;
+    }
+    return 'ok';
+  },
   'get-dockerhub-credential': async () => {
     return await getCredential(dockerHubCredentialKeyName);
   },

src/electron/main.ts

@@ -50,7 +50,7 @@ function createBackgroundWindow(args) {
     height: 640,
     minWidth: 1024,
     minHeight: 640,
-    show: false,
+    show: true,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,