Merge pull request #12 from MetaCell/feature/deployment

dev deployment setup

Dockerfile

@@ -0,0 +1,24 @@
+ARG NODE_PARENT=node:18
+
+FROM  ${NODE_PARENT} as frontend
+
+ENV BUILDDIR=/app
+
+WORKDIR ${BUILDDIR}
+COPY package.json ${BUILDDIR}
+COPY yarn.lock ${BUILDDIR}
+COPY nginx/default.conf ${BUILDDIR}
+
+RUN yarn install
+COPY . ${BUILDDIR}
+RUN yarn build
+
+FROM nginx:1.19.3-alpine
+
+RUN cat /etc/nginx/conf.d/default.conf
+
+COPY --from=frontend /app/default.conf  /etc/nginx/conf.d/default.conf
+
+COPY --from=frontend /app/dist /usr/share/nginx/html/
+
+EXPOSE 80

deploy/codefresh/codefresh.yml

@@ -0,0 +1,35 @@
+version: "1.0"
+stages:
+  - "clone"
+  - "build"
+  - "deploy"
+steps:
+  clone:
+    stage: "clone"
+    title: "Cloning SCKANNER"
+    type: "git-clone"
+    repo: "metacell/sckan-explorer"
+    revision: "${{CF_BRANCH}}"
+  build:
+    stage: "build"
+    title: "Building SCKANNER"
+    type: "build"
+    image_name: "sckanner"
+    tag: "${{CF_BUILD_ID}}"
+    dockerfile: Dockerfile
+    working_directory: ./sckan-explorer
+    buildkit: true    
+    registry: "${{CODEFRESH_REGISTRY}}"
+  deploy:
+    stage: "deploy"
+    title: "Deploying SCKANNER"
+    image: codefresh/kubectl
+    working_directory: ./sckan-explorer/deploy/k8s
+    commands:
+      - export CLUSTER_NAME="${{CLUSTER_NAME}}"
+      - export NAMESPACE="${{NAMESPACE}}"
+      - export CF_BUILD_ID
+      - export REGISTRY="${{REGISTRY}}/"
+      - export DOMAIN="${{DOMAIN}}"
+      - chmod +x ./deploy.sh
+      - ./deploy.sh

deploy/k8s/codefresh.yaml

@@ -0,0 +1,34 @@
+version: "1.0"
+stages:
+  - "clone"
+  - "build"
+  - "deploy"
+steps:
+  clone:
+    stage: "clone"
+    title: "Cloning SCKANNER"
+    type: "git-clone"
+    repo: "metacell/sckan-explorer"
+    revision: "${{CF_BRANCH}}"
+  build:
+    stage: "build"
+    title: "Building SCKANNER"
+    type: "build"
+    image_name: "sckanner"
+    tag: "${{CF_SHORT_REVISION}}"
+    dockerfile: Dockerfile
+    working_directory: ./sckan-explorer
+    buildkit: true    
+    registry: "${{CODEFRESH_REGISTRY}}"
+  deploy:
+    stage: "deploy"
+    title: "Deploying SCKANNER"
+    image: codefresh/cf-deploy-kubernetes
+    tag: latest
+    working_directory: ./sckan-explorer/deploy/k8s
+    commands:
+      - /cf-deploy-kubernetes sckanner.yaml
+      - /cf-deploy-kubernetes ingress.yaml
+    environment:
+      - KUBECONTEXT=${{CLUSTER_NAME}}
+      - KUBERNETES_NAMESPACE=${{NAMESPACE}}

deploy/k8s/deploy.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# set to the correct cluster context and namespace
+kubectl config use-context $CLUSTER_NAME
+kubectl config set-context $CLUSTER_NAME --namespace=$NAMESPACE
+
+# prep the yamls
+cp sckanner_tpl.yaml sckanner.yaml
+cp ingress_tpl.yaml ingress.yaml
+
+# sckanner service and deployment
+sed -ie 's/{{TAG}}/'$CF_BUILD_ID'/i' sckanner.yaml
+sed -ie 's|{{REGISTRY}}|'$REGISTRY'|i' sckanner.yaml
+kubectl apply -f sds_viewer.yaml
+
+# ingress
+sed -ie 's|{{DOMAIN}}|'$DOMAIN'|i' ingress.yaml
+kubectl apply -f ingress.yaml
+
+# cleanup
+rm -rf sckanner.yaml* ingress.yaml*

deploy/k8s/deploy_minikube.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+export CLUSTER_NAME=minikube
+export NAMESPACE=sckanner
+export CF_BUILD_ID=latest
+export REGISTRY=
+export DOMAIN=sckanner.local
+
+source ./deploy.sh

deploy/k8s/ingress.yaml

@@ -0,0 +1,39 @@
+apiVersion: cert-manager.io/v1
+kind: Issuer
+metadata:
+  name: 'letsencrypt-sckanner'
+spec:
+  acme:
+    server: https://acme-v02.api.letsencrypt.org/directory
+    email: [email protected]
+    privateKeySecretRef:
+      name: letsencrypt-sckanner
+    solvers:
+    - http01:
+        ingress:
+          class: nginx
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  annotations:
+    cert-manager.io/issuer: letsencrypt-sckanner
+    kubernetes.io/ingress.class: nginx
+    kubernetes.io/tls-acme: 'true'
+  name: sckanner-nginx-ingress
+spec:
+  rules:
+  - host: "{{DOMAIN}}"
+    http:
+      paths:
+      - backend:
+          service:
+            name: sckanner
+            port:
+              number: 80
+        path: /
+        pathType: ImplementationSpecific
+  tls:
+  - hosts:
+    - "{{DOMAIN}}"
+    secretName: sckanner-tls

deploy/k8s/sckanner.yaml

@@ -0,0 +1,57 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: sckanner
+spec:
+  selector:
+    matchLabels:
+      app: sckanner
+  replicas: 1
+  template:
+    metadata:
+      labels:
+        app: sckanner
+    spec:
+      containers:
+        - name: sckanner
+          image: "gcr.io/metacellllc/sckanner:{{CF_SHORT_REVISION}}"
+          imagePullPolicy: "IfNotPresent"
+          ports:
+            - containerPort: 80
+          livenessProbe:
+            failureThreshold: 3
+            httpGet:
+              path: /index.html
+              port: 80
+              scheme: HTTP
+            initialDelaySeconds: 45
+            periodSeconds: 30
+            timeoutSeconds: 2
+          readinessProbe:
+            failureThreshold: 3
+            httpGet:
+              path: /index.html
+              port: 80
+              scheme: HTTP
+            initialDelaySeconds: 15
+            periodSeconds: 30
+            timeoutSeconds: 2
+          resources:
+            limits:
+              cpu: 1500m
+              memory: 768Mi
+            requests:
+              cpu: 500m
+              memory: 768Mi
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: sckanner
+spec:
+  type: ClusterIP
+  ports:
+  - port: 80
+    targetPort: 80
+  selector:
+    app: sckanner

nginx/default.bak

@@ -0,0 +1,32 @@
+upstream sckanner {
+    server sckanner:8000;
+}
+
+server {
+    listen 80;
+
+    location / {
+        root   /usr/share/nginx/html/;
+        # index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    location /sckanner/ {
+        root   /usr/share/nginx/html/;
+        # index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    location ~* ^/(admin|api|logged-out|login|sckanner|complete|disconnect|__debug__)/.*$ {
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto https;
+        proxy_redirect off;
+        proxy_pass http://sckanner;
+    }
+
+    location /static/ {
+        autoindex on;
+        alias /usr/share/nginx/html/static/;
+    }
+}

nginx/default.conf

@@ -0,0 +1,32 @@
+upstream sckanner {
+    server sckanner:8000;
+}
+
+server {
+    listen 80;
+
+    location / {
+        root   /usr/share/nginx/html/;
+        # index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    location /sckanner/ {
+        root   /usr/share/nginx/html/;
+        # index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    location ~* ^/(admin|api|logged-out|login|sckanner|complete|disconnect|__debug__)/.*$ {
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto https;
+        proxy_redirect off;
+        proxy_pass http://sckanner;
+    }
+
+    location /static/ {
+        autoindex on;
+        alias /usr/share/nginx/html/static/;
+    }
+}

src/components/common/CommonChip.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Chip, { ChipProps } from '@mui/material/Chip';
 import {vars} from "../../theme/variables.ts";
 
-const { primarypurple500 } = vars
+const { primaryPurple500 } = vars
 
 interface CommonChipProps extends ChipProps {}
 
@@ -16,7 +16,7 @@ const CommonChip: React.FC<CommonChipProps> = ({ label, variant = "outlined", ic
       sx={{
         '& .MuiSvgIcon-root': {
           order: 1,
-          color: primarypurple500
+          color: primaryPurple500
         }
       }}
     />

src/components/graphDiagram/widgets/DestinationNodeWidget.tsx

@@ -15,10 +15,7 @@ interface DestinationNodeProps {
     engine: DiagramEngine;
 }
 
-export const DestinationNodeWidget: React.FC<DestinationNodeProps> = ({
-                                                                          model,
-                                                                          engine,
-                                                                      }) => {
+export const DestinationNodeWidget: React.FC<DestinationNodeProps> = ({model, engine}) => {
     // State to toggle the color
     const [isActive, setIsActive] = useState(false);
     const [zIndex, setZIndex] = useState(0);
@@ -190,7 +187,7 @@ export const DestinationNodeWidget: React.FC<DestinationNodeProps> = ({
 
                                 "& .MuiChip-deleteIcon": {
                                     fontSize: "14px",
-                                    color: vars.mediumBlue,
+                                    color: vars.primaryBlue500,
                                 },
                             }}
                         />

src/components/graphDiagram/widgets/ViaNodeWidget.tsx

@@ -183,14 +183,14 @@ export const ViaNodeWidget: React.FC<ViaNodeProps> = ({model, engine}) => {
                             label={model.getOptions().anatomicalType}
                             variant="filled"
                             sx={{
-                                background: vars.lightBlue,
-                                color: vars.darkBlue,
+                                background: vars.primaryBlue300,
+                                color: vars.primaryBlue800,
                                 marginLeft: "10px",
                                 marginRight: "10px",
 
                                 "& .MuiChip-deleteIcon": {
                                     fontSize: "14px",
-                                    color: vars.mediumBlue,
+                                    color: vars.primaryBlue500,
                                 },
                             }}
                         />