Merge pull request #122 from sasjs/issue121

Fixed couple of bugs + feature implemented

api/src/controllers/internal/Session.ts

@@ -12,8 +12,7 @@ import {
   createFile,
   fileExists,
   generateTimestamp,
-  readFile,
-  moveFile
+  readFile
 } from '@sasjs/utils'
 
 const execFilePromise = promisify(execFile)
@@ -41,6 +40,7 @@ export class SessionController {
     const sessionFolder = path.join(getTmpSessionsFolderPath(), sessionId)
 
     const creationTimeStamp = sessionId.split('-').pop() as string
+    // death time of session is 15 mins from creation
     const deathTimeStamp = (
       parseInt(creationTimeStamp) +
       15 * 60 * 1000 -
@@ -140,7 +140,9 @@ ${autoExecContent}`
   private scheduleSessionDestroy(session: Session) {
     setTimeout(async () => {
       if (session.inUse) {
-        session.deathTimeStamp = session.deathTimeStamp + 1000 * 10
+        // adding 10 more minutes
+        const newDeathTimeStamp = parseInt(session.deathTimeStamp) + 10 * 1000
+        session.deathTimeStamp = newDeathTimeStamp.toString()
 
         this.scheduleSessionDestroy(session)
       } else {

api/src/routes/appStream/appStreamHtml.ts

@@ -1,27 +1,6 @@
 import { AppStreamConfig } from '../../types'
-
-const style = `<style>
-* {
-  font-family: 'Roboto', sans-serif;
-}
-.app-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: center;
-}
-.app-container .app {
-  width: 150px;
-  margin: 10px;
-  overflow: hidden;
-  text-align: center;
-}
-.app-container .app img{
-  width: 100%;
-  margin-bottom: 10px;
-  border-radius: 10px;
-}
-</style>`
+import { script } from './script'
+import { style } from './style'
 
 const defaultAppLogo = '/sasjs-logo.svg'
 
@@ -52,6 +31,14 @@ export const appStreamHtml = (appStreamConfig: AppStreamConfig) => `
           singleAppStreamHtml(streamServiceName, entry.appLoc, entry.streamLogo)
         )
         .join('')}
+        <a class="app" title="Upload build.json">
+          <input id="fileId" type="file" hidden />
+          <button id="uploadButton" style="margin-bottom: 5px; cursor: pointer">
+            <img src="/plus.png" />
+          </button>
+          <span id="uploadMessage">Upload New App</span>
+        </a>
     </div>
+    ${script}
   </body>
 </html>`

api/src/routes/appStream/script.ts

@@ -0,0 +1,58 @@
+export const script = `<script>
+  const inputElement = document.getElementById('fileId')
+
+  document
+    .getElementById('uploadButton')
+    .addEventListener('click', function () {
+      inputElement.click()
+    })
+
+  inputElement.addEventListener(
+    'change',
+    function () {
+      const fileList = this.files /* now you can work with the file list */
+
+      updateFileUploadMessage('Requesting ...')
+
+      const file = fileList[0]
+      const formData = new FormData()
+
+      formData.append('file', file)
+      fetch('/SASjsApi/drive/deploy/upload', {
+        method: 'POST',
+        body: formData
+      })
+        .then(async (res) => {
+          const { status, ok } = res
+          if (status === 200 && ok) {
+            const data = await res.json()
+            return (
+              data.message +
+              '\\nstreamServiceName: ' +
+              data.streamServiceName +
+              '\\nrefreshing page once alert box closes.'
+            )
+          }
+          throw await res.text()
+        })
+        .then((message) => {
+          alert(message)
+          location.reload()
+        })
+        .catch((error) => {
+          alert(error)
+          resetFileUpload()
+          updateFileUploadMessage('Upload New App')
+        })
+    },
+    false
+  )
+
+  function updateFileUploadMessage(message) {
+    document.getElementById('uploadMessage').innerHTML = message
+  }
+
+  function resetFileUpload() {
+    inputElement.value = null
+  }
+</script>`

api/src/routes/appStream/style.ts

@@ -0,0 +1,22 @@
+export const style = `<style>
+* {
+  font-family: 'Roboto', sans-serif;
+}
+.app-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+.app-container .app {
+  width: 150px;
+  margin: 10px;
+  overflow: hidden;
+  text-align: center;
+}
+.app-container .app img{
+  width: 100%;
+  margin-bottom: 10px;
+  border-radius: 10px;
+}
+</style>`

api/src/utils/index.ts

@@ -14,7 +14,6 @@ export * from './removeTokensInDB'
 export * from './saveTokensInDB'
 export * from './setProcessVariables'
 export * from './setupFolders'
-export * from './sleep'
 export * from './upload'
 export * from './validation'
 export * from './verifyTokenInDB'

api/src/utils/sleep.ts

@@ -1,3 +0,0 @@
-export const sleep = async (delay: number) => {
-  await new Promise((resolve) => setTimeout(resolve, delay))
-}

web/src/containers/Studio/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import axios from 'axios'
 
 import Box from '@mui/material/Box'
-import { Button, Paper, Stack, Tab } from '@mui/material'
+import { Button, Paper, Stack, Tab, Tooltip } from '@mui/material'
 import { makeStyles } from '@mui/styles'
 import Editor, { OnMount } from '@monaco-editor/react'
 import { useLocation } from 'react-router-dom'
@@ -86,70 +86,67 @@ const Studio = () => {
   const classes = useStyles()
 
   return (
-    <>
-      <br />
-      <br />
-      <br />
-      <Box sx={{ width: '100%', typography: 'body1' }}>
-        <TabContext value={tab}>
-          <Box
-            sx={{
-              borderBottom: 1,
-              borderColor: 'divider'
-            }}
-            style={{ position: 'fixed', background: 'white', width: '100%' }}
-          >
-            <TabList onChange={handleTabChange} centered>
-              <Tab className={classes.root} label="Code" value="1" />
-              <Tab className={classes.root} label="Log" value="2" />
+    <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>
+      <TabContext value={tab}>
+        <Box
+          sx={{
+            borderBottom: 1,
+            borderColor: 'divider'
+          }}
+          style={{ position: 'fixed', background: 'white', width: '100%' }}
+        >
+          <TabList onChange={handleTabChange} centered>
+            <Tab className={classes.root} label="Code" value="1" />
+            <Tab className={classes.root} label="Log" value="2" />
+            <Tooltip title="Displays content from the _webout fileref">
               <Tab className={classes.root} label="Webout" value="3" />
-            </TabList>
-          </Box>
-          <TabPanel value="1">
-            {/* <Toolbar /> */}
-            <Paper
-              sx={{
-                height: '70vh',
-                marginTop: '50px',
-                padding: '10px',
-                overflow: 'auto',
-                position: 'relative'
+            </Tooltip>
+          </TabList>
+        </Box>
+        <TabPanel value="1">
+          {/* <Toolbar /> */}
+          <Paper
+            sx={{
+              height: '70vh',
+              marginTop: '50px',
+              padding: '10px',
+              overflow: 'auto',
+              position: 'relative'
+            }}
+            elevation={3}
+          >
+            <Editor
+              height="95%"
+              value={fileContent}
+              onMount={handleEditorDidMount}
+              onChange={(val) => {
+                if (val) setFileContent(val)
               }}
-              elevation={3}
-            >
-              <Editor
-                height="95%"
-                value={fileContent}
-                onMount={handleEditorDidMount}
-                onChange={(val) => {
-                  if (val) setFileContent(val)
-                }}
-              />
-            </Paper>
-            <Stack
-              spacing={3}
-              direction="row"
-              sx={{ justifyContent: 'center', marginTop: '20px' }}
-            >
-              <Button variant="contained" onClick={handleRunBtnClick}>
-                Run SAS Code
-              </Button>
-            </Stack>
-          </TabPanel>
-          <TabPanel value="2">
-            <div style={{ marginTop: '50px' }}>
-              <h2>SAS Log</h2>
-              <pre>{log}</pre>
-            </div>
-          </TabPanel>
-          <TabPanel value="3">
-            <div style={{ marginTop: '50px' }}>
-              <pre>{webout}</pre>
-            </div>
-          </TabPanel>
-        </TabContext>
-      </Box>
-    </>
+            />
+          </Paper>
+          <Stack
+            spacing={3}
+            direction="row"
+            sx={{ justifyContent: 'center', marginTop: '20px' }}
+          >
+            <Button variant="contained" onClick={handleRunBtnClick}>
+              Run SAS Code
+            </Button>
+          </Stack>
+        </TabPanel>
+        <TabPanel value="2">
+          <div style={{ marginTop: '50px' }}>
+            <h2>SAS Log</h2>
+            <pre>{log}</pre>
+          </div>
+        </TabPanel>
+        <TabPanel value="3">
+          <div style={{ marginTop: '50px' }}>
+            <pre>{webout}</pre>
+          </div>
+        </TabPanel>
+      </TabContext>
+    </Box>
   )
 }