Feature and Bugfix Release

- Feature: Adding "Create Virtual Server" Configuration UI
- Feature: Display Protocol next to the exposed Port in Instances overview
- Feature: Create virtual Servers using the Configuration UI
- Feature: Allow editing all included configuration files. Not limited to /etc/nginx/conf.d/ anymore

Author: Timo Stark

Makefile

@@ -10,7 +10,7 @@ build-extension: ## Build service image to be deployed as a desktop extension
 	docker build --tag=$(IMAGE):$(TAG) .
 
 remove-extension:
-    docker extension remove $(IMAGE):$(TAG)
+	docker extension remove $(IMAGE):$(TAG)
 
 install-extension: build-extension ## Install the extension
 	docker extension install $(IMAGE):$(TAG)
@@ -24,6 +24,9 @@ prepare-buildx: ## Create buildx builder for multi-arch build, if not exists
 push-extension: prepare-buildx ## Build & Upload extension image to hub. Do not push if tag already exists: make push-extension tag=0.1
 	docker pull $(IMAGE):$(TAG) && echo "Failure: Tag already exists" || docker buildx build --push --builder=$(BUILDER) --platform=linux/amd64,linux/arm64 --build-arg TAG=$(TAG) --tag=$(IMAGE):$(TAG) .
 
+devel: ## Start Docker Extension in Dev mode
+	docker extension dev debug $(IMAGE):$(TAG) && docker extension dev ui-source $(IMAGE):$(TAG) http://localhost:3000
+
 help: ## Show this help
 	@echo Please specify a build target. The choices are:
 	@grep -E '^[0-9a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "$(INFO_COLOR)%-30s$(NO_COLOR) %s\n", $$1, $$2}'

ui/src/configuration/ConfigurationCreator.ts

@@ -0,0 +1,13 @@
+import {ConfigurationTemplates} from "./ConfigurationTemplates";
+
+
+export class ConfigurationCreator {
+
+    public simpleProxyConfiguration(serverName: string, port: string, upstream: string) {
+        let configurationString = ConfigurationTemplates.simpleProxyServerTemplate()
+        configurationString = configurationString.replace(/\$\$LISTEN/g, port)
+        configurationString = configurationString.replace(/\$\$SERVER_NAME/g, serverName)
+        configurationString = configurationString.replace(/\$\$UPSTREAM/g, `http://${upstream}/`)
+        return configurationString
+    }
+}

ui/src/configuration/ConfigurationTemplates.ts

@@ -0,0 +1,20 @@
+
+
+
+export class ConfigurationTemplates {
+
+    public static simpleProxyServerTemplate = () => {
+        return `
+server {
+  listen $$LISTEN;
+  server_name $$SERVER_NAME;
+  
+  location / {
+    proxy_pass $$UPSTREAM;
+    proxy_set_header Host $host;
+  }
+}
+`
+    }
+
+}

ui/src/configurationUI/ConfigurationUi.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from "react";
 import {ConfigurationUiService} from "./ConfigurationUiService";
 import {
     Box,
-    Chip,
+    Chip, Grid,
     IconButton,
     Paper,
     Slide,
@@ -83,8 +83,8 @@ export function ConfigurationUi(props: ConfigurationUiProps) {
     };
 
     const content = (
-        <Box
-            sx={{ width: "100%", height: "100vh" }}
+        <Grid
+            sx={{width: "100%", height: "100vh"}}
             style={{
                 position: "absolute",
                 top: "0",
@@ -95,22 +95,20 @@ export function ConfigurationUi(props: ConfigurationUiProps) {
                 backgroundColor: "transparent"
             }}
         >
-            <Box
+            <Grid
                 style={{
                     display: "flex",
                     width: "75%",
                     height: "100vh",
-                    borderLeft: "1px solid eee",
-                    boxShadow: "-3px 0px 5px rgb(0 0 0 / 20%)",
                     flexDirection: "column",
-                    backgroundColor: "primary.light",
                     alignItems: "flex-start"
                 }}
+                sx={{backgroundColor: "background.default",  borderLeft: "2px solid", borderColor: "primary.dark"}}
             >
                 <Close onClick={handleChangeServer} sx={{cursor: 'pointer'}} />
-                <Server/>
-            </Box>
-        </Box>
+                <Server nginxInstance={props.nginxInstance} />
+            </Grid>
+        </Grid>
     );
 
     const [locationSlide, setLocationSlide] = useState(false);
@@ -161,11 +159,11 @@ export function ConfigurationUi(props: ConfigurationUiProps) {
                     <TableHead>
                         <TableRow>
                             <TableCell color="text.secondary">Server
-                                {/*<Tooltip title="New Virtual Server">*/}
-                                {/*    <IconButton onClick={handleChangeServer} sx={{fontSize:"0.9rem"}}>*/}
-                                {/*        <Add/>*/}
-                                {/*    </IconButton>*/}
-                                {/*</Tooltip>*/}
+                                <Tooltip title="New Virtual Server">
+                                    <IconButton onClick={handleChangeServer} sx={{fontSize:"0.9rem"}}>
+                                        <Add/>
+                                    </IconButton>
+                                </Tooltip>
                             </TableCell>
                             <TableCell>Configuration File</TableCell>
                             <TableCell align="right">Ports</TableCell>

ui/src/configurationUI/ConfigurationUiService.ts

@@ -1,18 +1,41 @@
 import {InstancesService} from "../instances/InstancesService";
 import {ConfigurationParser} from "../configuration/ConfigurationParser";
+import {ConfigurationCreator} from "../configuration/ConfigurationCreator";
+import {Base64} from "js-base64";
 
 
 export class ConfigurationUiService {
 
     private instanceService: InstancesService;
     private configurationParser: ConfigurationParser;
+    private configurationCreator: ConfigurationCreator;
+
     constructor() {
         this.instanceService = new InstancesService();
         this.configurationParser = new ConfigurationParser();
+        this.configurationCreator = new ConfigurationCreator();
+
     }
 
     async getConfiguration(containerId: string) {
         const config = await this.instanceService.getInstanceConfiguration(containerId);
         return this.configurationParser.parse(config);
     }
+
+    createNewServerConfiguration(serverConfiguration: any, containerId: any) {
+        console.log(serverConfiguration)
+        let configTemplate = this.configurationCreator.simpleProxyConfiguration(serverConfiguration.serverName,
+            serverConfiguration.listeners,
+            serverConfiguration.upstream);
+        console.log(configTemplate)
+        const content = Base64.encode(configTemplate)
+        this.instanceService.sendConfigurationToFile(serverConfiguration.file, containerId, content).then((data: any) => {
+            this.instanceService.reloadNGINX(containerId).then((data: any) => {
+                this.instanceService.displaySuccessMessage("Configuration successfully updated!");
+            }).catch((reason: any) => {
+                this.instanceService.displayErrorMessage(`Error while updating configuration: ${reason.stderr.split("\n")[1]}`);
+            })
+        })
+        return configTemplate
+    }
 }