Docker features (#31)

* feat: pragma app and port bindings * fix: docker pull, pragma app and small fixes
keep-starknet-strange · Aug 21, 2023 · fc804cb · fc804cb
1 parent e135d00
commit fc804cb
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 30 deletions.
diff --git a/config/apps.ts b/config/apps.ts
@@ -5,6 +5,7 @@ export type AppSettings = {
   type: 'plaintext' | 'secret';
   environmentName: string;
   required: boolean;
+  containerName: string;
 };
 
 export type CommonAppProperties = {
@@ -114,7 +115,7 @@ const APPS_CONFIG: { apps: (BinaryAppProperties | DockerAppProperties)[] } = {
       configParams: {},
       containers: [
         {
-          Image: 'quay.io/apibara/starknet:1.1.0',
+          Image: 'quay.io/apibara/starknet:1.0',
           Cmd: [
             'start',
             '--data=/data',
@@ -135,7 +136,7 @@ const APPS_CONFIG: { apps: (BinaryAppProperties | DockerAppProperties)[] } = {
       showFrontend: false,
       frontendUrl: 'http://localhost:80',
       logoUrl:
-        'https://pbs.twimg.com/profile_images/1632841549225635841/pRDUFNkT_400x400.png',
+        'https://pbs.twimg.com/profile_images/1551145433547825159/on1AZ7qW_400x400.jpg',
       postInstallationCommands: [],
       markdownDocsUrl:
         'https://raw.githubusercontent.com/keep-starknet-strange/madara/main/README.md',
@@ -162,29 +163,53 @@ const APPS_CONFIG: { apps: (BinaryAppProperties | DockerAppProperties)[] } = {
             ],
           },
         },
+        {
+          Image: 'apoorvsadana/pragma_publish',
+          Cmd: [],
+          name: 'pragma-publish',
+        },
+        {
+          Image: 'apoorvsadana/pragma_explorer',
+          Cmd: [],
+          name: 'pragma-explorer',
+          HostConfig: {
+            PortBindings: {
+              '3000/tcp': [
+                {
+                  HostPort: '3131',
+                },
+              ],
+            },
+          },
+        },
       ],
-      showFrontend: false,
-      frontendUrl: 'http://localhost:80',
+      showFrontend: true,
+      frontendUrl: 'http://localhost:3131',
       logoUrl:
-        'https://pbs.twimg.com/profile_images/1632841549225635841/pRDUFNkT_400x400.png',
-      postInstallationCommands: [],
+        'https://pbs.twimg.com/profile_images/1660624429632585728/XHGqaFAP_400x400.jpg',
+      postInstallationCommands: [
+        'curl -O https://raw.githubusercontent.com/apoorvsadana/storage/main/pragma_price_dump.js',
+      ],
       settings: [
         {
           name: 'Supabase Url',
           type: 'plaintext',
-          environmentName: 'SUPABASE_URL',
+          environmentName: 'NEXT_PUBLIC_SUPABASE_URL',
+          containerName: 'pragma-explorer',
           required: true,
         },
         {
           name: 'Supabase Anon Key',
           type: 'secret',
-          environmentName: 'SUPABASE_ANON_KEY',
+          environmentName: 'NEXT_PUBLIC_SUPABASE_ANON_KEY',
+          containerName: 'pragma-explorer',
           required: true,
         },
         {
           name: 'Postgres Connection String',
           type: 'plaintext',
           environmentName: 'POSTGRES_CONNECTION_STRING',
+          containerName: 'apibara-sink-postgres',
           required: true,
         },
       ],

diff --git a/src/main/madara-app.ts b/src/main/madara-app.ts
@@ -46,7 +46,14 @@ async function downloadAppDocker(
   const containerPulls = appConfig.containers.map((container) => {
     return docker.pull(container.Image as string);
   });
-  await Promise.all(containerPulls);
+  const pullStreams = await Promise.all(containerPulls);
+  const progressPromises = pullStreams.map(
+    (stream) =>
+      new Promise((resolve) => {
+        docker.modem.followProgress(stream, resolve);
+      })
+  );
+  await Promise.all(progressPromises);
 
   // create the app folder, this will store the settings
   // and is also used to detect installed apps
@@ -121,17 +128,32 @@ async function startContainer(
   );
   const Env = containerConfigParsed.Env ?? [];
   const appSettings = await getAppSettings(appConfig.id);
-  Object.entries(appSettings).forEach(([key, value]) =>
-    Env.push(`${key}=${value}`)
-  );
-  const container = await docker.createContainer({
+
+  if (appConfig.settings !== undefined) {
+    appConfig.settings.forEach((setting) => {
+      if (appSettings[setting.environmentName] !== undefined) {
+        Env.push(
+          `${setting.environmentName}=${appSettings[setting.environmentName]}`
+        );
+      }
+    });
+  }
+
+  const containerCreateOptions: ContainerCreateOptions = {
     ...containerConfigParsed,
     Env,
     AttachStdout: true,
     AttachStdin: true,
     AttachStderr: true,
     name: getContainerName(containerConfigParsed, appConfig),
-  });
+  };
+  if (appConfig.bind) {
+    containerCreateOptions.HostConfig = containerCreateOptions.HostConfig ?? {};
+    containerCreateOptions.HostConfig.Binds = [
+      `${APPS_FOLDER}/${appConfig.id}:/data`,
+    ];
+  }
+  const container = await docker.createContainer(containerCreateOptions);
   // create a write stream
 
   container.attach(

diff --git a/src/renderer/features/appsSlice.ts b/src/renderer/features/appsSlice.ts
@@ -36,10 +36,13 @@ export const appsSlice = createSlice({
       state.appLogs[data.payload.appId][data.payload.containerName] +=
         data.payload.logs;
     },
+    clearAppLogs: (state, data) => {
+      state.appLogs[data.payload.appId] = {};
+    },
   },
 });
 
-export const { setInstalledApps, setRunningApps, appendAppLogs } =
+export const { setInstalledApps, setRunningApps, appendAppLogs, clearAppLogs } =
   appsSlice.actions;
 
 export const selectInstalledApps = (state: any): InstalledApps =>
@@ -86,9 +89,12 @@ window.electron.ipcRenderer.madaraApp.onAppStart(
 );
 
 window.electron.ipcRenderer.madaraApp.onAppStop(
-  (event: any, data: { appId: string }) =>
+  (event: any, data: { appId: string }) => {
     // @ts-ignore
-    getStore().dispatch(updateAppRunningStatus(data.appId, false))
+    getStore().dispatch(updateAppRunningStatus(data.appId, false));
+    // @ts-ignore
+    getStore().dispatch(clearAppLogs({ appId: data.appId }));
+  }
 );
 
 // listener to add logs for apps

diff --git a/src/renderer/features/nodeSlice.ts b/src/renderer/features/nodeSlice.ts
@@ -27,7 +27,7 @@ const initialState = {
     RPCPort: '9944',
     telemetryURL: 'wss://telemetry.madara.zone/submit 0',
     bootnodes: '',
-    testnet: 'sharingan',
+    testnet: '',
     name: '',
     release: 'v0.1.0.experimental.3',
     developmentMode: 'false',

diff --git a/src/renderer/pages/AppLogs.tsx b/src/renderer/pages/AppLogs.tsx
@@ -31,12 +31,12 @@ const TabsContainer = styled.div`
   flex-direction: row;
   align-items: center;
   background-color: black;
-  height: 4vh;
+  height: 3vh;
 `;
 
 const Tab = styled.div`
   width: 25%;
-  font-size: 1rem;
+  font-size: 0.9rem;
   padding-top: 5px;
   padding-bottom: 5px;
   border-right: 1px solid #222;

diff --git a/src/renderer/pages/Apps.tsx b/src/renderer/pages/Apps.tsx
@@ -126,9 +126,10 @@ export default function Apps() {
 
   const dispatch = useAppDispatch();
 
-  const handleAppDownload = (appId: string) => {
+  const handleAppDownload = async (appId: string) => {
     setLoading({ ...loading, [appId]: true });
-    window.electron.ipcRenderer.madaraApp.download(appId);
+    await window.electron.ipcRenderer.madaraApp.download(appId);
+    setLoading({ ...loading, [appId]: false });
   };
 
   const handleAppStart = async (appId: string) => {
@@ -147,7 +148,9 @@ export default function Apps() {
       }
     }
 
-    window.electron.ipcRenderer.madaraApp.startApp(appId);
+    setLoading({ ...loading, [appId]: true });
+    await window.electron.ipcRenderer.madaraApp.startApp(appId);
+    setLoading({ ...loading, [appId]: false });
   };
 
   const handleAppStop = (appId: string) => {
@@ -221,13 +224,17 @@ export default function Apps() {
               </>
             );
           } else if (installedApps[app.id]) {
-            appRightJsx = (
-              <FontAwesomeIcon
-                onClick={() => handleAppStart(app.id)}
-                icon={faPlay}
-                style={{ cursor: 'pointer' }}
-              />
-            );
+            if (loading[app.id]) {
+              appRightJsx = <Loader />;
+            } else {
+              appRightJsx = (
+                <FontAwesomeIcon
+                  onClick={() => handleAppStart(app.id)}
+                  icon={faPlay}
+                  style={{ cursor: 'pointer' }}
+                />
+              );
+            }
           } else if (loading[app.id]) {
             appRightJsx = <Loader />;
           } else {