Update

Signed-off-by: Aaron Huang <aaroms9733@gmail.com>

Author: aar0nTw

src/App.less

@@ -27,11 +27,15 @@ body {
   padding: 24px;
 }
 
-.tags-table, .images-table {
+.tags-table,
+.images-table {
   padding-left: 16px;
-  .tags-row, .images-row {
+  .tags-row,
+  .images-row {
     .actionBtn {
       opacity: 0;
+      color: @primary-color;
+      border-color: @primary-color;
     }
     background: #fbfbfb;
     &:hover {
@@ -42,6 +46,16 @@ body {
   }
 }
 
+.repo-table {
+  .ant-tag {
+    font-weight: 700;
+    &.tag-public {
+      border: 1px solid #244764;
+      color: #244764;
+    }
+  }
+}
+
 .primehub-alert {
   padding: 10px 10px 10px 15px;
   .ant-alert-message {

src/BuildImage.tsx

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

src/ListImage.tsx

@@ -92,7 +92,7 @@ export default function ListImage() {
           i.imageId = x.Id.split(':')[1].substring(0, 12);
           i.key = i.imageId;
           i.created = format(x.Created * 1000);
-          i.size = filesize(x.Size, {round: 1});
+          i.size = filesize(x.Size, { round: 1 });
           return i;
         });
       console.log(images);
@@ -138,7 +138,9 @@ export default function ListImage() {
           size='small'
           icon={<CloudUploadOutlined />}
           onClick={() => pushImage(record.name + ':' + record.tag)}
-        >PUSH</Button>
+        >
+          PUSH
+        </Button>
       ),
     },
   ];

src/ListRemoteImage.tsx

@@ -86,14 +86,18 @@ export default function ListRemoteImages() {
         key: 'tag_status',
         align: 'center',
         width: '10%',
-        render: (status) => <Tag color='cyan'>{status.toUpperCase()}</Tag>,
+        render: (status) => (
+          <Tag className='tag-status' color='cyan'>
+            {status.toUpperCase()}
+          </Tag>
+        ),
       },
       {
         title: 'SIZE',
         dataIndex: 'full_size',
         key: 'full_size',
         align: 'right',
-        render: (value) => filesize(value, {round: 1}),
+        render: (value) => filesize(value, { round: 1 }),
         width: '15%',
       },
       {
@@ -110,10 +114,7 @@ export default function ListRemoteImages() {
         align: 'center',
         width: '15%',
         render: (name, tag) => (
-          <Tooltip
-            placement='top'
-            title='Add to PrimeHub'
-          >
+          <Tooltip placement='top' title='Add to PrimeHub'>
             <Button
               className='actionBtn'
               size='small'
@@ -122,8 +123,10 @@ export default function ListRemoteImages() {
                 const tag = `${record.namespace}/${record.name}:${name}`;
                 history.push(`/createPrimeHubImage?tag=${tag}`);
               }}
-            >ADD</Button>
-        </Tooltip>
+            >
+              ADD
+            </Button>
+          </Tooltip>
         ),
       },
     ];
@@ -222,7 +225,7 @@ export default function ListRemoteImages() {
         if (is_private) {
           return <Tag color='orange'>PRIVATE</Tag>;
         } else {
-          return <Tag color='green'>PUBLIC</Tag>;
+          return <Tag className='tag-public'>PUBLIC</Tag>;
         }
       },
     },
@@ -244,13 +247,14 @@ export default function ListRemoteImages() {
     {
       key: 'action',
       align: 'center',
-      width: '15%'
+      width: '15%',
     },
   ];
   return (
     <React.Fragment>
       <Table
         size='small'
+        className='repo-table'
         columns={columns}
         dataSource={repos}
         pagination={false}

src/Settings.tsx

@@ -8,7 +8,7 @@ import {
   Tabs,
   Alert,
   notification,
-  Space
+  Space,
 } from 'antd';
 import { send } from './utils/ipcClient';
 import {
@@ -150,21 +150,26 @@ export default function Settings() {
           </TabPane>
           <TabPane tab='PRIMEHUB' key='2' forceRender={true}>
             <Alert
-              style={{ margin: '8px 0 16px'}}
+              style={{ margin: '8px 0 16px' }}
               className='primehub-alert'
               showIcon
               message={`Looking for a full-stack ML platform?`}
               description={`It'll just take few minutes by our 1-click installer to setup PrimeHub on AWS`}
               action={
                 <Space>
-                  <Button size='small' type='primary' href='https://one.primehub.io' target='_blank'>
+                  <Button
+                    size='small'
+                    type='primary'
+                    href='https://one.primehub.io'
+                    target='_blank'
+                  >
                     Ok Let's Do It
                   </Button>
                 </Space>
               }
               closable
               closeText={
-                <Button size='small' type='text' style={{color: '#aaa'}}>
+                <Button size='small' type='text' style={{ color: '#aaa' }}>
                   Not right now
                 </Button>
               }
@@ -177,8 +182,11 @@ export default function Settings() {
               initialValues={initialValues}
               onFinish={onPrimeHubFinish}
             >
-              <Form.Item label='PrimeHub API Endpoint' name='primehub-api-endpoint'>
-                <Input placeholder='https://example.com/primehub/api/graphql'/>
+              <Form.Item
+                label='PrimeHub API Endpoint'
+                name='primehub-api-endpoint'
+              >
+                <Input placeholder='https://example.com/primehub/api/graphql' />
               </Form.Item>
               <Form.Item label='PrimeHub API Token' name='primehub-api-token'>
                 <Input.Password

src/Sidebar.tsx

@@ -45,13 +45,16 @@ export default function Sidebar(prop) {
             Build
           </Link>
         </Menu.Item>
-        <Menu.Item key={(() => {
-          const path = location.pathname.replaceAll('/', '');
-          if (path === 'createPrimeHubImage') {
-            return 'createPrimeHubImage';
-          }
-          return 'images'
-        })()} icon={<OrderedListOutlined />}>
+        <Menu.Item
+          key={(() => {
+            const path = location.pathname.replaceAll('/', '');
+            if (path === 'createPrimeHubImage') {
+              return 'createPrimeHubImage';
+            }
+            return 'images';
+          })()}
+          icon={<OrderedListOutlined />}
+        >
           <Link to='/images' style={{ color: 'white' }}>
             Images
           </Link>

src/electron/ServerHandlers.ts

@@ -8,8 +8,8 @@ import axios from 'axios';
 import { createMarkdownArrayTableSync } from 'parse-markdown-table';
 
 const docker = new Docker();
-const dockerHubCredentialKeyName = "Crane-DockerHub";
-const primeHubCredentialKeyName = "Crane-PrimeHub";
+const dockerHubCredentialKeyName = 'Crane-DockerHub';
+const primeHubCredentialKeyName = 'Crane-PrimeHub';
 
 export function generateDockerfile(options) {
   let base_image_url = options['base_image_url'];
@@ -66,7 +66,10 @@ export async function saveCredential(keyname, account, password) {
 }
 
 export function writeDockerfile(dockerfileContent) {
-  fs.writeFileSync(path.join(config.workingDir, 'Dockerfile'), dockerfileContent);
+  fs.writeFileSync(
+    path.join(config.workingDir, 'Dockerfile'),
+    dockerfileContent
+  );
 }
 
 const handlers = {
@@ -79,7 +82,11 @@ const handlers = {
     return await getCredential(primeHubCredentialKeyName);
   },
   'save-dockerhub-credential': async (args) =>
-    await saveCredential(dockerHubCredentialKeyName ,args.account, args.password),
+    await saveCredential(
+      dockerHubCredentialKeyName,
+      args.account,
+      args.password
+    ),
   'save-primehub-credential': async (args) =>
     await saveCredential(primeHubCredentialKeyName, args.endpoint, args.token),
   'build-status': async () => {

src/electron/ServerIpc.ts

@@ -2,48 +2,48 @@ import * as console from 'console';
 import * as ipc from 'node-ipc';
 
 export function init(socketAppspace, socketId, handlers) {
-  ipc.config.silent = true
-  console.log("server-ipc:init", socketAppspace, socketId)
-  ipc.config.appspace = socketAppspace
-  ipc.config.id = socketId
+  ipc.config.silent = true;
+  console.log('server-ipc:init', socketAppspace, socketId);
+  ipc.config.appspace = socketAppspace;
+  ipc.config.id = socketId;
   ipc.serve(() => {
     ipc.server.on('message', (data, socket) => {
-      let msg = JSON.parse(data)
-      let { id, name, args } = msg
+      let msg = JSON.parse(data);
+      let { id, name, args } = msg;
 
       if (handlers[name]) {
         handlers[name](args).then(
-          result => {
+          (result) => {
             ipc.server.emit(
               socket,
               'message',
               JSON.stringify({ type: 'reply', id, result })
-            )
+            );
           },
-          error => {
+          (error) => {
             // Up to you how to handle errors, forward them, etc
             ipc.server.emit(
               socket,
               'message',
               JSON.stringify({ type: 'error', id })
-            )
-            throw error
+            );
+            throw error;
           }
-        )
+        );
       } else {
-        console.warn('Unknown method: ' + name)
+        console.warn('Unknown method: ' + name);
         ipc.server.emit(
           socket,
           'message',
           JSON.stringify({ type: 'reply', id, result: null })
-        )
+        );
       }
-    })
-  })
+    });
+  });
 
-  ipc.server.start()
+  ipc.server.start();
 }
 
 export function send(name, args) {
-  ipc.server.broadcast('message', JSON.stringify({ type: 'push', name, args }))
+  ipc.server.broadcast('message', JSON.stringify({ type: 'push', name, args }));
 }

src/electron/client-preload.js

@@ -1,39 +1,36 @@
-const { contextBridge } = require('electron')
+const { contextBridge } = require('electron');
 
-const opts = parseArgs(window.process.argv)
-const socketId = opts.get('--socketId')
+const opts = parseArgs(window.process.argv);
+const socketId = opts.get('--socketId');
 
-const ipc = require('node-ipc')
-ipc.config.silent = true
-ipc.config.appspace = opts.get('--socketAppspace')
+const ipc = require('node-ipc');
+ipc.config.silent = true;
+ipc.config.appspace = opts.get('--socketAppspace');
 
-contextBridge.exposeInMainWorld(
-  'myapp',
-  {
-    uuid: require('uuid'),
-    isDev: opts.get('--isDev'),
-    appVersion: opts.get('--appVersion'),
-    socketId,
-    ipcOn,
-    ipcEmit
-  }
-)
+contextBridge.exposeInMainWorld('myapp', {
+  uuid: require('uuid'),
+  isDev: opts.get('--isDev'),
+  appVersion: opts.get('--appVersion'),
+  socketId,
+  ipcOn,
+  ipcEmit,
+});
 function ipcOn(id, handle) {
   ipc.connectTo(id, () => {
-    ipc.of[id].on("message", handle.message)
-    ipc.of[id].on("connect", handle.connect)
-    ipc.of[id].on("disconnect", handle.disconnect)
-  })
+    ipc.of[id].on('message', handle.message);
+    ipc.of[id].on('connect', handle.connect);
+    ipc.of[id].on('disconnect', handle.disconnect);
+  });
 }
 
 function ipcEmit(id, ...args) {
-  return ipc.of[id].emit(...args)
+  return ipc.of[id].emit(...args);
 }
 
 function parseArgs(argv) {
   return argv.reduce((args, arg) => {
-    const match = arg.split("=")
-    args.set(match[0], match[1] || true)
-    return args
-  }, new Map())
-}
+    const match = arg.split('=');
+    args.set(match[0], match[1] || true);
+    return args;
+  }, new Map());
+}