Ci package support

apps/assets-overview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assets-overview",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "UI-Team",
   "contributors": [
     "Andreas Pfau",
@@ -48,7 +48,7 @@
     "url-state-provider": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
     "url-state-router": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
     "util": "^0.12.4",
-    "utils": "https://assets.juno.global.cloud.sap/libs/[email protected].6/package.tgz",
+    "utils": "https://assets.juno.qa-de-1.cloud.sap/libs/[email protected].8/package.tgz",
     "zustand": "4.3.7"
   },
   "scripts": {
@@ -68,7 +68,7 @@
     "react-dom": "18.2.0",
     "url-state-provider": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
     "url-state-router": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
-    "utils": "https://assets.juno.global.cloud.sap/libs/[email protected].6/package.tgz",
+    "utils": "https://assets.juno.qa-de-1.cloud.sap/libs/[email protected].8/package.tgz",
     "zustand": "4.3.7"
   },
   "appProps": {

apps/assets-overview/src/components/AppContent.jsx

@@ -55,20 +55,22 @@ const AppContent = (props) => {
     }
   }, [data])
 
-  const [globals, apps, libs] = useMemo(() => {
+  const [globals, apps, libs, packages] = useMemo(() => {
     if (!data) return [null, null, null]
 
     let { _global, ...assets } = data
     const apps = {}
     const libs = {}
+    const packages = {}
 
     for (const [name, versions] of Object.entries(assets)) {
       const type = versions["latest"]?.type
       if (type === "app") apps[name] = assets[name]
       else if (type === "lib") libs[name] = assets[name]
+      else if (type === "package") packages[name] = assets[name]
     }
 
-    return [_global, apps, libs]
+    return [_global, apps, libs, packages]
   }, [data])
 
   // wait until the global state is set to fetch the url state
@@ -97,6 +99,7 @@ const AppContent = (props) => {
           <Tab>Documentation</Tab>
           <Tab>Apps</Tab>
           <Tab>Libs</Tab>
+          <Tab>Packages</Tab>
           {globals?.assetsBuildLog && <Tab>Build Log</Tab>}
         </TabList>
         <TabPanel>
@@ -126,6 +129,15 @@ const AppContent = (props) => {
             />
           </TabContainer>
         </TabPanel>
+        <TabPanel>
+          <TabContainer>
+            <AssetsList
+              isLoading={isReallyLoading}
+              assets={packages}
+              error={error}
+            />
+          </TabContainer>
+        </TabPanel>
         {globals?.assetsBuildLog && (
           <TabPanel>
             <TabContainer>

apps/assets-overview/src/components/AssetDetails.js

@@ -25,7 +25,7 @@ import useStore from "../store"
 import { currentState, push, onGlobalChange } from "url-state-provider"
 import { useQuery } from "@tanstack/react-query"
 import { fetchAssetsManifest } from "../actions"
-import { APP } from "../helpers"
+import { APP, PACKAGE } from "../helpers"
 import { MessagesProvider } from "messages-provider"
 import { compareVersions } from "../helpers"
 
@@ -236,7 +236,8 @@ const AssetDetails = () => {
                   <Tab>Readme</Tab>
                   {asset?.communicatorReadme && <Tab>Communication</Tab>}
                   {asset?.type === APP && <Tab>Get started</Tab>}
-                  {asset?.type === APP && <Tab>Preview</Tab>}
+                  {(asset?.type === APP || asset?.type === PACKAGE) &&
+                    asset?.appPreview && <Tab>Preview</Tab>}
                   <Tab>Advance</Tab>
                 </TabList>
                 <TabPanel>
@@ -258,13 +259,14 @@ const AssetDetails = () => {
                     />
                   </TabPanel>
                 )}
-                {asset?.type === APP && (
-                  <TabPanel>
-                    <MessagesProvider>
-                      <TabPreview asset={asset} />
-                    </MessagesProvider>
-                  </TabPanel>
-                )}
+                {(asset?.type === APP || asset?.type === PACKAGE) &&
+                  asset?.appPreview && (
+                    <TabPanel>
+                      <MessagesProvider>
+                        <TabPreview asset={asset} />
+                      </MessagesProvider>
+                    </TabPanel>
+                  )}
                 <TabPanel>
                   <TabAdvanced asset={asset} />
                 </TabPanel>

apps/assets-overview/src/components/AssetsListItem.js

@@ -12,6 +12,7 @@ import { DateTime } from "luxon"
 const AssetsListItem = ({ name, versions }) => {
   const urlStateKey = useStore((state) => state.urlStateKey)
   const { latest, ...otherVersions } = versions || {}
+  console.log("===", latest)
   const olderVersions = React.useMemo(() => {
     const keys = Object.keys(otherVersions)
     const index = keys.indexOf(latest?.version)
@@ -49,7 +50,8 @@ const AssetsListItem = ({ name, versions }) => {
     })
   }, [urlStateKey, name, latest?.version])
 
-  latest.repository = "https://github.com/juno-project/juno"
+  latest.repository =
+    latest.repository || "https://github.com/juno-project/juno"
 
   return (
     <DataGridRow
@@ -63,6 +65,7 @@ const AssetsListItem = ({ name, versions }) => {
             {latest.kind === "juno-3rd-party" && <Pill pillValueLabel="3rd" />}
             {latest.kind === "juno" && <Pill pillValueLabel="Juno" />}
           </Stack>
+          <span className="text-xs text-theme-light">{latest.repository}</span>
           {latest.author && (
             <span className="text-xs text-theme-light">
               powered by {latest.author}{" "}

apps/assets-overview/src/components/details/TabPreview.jsx

@@ -28,6 +28,7 @@ const TabPreview = ({ asset }) => {
 
   const config = useMemo(() => {
     if (!asset || !appProps) return
+
     return {
       name: asset?.name,
       version: asset?.version,

apps/assets-overview/src/helpers.js

@@ -5,6 +5,7 @@
 
 export const APP = "app"
 export const LIB = "lib"
+export const PACKAGE = "package"
 
 export const parseError = (error) => {
   let errMsg = JSON.stringify(error)

apps/user-activity/package.json

@@ -25,6 +25,7 @@
     "babel-jest": "^29.3.1",
     "babel-plugin-transform-import-meta": "^2.2.0",
     "communicator": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
+    "esbuild": "^0.21.5",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "postcss": "^8.4.21",

apps/volta/package.json

@@ -28,6 +28,7 @@
     "babel-jest": "^29.3.1",
     "babel-plugin-transform-import-meta": "^2.2.0",
     "communicator": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
+    "esbuild": "^0.21.5",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "juno-ui-components": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",

apps/whois/package.json

@@ -27,6 +27,7 @@
     "babel-plugin-transform-import-meta": "^2.2.0",
     "cidr-regex": "^3.1.1",
     "communicator": "https://assets.juno.global.cloud.sap/libs/[email protected]/package.tgz",
+    "esbuild": "^0.21.5",
     "ip-regex": "^5.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",

apps/widget-loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "widget-loader",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "author": "UI-Team",
   "contributors": [
     "Andreas Pfau"
@@ -17,6 +17,7 @@
     "test": "jest"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.24.7",
     "babel-jest": "^29.3.1",
     "custom-event-polyfill": "^1.0.7",
     "esbuild": "^0.17.8",

apps/widget-loader/public/index.html

@@ -46,13 +46,7 @@
       data-name="dashboard"
       data-version="latest"
     ></script> -->
-    <script
-      defer
-      src="./build/app.js"
-      data-debug="false"
-      data-origin="https://assets.juno.qa-de-1.cloud.sap"
-      data-importmap-only="true"
-    ></script>
+
     <script
       defer
       src="./build/app.js"
@@ -67,7 +61,6 @@
       src="./build/app.js"
       data-origin="https://assets.juno.qa-de-1.cloud.sap"
       data-name="whois"
-      data-version="=3.0.2"
       data-debug="true"
     ></script>
 

apps/widget-loader/src/index.js

@@ -144,9 +144,10 @@ const ESM_SHIM_URL = "/externals/[email protected]/dist/es-module-shims.js"
     // else the version is not changed
   }
 
+  const importmapAppName = name?.startsWith("@") ? name : `@juno/${name}`
   // get the app URL
   // from given url or from importmap based on name and version
-  let appURL = url || importmap.imports[`@juno/${name}@${version}`]
+  let appURL = url || importmap.imports[`${importmapAppName}@${version}`]
 
   // get app props from the data-props-* arguments
   let appProps = { currentHost: new URL(appURL).href }

ci/Dockerfile.assets.server

@@ -42,13 +42,39 @@ COPY --from=lastbuild /usr/share/nginx/html /tmp/final
 
 # merge latest assets over the old assets 
 RUN \
-  for PACKAGE in ./**/*/package.json; do \
+  # Set the base directory
+  base_dir=$(pwd); \
+  package_files=$(find "$base_dir" -type f -name 'package.json' \( -path "$base_dir/apps/*" -o -path "$base_dir/libs/*" -o -path "$base_dir/packages/*" \)); \
+  for PACKAGE in $package_files; do \
+  # the path is something like ./libs/[email protected]
+  # or ./packages/cloudoperators/[email protected]
+  # get the name@version part like [email protected]
+  path_name_version=$(basename "$(dirname "$PACKAGE")"); \
+  # get only the name without the version
+  path_name="${path_name_version%@*}"; \
+  # get the parent folder of the package
+  package_parent_folder=$(dirname $(dirname "$PACKAGE")); \
+  # package_folder contains the folder path of the package and the name
+  package_folder="$package_parent_folder/$path_name"; \
+  # get package dir for package.json
+  # get name from package.json
   NAME=$(jq -r .name $PACKAGE); \
+  # remove @ from name
+  NAME="${NAME#@}"; \
+  # get version from package.json
   VERSION=$(jq -r .version $PACKAGE); \
-  # dir is something like ./libs/[email protected]
+  # get package content dir
   DIR=$(dirname $PACKAGE); \
-  # asset path is then ./libs
-  ASSET_PATH=$(dirname $DIR); \
+  # normalize the path, remove the name from the path
+  # for example: if the package path is ./packages/cloudoperators/[email protected] and
+  # the name is @cloudoperators/test then the package dir is ./packages/cloudoperators/
+  PACKAGE_PATH="${package_folder%"$NAME"}"; \
+  ASSET_PATH="${PACKAGE_PATH#$base_dir/}"; \
+  ASSET_PATH="${ASSET_PATH%/}"; \
+  # dir is something like ./libs/[email protected]
+  echo "============"; \
+  echo "DIR: $DIR"; \
+  echo "ASSET_PATH: $ASSET_PATH"; \
   rm -rf /tmp/final/$DIR; \
   rm -rf /tmp/final/$ASSET_PATH/$NAME@$VERSION; \
   rm -rf /tmp/final/$ASSET_PATH/$NAME@latest; \
@@ -98,8 +124,8 @@ RUN \
 # /tmp/final/manifest.json
 
 # Check the integrity of the file structure
-RUN chmod +x /juno/ci/scripts/check_file_integrity.sh && \
-  /juno/ci/scripts/check_file_integrity.sh global apps libs assets externals index.html mount-test.html manifest.json importmap.json
+RUN chmod +x /juno/ci/scripts/check_file_integrity.sh && pwd && ls -la && \
+  /juno/ci/scripts/check_file_integrity.sh global apps libs packages assets externals index.html mount-test.html manifest.json importmap.json
 
 # create self signed dummy certificate and key
 RUN apk add openssl ; openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 \

ci/Dockerfile.base

@@ -19,7 +19,7 @@ LABEL source_repository="https://github.com/sapcc/juno"
 RUN npm i -g npm@latest
 
 RUN apk --no-cache add git ca-certificates rsync jq bash
-RUN npm i -g glob
+RUN npm i -g glob semver
 
 RUN mkdir -p "/juno"
 ADD . /juno 

ci/Dockerfile.ui.storybook

@@ -1,20 +1,15 @@
-FROM keppel.eu-de-1.cloud.sap/ccloud/juno-v3-base:latest AS base 
+FROM keppel.eu-de-1.cloud.sap/ccloud-dockerhub-mirror/library/node:20-alpine
+WORKDIR /app
 
 RUN \
-  cd /juno ; \
+  cd libs/juno-ui-components && \
   npm --workspace juno-ui-components install 1>/dev/null && \
   npm --workspace juno-ui-components run build-storybook 1>/dev/null 
 
-FROM keppel.eu-de-1.cloud.sap/ccloud-dockerhub-mirror/library/node:18-alpine
 LABEL source_repository="https://github.com/sapcc/juno/libs/juno-ui-components"
 
 RUN apk --no-cache add ca-certificates && npm install -g http-server
 
-# create working dir
-RUN mkdir -p /app
-WORKDIR /app
-
-COPY --from=base /juno/libs/juno-ui-components/storybook-static "/app"
 RUN ls -la
 
 # run app

ci/helm-charts/assets_server/templates/deployment.yaml

@@ -31,7 +31,7 @@ spec:
       terminationGracePeriodSeconds: 60
       containers:
         - name: server
-          image: "{{ .Values.global.registry }}/juno-v3-assets-server:{{.Values.image.tag}}"
+          image: "{{ .Values.global.registry }}/juno-v4-assets-server:{{.Values.image.tag}}"
           imagePullPolicy: IfNotPresent
           ports:
             - name: http