Feature/sdsv 10

Dockerfile

@@ -1,15 +1,27 @@
-# node-sass 4.14.1 requires node version <= 14 for Alpine Linux
-# See: https://github.com/sass/node-sass/releases/tag/v4.14.1
-FROM node:16-alpine as build-deps
-WORKDIR /usr/src/app
-RUN pwd && ls
-COPY yarn.lock ./
+ARG NODE_PARENT=node:16-alpine
+
+FROM  ${NODE_PARENT} as frontend
+
+ENV BUILDDIR=/app
+
+RUN apk add git
+RUN npm i -g @craco/craco
+
+WORKDIR ${BUILDDIR}
+COPY package.json ${BUILDDIR}
+COPY yarn.lock ${BUILDDIR}
+COPY nginx/default.conf ${BUILDDIR}
+
 RUN yarn install
-COPY . ./
+COPY . ${BUILDDIR}
 RUN yarn build
 
-COPY public/ ./public/
-COPY src/ ./src/
+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/build /usr/share/nginx/html/
 
-EXPOSE 3000
-CMD yarn run start
+EXPOSE 80

deploy/k8s/codefresh.yaml

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

deploy/k8s/ingress_tpl.yaml → deploy/k8s/ingress.yaml

@@ -1,42 +1,39 @@
-apiVersion: cert-manager.io/v1alpha2
+apiVersion: cert-manager.io/v1
 kind: Issuer 
 metadata:
-  name: 'letsencrypt-sds_viewer'
+  name: 'letsencrypt-sds-viewer'
 spec:
   acme:
     server: https://acme-v02.api.letsencrypt.org/directory
     email: [email protected]
     privateKeySecretRef:
-      name: letsencrypt-sds_viewer
+      name: letsencrypt-sds-viewer
     solvers:
     - http01:
         ingress:
-          ingressName: sds_viewer
+          class: nginx
 ---
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
   annotations:
-    cert-manager.io/issuer: letsencrypt-sds_viewer
+    cert-manager.io/issuer: letsencrypt-sds-viewer
     kubernetes.io/ingress.class: nginx
     kubernetes.io/tls-acme: 'true'
-    nginx.ingress.kubernetes.io/ssl-redirect: 'true'
-    nginx.ingress.kubernetes.io/proxy-body-size: 512m
-    nginx.ingress.kubernetes.io/from-to-www-redirect: 'true'
-  name: sds_viewer
+  name: sds-viewer-nginx-ingress
 spec:
   rules:
   - host: "{{DOMAIN}}"
     http:
       paths:
       - backend:
           service:
-            name: sds_viewer
+            name: sds-viewer
             port:
               number: 80
         path: /
         pathType: ImplementationSpecific
   tls:
   - hosts:
     - "{{DOMAIN}}"
-    secretName: sds_viewer-tls
+    secretName: sds-viewer-tls

deploy/k8s/sds_viewer.yaml

@@ -0,0 +1,57 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: sds-viewer
+spec:
+  selector:
+    matchLabels:
+      app: sds-viewer
+  replicas: 1
+  template:
+    metadata:
+      labels:
+        app: sds-viewer
+    spec:
+      containers:
+        - name: sds-viewer
+          image: "gcr.io/metacellllc/sds-viewer:{{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: sds-viewer
+spec:
+  type: ClusterIP
+  ports:
+  - port: 80
+    targetPort: 80
+  selector:
+    app: sds-viewer

nginx/default.conf

@@ -0,0 +1,32 @@
+upstream sds-viewer {
+    server sds-viewer:8000;
+}
+
+server {
+    listen 80;
+
+    location / {
+        root   /usr/share/nginx/html/;
+        # index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    location /sds-viewer/ {
+        root   /usr/share/nginx/html/;
+        # index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    location ~* ^/(admin|api|logged-out|login|sds-viewer|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://sds-viewer;
+    }
+
+    location /static/ {
+        autoindex on;
+        alias /usr/share/nginx/html/static/;
+    }
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "private": true,
-  "homepage": "http://metacell.github.io/sds-viewer",
+  "homepage": "./",
   "dependencies": {
     "@craco/craco": "^6.1.2",
     "@frogcat/ttl2jsonld": "^0.0.7",
@@ -27,6 +27,8 @@
     "jest": "26.6.0",
     "jest-image-snapshot": "4.5.1",
     "jest-puppeteer": "6.1.0",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.1",
     "material-ui-dropzone": "^3.5.0",
     "n3": "^1.13.0",
     "puppeteer": "13.5.1",

src/components/GraphViewer/GraphViewer.js

@@ -39,7 +39,7 @@ const GraphViewer = (props) => {
   const [selectedNode, setSelectedNode] = useState(null);
   const [highlightNodes, setHighlightNodes] = useState(new Set());
   const [highlightLinks, setHighlightLinks] = useState(new Set());
-  const [selectedLayout, setSelectedLayout] = React.useState(TOP_DOWN);
+  const [selectedLayout, setSelectedLayout] = React.useState(LEFT_RIGHT);
   const [layoutAnchorEl, setLayoutAnchorEl] = React.useState(null);
   const open = Boolean(layoutAnchorEl);
   const [loading, setLoading] = React.useState(false);