fix(appstream): app logo + improvements

2025-12-10 11:24:35 +00:00 · 2022-03-22 03:55:51 +05:00
parent 98a00ec7ac
commit df6003df94
10 changed files with 70 additions and 22 deletions
--- a/api/package.json
+++ b/api/package.json
@@ -88,5 +88,10 @@
  },
  "configuration": {
    "sasPath": "/opt/sas/sas9/SASHome/SASFoundation/9.4/sas"
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "tmp/appStreamConfig.json"
+    ]
  }
 }
--- a/api/public/swagger.yaml
+++ b/api/public/swagger.yaml
@@ -214,6 +214,8 @@ components:
                    type: string
                message:
                    type: string
+                streamServiceName:
+                    type: string
                example:
                    $ref: '#/components/schemas/FileTree'
            required:
--- a/api/src/controllers/drive.ts
+++ b/api/src/controllers/drive.ts
@@ -36,6 +36,7 @@ interface DeployPayload {
 interface DeployResponse {
  status: string
  message: string
+  streamServiceName?: string
  example?: FileTree
 }

--- a/api/src/routes/api/drive.ts
+++ b/api/src/routes/api/drive.ts
@@ -22,12 +22,15 @@ driveRouter.post('/deploy', async (req, res) => {
  try {
    const response = await controller.deploy(body)

-    if (body.streamWebFolder)
-      publishAppStream(
+    if (body.streamWebFolder) {
+      const { streamServiceName } = await publishAppStream(
        body.appLoc,
        body.streamWebFolder,
-        body.streamServiceName
+        body.streamServiceName,
+        body.streamLogo
      )
+      response.streamServiceName = streamServiceName
+    }

    res.send(response)
  } catch (err: any) {
--- a/api/src/routes/appStream/appStreamHtml.ts
+++ b/api/src/routes/appStream/appStreamHtml.ts
@@ -17,13 +17,20 @@ const style = `<style>
  border-radius: 10px 10px 0 0;
  text-align: center;
 }
+.app-container .app img{
+  width: 100%;
+}
 </style>`

 const defaultAppLogo = '/sasjs-logo.svg'

-const singleAppStreamHtml = (streamServiceName: string, logo?: string) =>
-  ` <a class="app" href="${streamServiceName}">
-      <img src="${logo ?? defaultAppLogo}" />
+const singleAppStreamHtml = (
+  streamServiceName: string,
+  appLoc: string,
+  logo?: string
+) =>
+  ` <a class="app" href="${streamServiceName}" title="${appLoc}">
+      <img src="${logo ? streamServiceName + '/' + logo : defaultAppLogo}" />
      ${streamServiceName}
    </a>`

@@ -36,12 +43,11 @@ export const appStreamHtml = (appStreamConfig: AppStreamConfig) => `
  <body>
    <h1>App Stream</h1>
    <div class="app-container">
-      ${Object.entries(appStreamConfig).map(([streamServiceName, entry]) =>
-        singleAppStreamHtml(streamServiceName, entry.logo)
-      )}
-      <a class="app" href="#"><img src="/sasjs-logo.svg" />App Name here</a>
-      <a class="app" href="#"><img src="/sasjs-logo.svg" />App Name here</a>
-      <a class="app" href="#"><img src="/sasjs-logo.svg" />App Name here</a>
+      ${Object.entries(appStreamConfig)
+        .map(([streamServiceName, entry]) =>
+          singleAppStreamHtml(streamServiceName, entry.appLoc, entry.streamLogo)
+        )
+        .join('')}
    </div>
  </body>
 </html>`
--- a/api/src/routes/appStream/index.ts
+++ b/api/src/routes/appStream/index.ts
@@ -17,6 +17,7 @@ export const publishAppStream = async (
  appLoc: string,
  streamWebFolder: string,
  streamServiceName?: string,
+  streamLogo?: string,
  addEntryToFile: boolean = true
 ) => {
  const driveFilesPath = getTmpFilesFolderPath()
@@ -37,8 +38,19 @@ export const publishAppStream = async (
      ? Object.keys(process.appStreamConfig).length
      : 0

-    if (!streamServiceName || process.appStreamConfig[streamServiceName]) {
+    if (!streamServiceName) {
      streamServiceName = `AppStreamName${appCount + 1}`
+    } else {
+      const alreadyDeployed = process.appStreamConfig[streamServiceName]
+      if (alreadyDeployed) {
+        if (alreadyDeployed.appLoc === appLoc) {
+          // redeploying to same streamServiceName
+        } else {
+          // trying to deploy to another existing streamServiceName
+          // assign new streamServiceName
+          streamServiceName = `${streamServiceName}-${appCount + 1}`
+        }
+      }
    }

    router.use(`/${streamServiceName}`, express.static(pathToDeployment))
@@ -47,7 +59,7 @@ export const publishAppStream = async (
      streamServiceName,
      appLoc,
      streamWebFolder,
-      undefined,
+      streamLogo,
      addEntryToFile
    )

@@ -56,7 +68,9 @@ export const publishAppStream = async (
      'Serving Stream App: ',
      `http://localhost:${sasJsPort}/AppStream/${streamServiceName}`
    )
+    return { streamServiceName }
  }
+  return {}
 }

 export default router
--- a/api/src/types/AppStreamConfig.ts
+++ b/api/src/types/AppStreamConfig.ts
@@ -2,6 +2,6 @@ export interface AppStreamConfig {
  [key: string]: {
    appLoc: string
    streamWebFolder: string
-    logo?: string
+    streamLogo?: string
  }
 }
--- a/api/src/utils/appStreamConfig.ts
+++ b/api/src/utils/appStreamConfig.ts
@@ -22,9 +22,15 @@ export const loadAppStreamConfig = async () => {
  process.appStreamConfig = {}

  for (const [streamServiceName, entry] of Object.entries(appStreamConfig)) {
-    const { appLoc, streamWebFolder } = entry
+    const { appLoc, streamWebFolder, streamLogo } = entry

-    publishAppStream(appLoc, streamWebFolder, streamServiceName, false)
+    publishAppStream(
+      appLoc,
+      streamWebFolder,
+      streamServiceName,
+      streamLogo,
+      false
+    )
  }

  console.log('App Stream Config loaded!')
@@ -34,14 +40,14 @@ export const addEntryToAppStreamConfig = (
  streamServiceName: string,
  appLoc: string,
  streamWebFolder: string,
-  logo?: string,
+  streamLogo?: string,
  addEntryToFile: boolean = true
 ) => {
  if (streamServiceName && appLoc && streamWebFolder) {
    process.appStreamConfig[streamServiceName] = {
      appLoc,
      streamWebFolder,
-      logo
+      streamLogo
    }
    if (addEntryToFile) saveAppStreamConfig()
  }
@@ -68,7 +74,7 @@ const saveAppStreamConfig = async () => {
 const isValidAppStreamConfig = (config: any) => {
  if (config) {
    return !Object.entries(config).some(([streamServiceName, entry]) => {
-      const { appLoc, streamWebFolder, logo } = entry as any
+      const { appLoc, streamWebFolder, streamLogo } = entry as any

      return (
        typeof streamServiceName !== 'string' ||
--- a/api/src/utils/validation.ts
+++ b/api/src/utils/validation.ts
@@ -73,6 +73,7 @@ export const deployValidation = (data: any): Joi.ValidationResult =>
    appLoc: Joi.string().pattern(/^\//).required().min(2),
    streamServiceName: Joi.string(),
    streamWebFolder: Joi.string(),
+    streamLogo: Joi.string(),
    fileTree: Joi.any().required()
  }).validate(data)

--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -66,11 +66,21 @@ const Header = (props: any) => {
          variant="contained"
          color="primary"
          size="large"
-          startIcon={<OpenInNewIcon />}
-          style={{ marginLeft: '50px' }}
+          endIcon={<OpenInNewIcon />}
        >
          API Docs
        </Button>
+        <Button
+          href={`${baseUrl}/AppStream`}
+          target="_blank"
+          rel="noreferrer"
+          variant="contained"
+          color="primary"
+          size="large"
+          endIcon={<OpenInNewIcon />}
+        >
+          App Stream
+        </Button>
      </Toolbar>
    </AppBar>
  )