Merge remote-tracking branch 'upstream/master' into dry-run-start

artukryp · Mar 28, 2022 · d253f6e · d253f6e
2 parents 4e1ccc9 + 14c4ee4
commit d253f6e
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 87 deletions.
diff --git a/.github/workflows/build-and-release-dde.yml b/.github/workflows/build-and-release-dde.yml
@@ -59,9 +59,9 @@ jobs:
         name: Build and Push 
         uses: docker/build-push-action@v2
         with:
+          platforms: linux/amd64
           context: "{{defaultContext}}:install/docker-desktop-extension"
           push: true
-          platforms: linux/amd64,linux/arm64,linux/386
           tags: ${{ steps.meta.outputs.tags }}     
 
       - 

diff --git a/install/docker-desktop-extension/Dockerfile b/install/docker-desktop-extension/Dockerfile
@@ -3,6 +3,7 @@ ENV CGO_ENABLED=0
 RUN apk add --update make
 WORKDIR /backend
 COPY go.* .
+ARG TARGETARCH
 RUN --mount=type=cache,target=/go/pkg/mod \
     --mount=type=cache,target=/root/.cache/go-build \
     go mod download
@@ -16,6 +17,7 @@ WORKDIR /ui
 # cache packages in layer
 COPY ui/package.json /ui/package.json
 COPY ui/package-lock.json /ui/package-lock.json
+ARG TARGETARCH
 RUN --mount=type=cache,target=/usr/src/app/.npm \
     npm set cache /usr/src/app/.npm && \
     npm ci
@@ -24,13 +26,23 @@ COPY ui /ui
 RUN npm run build
 
 FROM alpine
+ARG GIT_VERSION
+ARG GIT_STRIPPED_VERSION
 LABEL org.opencontainers.image.title="meshery" \
     org.opencontainers.image.description="Meshery" \
     org.opencontainers.image.vendor="Layer5, Inc." \
     com.docker.desktop.extension.api.version=">= 0.2.0"
 COPY --from=builder /backend/bin/service /
 COPY docker-compose.yaml .
 COPY metadata.json .
+RUN mkdir -p /mesheryctl/darwin && mkdir -p /mesheryctl/windows && mkdir -p /mesheryctl/linux
+ADD https://github.com/meshery/meshery/releases/download/$GIT_VERSION/mesheryctl_${GIT_STRIPPED_VERSION}_Darwin_x86_64.zip /mesheryctl/darwin/
+# ADD https://github.com/meshery/meshery/releases/download/$GIT_VERSION/mesheryctl_${GIT_STRIPPED_VERSION}_Darwin_arm64.zip /mesheryctl/darwin/
+ADD https://github.com/meshery/meshery/releases/download/$GIT_VERSION/mesheryctl_${GIT_STRIPPED_VERSION}_Windows_x86_64.zip /mesheryctl/windows/
+ADD https://github.com/meshery/meshery/releases/download/$GIT_VERSION/mesheryctl_${GIT_STRIPPED_VERSION}_Linux_x86_64.zip /mesheryctl/linux/
+RUN unzip /mesheryctl/darwin/mesheryctl_${GIT_STRIPPED_VERSION}_Darwin_x86_64.zip -d /mesheryctl/darwin/
+RUN unzip /mesheryctl/windows/mesheryctl_${GIT_STRIPPED_VERSION}_Windows_x86_64.zip -d /mesheryctl/windows/
+RUN unzip /mesheryctl/linux/mesheryctl_${GIT_STRIPPED_VERSION}_Linux_x86_64.zip -d /mesheryctl/linux/
 COPY meshery-logo-light.svg .
 COPY --from=client-builder /ui/build ui
 CMD /service -socket /run/guest-services/extension-meshery.sock
diff --git a/install/docker-desktop-extension/Makefile b/install/docker-desktop-extension/Makefile
@@ -6,6 +6,8 @@ STATIC_FLAGS=CGO_ENABLED=0
 LDFLAGS="-s -w"
 GO_BUILD=$(STATIC_FLAGS) go build -trimpath -ldflags=$(LDFLAGS)
 
+GIT_VERSION=$(shell git describe --tags `git rev-list --tags --max-count=1`)
+GIT_STRIPPED_VERSION=$(shell git describe --tags `git rev-list --tags --max-count=1` | cut -c 2-)
 INFO_COLOR = \033[0;36m
 NO_COLOR   = \033[m
 
@@ -14,7 +16,7 @@ bin: ## Build the binary for the current platform
 	$(GO_BUILD) -o bin/service ./vm
 
 extension: ## Build service image to be deployed as a desktop extension
-	docker build --tag=$(IMAGE) .
+	docker build --tag=$(IMAGE) --build-arg GIT_VERSION=$(GIT_VERSION) --build-arg GIT_STRIPPED_VERSION=$(GIT_STRIPPED_VERSION) .
 
 prepare-buildx: ## Create buildx builder for multi-arch build, if not exists
 	docker buildx inspect $(BUILDER) || docker buildx create --name=$(BUILDER) --driver=docker-container --driver-opt=network=host

diff --git a/install/docker-desktop-extension/metadata.json b/install/docker-desktop-extension/metadata.json
@@ -17,5 +17,26 @@
         "socket": "extension-meshery.sock"
       }
     }
+  },
+  "host": {
+    "binaries": [
+      {
+        "darwin": [
+          {
+            "path": "/mesheryctl/darwin/mesheryctl"
+          }
+        ],
+        "windows": [
+          {
+            "path": "/mesheryctl/windows/mesheryctl.exe"
+          }
+        ],
+        "linux": [
+          {
+            "path": "/mesheryctl/linux/mesheryctl"
+          }
+        ]
+      }
+    ]
   }
 }
diff --git a/install/docker-desktop-extension/ui/src/components/ExtensionComponent.js b/install/docker-desktop-extension/ui/src/components/ExtensionComponent.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core/styles";
 import { NoSsr, Typography, Grid, Link } from "@material-ui/core";
@@ -7,14 +7,15 @@ import MesheryLogo from "../img/meshery-logo/meshery-logo.svg";
 import { makeStyles } from "@material-ui/core/styles";
 import {
   Container,
-  Button, Paper
+  Button, Paper, Switch
 } from "@material-ui/core";
-import TwitterIcon from '@material-ui/icons/Twitter';
-import GitHubIcon from '@material-ui/icons/GitHub';
-import LinkedInIcon from '@material-ui/icons/LinkedIn';
-import GoogleIcon from "../img/SVGs/googleIcon";
+import ConsulIcon from "../img/SVGs/consulIcon";
+import IstioIcon from "../img/SVGs/IstioIcon";
+import KumaIcon from "../img/SVGs/kumaIcon";
+import LinkerdIcon from "../img/SVGs/linkerdIcon";
+import NginxIcon from "../img/SVGs/nginxIcon";
 import MesheryIcon from "../img/meshery-logo/CustomMesheryLogo";
-
+import { CustomTypography } from "./CustomTypography";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -26,8 +27,12 @@ const useStyles = makeStyles((theme) => ({
   main: {
     margin: theme.spacing(5),
     backgroundColor: "#393F49",
-    borderRadius: "5px ",
-    padding: "1rem"
+    borderRadius: "20px ",
+    padding: "1rem",
+    height: "300px",
+    [theme.breakpoints.down("xs")]: {
+      height: "400px",
+    },
   },
   paper: {
     padding: theme.spacing(1.5),
@@ -40,61 +45,110 @@ const useStyles = makeStyles((theme) => ({
     padding: "2rem",
 
   },
+  serviceMeshAdapters: {
+    width: "50%",
+    float: "right",
+    [theme.breakpoints.down("xs")]: {
+      width: "100%"
+    }
+  },
+  account: {
+    width: "50%",
+    float: "left",
+  },
+  sm: {
+    width: "16%",
+    float: "left",
+    flexDirection: "row",
+    padding: "0.3rem"
+  },
+  subText: {
+    color: "#AAAAAA",
+    padding: "0.7rem"
+  },
+  headText: {
+    maxWidth: "60%",
+    margin: "auto",
+    padding: "1rem"
+  },
   button: {
     padding: "0.5rem"
   },
-
+  inactiveAdapter: {
+    filter: "grayscale(1) invert(0.35)"
+  },
+  mesheryConfig: {
+    backgroundColor: "#7794AB",
+    color: "#FFFFFF",
+  },
   Icon: {
     width: theme.spacing(2.5),
     paddingRight: theme.spacing(0.5),
   },
 }));
 
 const ExtensionsComponent = props => {
-
+  const [consulChecked, isConsulChecked] = useState(true);
+  const [istioChecked, isIstioChecked] = useState(false);
+  const [linkerdChecked, isLinkerdChecked] = useState(false);
+  const [nginxChecked, isNginxChecked] = useState(false);
+  const [kumaChecked, isKumaChecked] = useState(false);
   const classes = useStyles();
 
+  // Wrote separate functions since we need these functions to provision the adapters as well
+  const handleConsul = () => {
+    isConsulChecked(prev => !prev);
+  }
+  const handleIstio = () => {
+    isIstioChecked(prev => !prev);
+  }
+  const handleLinkerd = () => {
+    isLinkerdChecked(prev => !prev);
+  }
+  const handleNginx = () => {
+    isNginxChecked(prev => !prev);
+  }
+  const handleKuma = () => {
+    isKumaChecked(prev => !prev);
+  }
+
+
   return (
     <div className={classes.root}>
-
+    <MesheryIcon />
+    <CustomTypography className={classes.headText}>Design and operate your cloud native deployments with the extensible management plane, Meshery.</CustomTypography>
       <div className={classes.main}>
-        <MesheryIcon />
-
+
+      <CustomTypography variant="h6" className={classes.subText}>
+                        CONFIGURE YOUR MESHERY DEPLOYMENT
+                    </CustomTypography>
         <div className={classes.OAuth}>
+          <div className={classes.account}>
+          <CustomTypography Style="margin-bottom:2rem">Account</CustomTypography>
+          <div><Button className={classes.mesheryConfig} variant="contained">Open Meshery</Button></div>
+          </div>
           <Grid justify="center">
-            <Grid >
-              <div className={classes.button}>
-                <Button style={{ backgroundColor: "#55acee" }}
-                  className={classes.paper}>
-                  <TwitterIcon className={classes.Icon} />
-                  SIGN IN WITH TWITTER
-                </Button>
-              </div>
-            </Grid>
-            <Grid >
-              <div className={classes.button}>
-                <Button style={{ backgroundColor: "#444" }} className={classes.paper}>
-                  <GitHubIcon className={classes.Icon} />
-                  SIGN IN WITH GITHUB
-                </Button>
-              </div>
-            </Grid>
-            <Grid item xs>
-              <div className={classes.button}>
-                <Button style={{ backgroundColor: "#DD4B39" }} className={classes.paper}>
-                  <div className={classes.Icon}> <GoogleIcon width={18} height={22} /></div>
-                  SIGN IN WITH GOOGLE
-                </Button>
-              </div>
-            </Grid>
-            <Grid item xs>
-              <div className={classes.button}>
-                <Button style={{ backgroundColor: "#007bb6" }} className={classes.paper}>
-                  <LinkedInIcon className={classes.Icon} />
-                  SIGN IN WITH LINKEDIN
-                </Button>
-              </div>
-            </Grid>
+            <div className={classes.serviceMeshAdapters}> 
+            <CustomTypography Style="margin-bottom:2rem">Deploy a Service Mesh</CustomTypography>
+            <div className={classes.sm}>
+            <div className={consulChecked ?   null : classes.inactiveAdapter }>
+
+        <ConsulIcon width={40} height={40}  /> </div>
+          <Switch onChange={handleConsul} color="primary" defaultChecked></Switch>
+          </div>
+          <div className={classes.sm}>
+          <div className={istioChecked ? null : classes.inactiveAdapter }>
+            <IstioIcon width={40} height={40} /></div>
+          <Switch onChange={handleIstio} color="primary"></Switch></div>
+
+            <div className={classes.sm}>
+            <div className={linkerdChecked ? null : classes.inactiveAdapter }><LinkerdIcon width={40} height={40} /></div>
+              <Switch onChange={handleLinkerd} color="primary"></Switch></div>
+              <div className={classes.sm}>
+            <div className={nginxChecked ? null : classes.inactiveAdapter }><NginxIcon width={38} height={40} /></div><Switch onChange={handleNginx} color="primary"></Switch></div>
+            <div className={classes.sm}>
+            <div className={kumaChecked ? null : classes.inactiveAdapter }><KumaIcon width={40} height={40} /></div><Switch onChange={handleKuma} color="primary"></Switch></div>
+             </div> 
           </Grid>
         </div>
       </div>