feat: added new design styles,

- added more actions

components/Base.tsx

@@ -1,16 +1,22 @@
-import {
-  AppBar,
-  colors,
-  Container,
-  Toolbar,
-  Typography,
-} from '@material-ui/core'
+import { AppBar, colors, Toolbar, Typography } from '@material-ui/core'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { makeStyles, Theme } from '@material-ui/core/styles'
 import React, { Fragment } from 'react'
 
+const useStyles = makeStyles((theme: Theme) => {
+  return {
+    appBar: {
+      zIndex: theme.zIndex.drawer + 1,
+    },
+  }
+})
+
 const Base = ({ children }) => {
+  const classes = useStyles()
   return (
     <Fragment>
-      <AppBar position='fixed'>
+      <CssBaseline />
+      <AppBar className={classes.appBar} position='fixed'>
         <Toolbar>
           <Typography variant='h6'>Process Monitor</Typography>
         </Toolbar>
@@ -22,9 +28,7 @@ const Base = ({ children }) => {
         }}
       >
         <Toolbar />
-        <Container maxWidth={'lg'} style={{ marginTop: 30 }}>
-          {children}
-        </Container>
+        <div className='main'>{children}</div>
       </div>
     </Fragment>
   )

components/DialogController.tsx

@@ -0,0 +1,60 @@
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import { useState } from 'react'
+
+const defaultValue = {
+  title: 'Konfirmasi',
+  content: '',
+}
+
+export const useMaterialDialog = () => {
+  const [isOpen, setOpen] = useState(false)
+  const [data, setData] = useState({ ...defaultValue, action: null })
+
+  return {
+    isOpen,
+    setOpen,
+    data,
+    confirmModal: ({ title = defaultValue.title, content, action }) => {
+      setData({ title, content, action })
+      setOpen(true)
+    },
+  }
+}
+
+export const DialogComponent = ({
+  isOpen,
+  data,
+  setOpen,
+}: ReturnType<typeof useMaterialDialog>) => {
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleConfirm = async () => {
+    if (await data.action()) {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <Dialog open={isOpen}>
+      <DialogTitle>{data.title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{data.content}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} color='primary'>
+          Tidak
+        </Button>
+        <Button onClick={handleConfirm} color='primary' autoFocus>
+          Ya
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

components/ProcessList.tsx

@@ -0,0 +1,167 @@
+import {
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Toolbar,
+  useTheme,
+} from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import OfflineBoltIcon from '@material-ui/icons/OfflineBolt'
+import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline'
+import clsx from 'clsx'
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state'
+import { useRouter } from 'next/router'
+import { Fragment, useMemo } from 'react'
+import useSWR from 'swr'
+import Api from '../util/Api'
+
+export const drawerWidth = 300
+
+const useStyles = makeStyles((theme: Theme) => {
+  return {
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+    itemActive: {
+      background: theme.palette.grey[300],
+    },
+    drawerPaper: {
+      width: drawerWidth,
+    },
+    drawerContainer: {
+      overflow: 'auto',
+    },
+  }
+})
+
+interface Props {
+  active?: string
+}
+
+const ProcessList = ({ active }: Props) => {
+  const router = useRouter()
+  const { data, error, isValidating, revalidate } = useSWR('/all', {
+    revalidateOnMount: true,
+    initialData: { data: [] },
+  })
+  const classes = useStyles()
+  const theme = useTheme()
+
+  const lists = useMemo(() => {
+    if (data.data && data.data.length > 0) {
+      return data.data
+    }
+    return []
+  }, [data])
+
+  const callAction = async ({ id, action }, onClose) => {
+    onClose()
+    try {
+      const { data } = await Api().post('/action', { id, action })
+      revalidate()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  return (
+    <Drawer
+      className={classes['drawer']}
+      variant='permanent'
+      classes={{
+        paper: classes.drawerPaper,
+      }}
+    >
+      <Toolbar />
+      <div className={classes.drawerContainer}>
+        <List>
+          {lists.map((item, index) => (
+            <ListItem
+              key={index}
+              button
+              onClick={() => {
+                router.push('/process/[id]', `/process/${item.pm_id}`)
+              }}
+              className={clsx({
+                [classes.itemActive]: item.pm_id.toString() === active,
+              })}
+            >
+              <ListItemIcon>
+                {item.pm2_env.status === 'online' ? (
+                  <OfflineBoltIcon
+                    style={{ color: theme.palette.success.main }}
+                  />
+                ) : (
+                  <RemoveCircleOutlineIcon />
+                )}
+              </ListItemIcon>
+              <ListItemText
+                primary={item.name}
+                primaryTypographyProps={{ noWrap: true }}
+                secondary={item.pm2_env.status}
+              />
+              <ListItemSecondaryAction>
+                <PopupState variant='popover' popupId={`process-${index}`}>
+                  {(popupState) => (
+                    <Fragment>
+                      <IconButton {...bindTrigger(popupState)}>
+                        <MoreVertIcon />
+                      </IconButton>
+                      <Menu {...bindMenu(popupState)}>
+                        {item.pm2_env.status === 'online' ? (
+                          <Fragment>
+                            <MenuItem
+                              onClick={() =>
+                                callAction(
+                                  { id: item.name, action: 'stop' },
+                                  popupState.close
+                                )
+                              }
+                            >
+                              Stop
+                            </MenuItem>
+                            <MenuItem
+                              onClick={() =>
+                                callAction(
+                                  { id: item.name, action: 'restart' },
+                                  popupState.close
+                                )
+                              }
+                            >
+                              Restart
+                            </MenuItem>
+                          </Fragment>
+                        ) : (
+                          <MenuItem
+                            onClick={() =>
+                              callAction(
+                                { id: item.name, action: 'start' },
+                                popupState.close
+                              )
+                            }
+                          >
+                            Start
+                          </MenuItem>
+                        )}
+                      </Menu>
+                    </Fragment>
+                  )}
+                </PopupState>
+              </ListItemSecondaryAction>
+            </ListItem>
+          ))}
+        </List>
+      </div>
+    </Drawer>
+  )
+}
+
+export default ProcessList

package.json

@@ -7,13 +7,17 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/styles": "^4.10.0",
     "axios": "^0.19.2",
     "clsx": "^1.1.1",
+    "material-ui-popup-state": "^1.6.1",
+    "moment": "^2.27.0",
     "next": "^9.5.1",
     "pm2": "^4.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "read-last-lines": "^1.7.2"
+    "shelljs": "^0.8.4",
+    "swr": "^0.3.0"
   },
   "devDependencies": {
     "@types/node": "^14.0.27",

pages/_app.tsx

@@ -3,6 +3,8 @@ import { ThemeProvider } from '@material-ui/core/styles'
 import Head from 'next/head'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { SWRConfig } from 'swr'
+import { fetcher } from '../util/Api'
 import theme from '../util/theme'
 
 export default function MyApp(props) {
@@ -28,7 +30,14 @@ export default function MyApp(props) {
       <ThemeProvider theme={theme}>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
-        <Component {...pageProps} />
+        <SWRConfig
+          value={{
+            refreshInterval: 3000,
+            fetcher,
+          }}
+        >
+          <Component {...pageProps} />
+        </SWRConfig>
       </ThemeProvider>
     </React.Fragment>
   )

pages/api/action.ts

@@ -29,9 +29,7 @@ export default async (req, res) => {
           pm2.restart(id, (err) => {
             return theCallback(err)
           })
-        }
-
-        if (action === 'start') {
+        } else if (action === 'start') {
           pm2.start(
             {
               name: id,
@@ -40,12 +38,14 @@ export default async (req, res) => {
               return theCallback(err)
             }
           )
-        }
-
-        if (action === 'stop') {
+        } else if (action === 'stop') {
           pm2.stop(id, (err) => {
             return theCallback(err)
           })
+        } else if (action === 'flush') {
+          pm2.flush(id, (err) => theCallback(err))
+        } else {
+          return reject({ message: 'action not found' })
         }
       })
     })

pages/api/process/[processId].ts → pages/api/process/[processId]/index.ts

@@ -1,5 +1,5 @@
 import pm2 from 'pm2'
-import readLast from 'read-last-lines'
+import shelljs from 'shelljs'
 
 export default async (req, res) => {
   try {
@@ -17,12 +17,15 @@ export default async (req, res) => {
 
           if (desc.length > 0) {
             const data = desc[0]
-            const log = await readLast.read(data.pm2_env.pm_out_log_path, 100)
-            const errLog = await readLast.read(
-              data.pm2_env.pm_err_log_path,
-              100
+            const log = shelljs.tail(
+              { '-n': 100 },
+              data.pm2_env.pm_out_log_path
             )
-            return resolve({ data: { ...desc[0], log, errLog } })
+            const errLog = shelljs.tail(
+              { '-n': 100 },
+              data.pm2_env.pm_err_log_path
+            )
+            return resolve({ ...desc[0], log, errLog })
           }
           return resolve({ message: 'process not found' })
         })