Merge remote-tracking branch 'origin/master' into jelena-redactors

kotsadm/api/src/kots_app/kots_app.ts

@@ -276,7 +276,9 @@ export class KotsApp {
         pathParts.shift(); // remove first blank element from the parts array.
       }
       let currentLevel = tree; // initialize currentLevel to root
+      let currentPath = "";
       _.each(pathParts, (part) => {
+        currentPath = currentPath + "/" + part;
         // check to see if the path already exists.
         const existingPath = _.find(currentLevel, ["name", part]);
         if (existingPath) {
@@ -286,7 +288,7 @@ export class KotsApp {
         } else {
           const newPart = {
             name: part,
-            path: `${path}`,
+            path: currentPath,
             children: [],
           };
           currentLevel.push(newPart);

kotsadm/api/src/troubleshoot/supportbundle.ts

@@ -56,7 +56,9 @@ export class SupportBundle {
         pathParts.shift(); // remove first blank element from the parts array.
       }
       let currentLevel = tree; // initialize currentLevel to root
+      let currentPath = "";
       _.each(pathParts, (part) => {
+        currentPath = currentPath + "/" + part;
         // check to see if the path already exists.
         const existingPath = _.find(currentLevel, ["name", part]);
         if (existingPath) {
@@ -66,7 +68,7 @@ export class SupportBundle {
         } else {
           const newPart = {
             name: part,
-            path: `${path}`,
+            path: currentPath,
             children: [],
           };
           currentLevel.push(newPart);

kotsadm/pkg/apiserver/server.go

@@ -55,6 +55,9 @@ func Start() {
 	r.Path("/graphql").Methods("OPTIONS").HandlerFunc(handlers.CORS)
 	r.Path("/graphql").Methods("POST").HandlerFunc(handlers.NodeProxy(upstream))
 
+	// Api ping
+	r.HandleFunc("/api/v1/ping", handlers.Ping)
+
 	// Functions that the operator calls
 	r.Path("/api/v1/appstatus").Methods("PUT").HandlerFunc(handlers.NodeProxy(upstream))
 	r.Path("/api/v1/deploy/result").Methods("PUT").HandlerFunc(handlers.NodeProxy(upstream))

kotsadm/pkg/handlers/ping.go

@@ -0,0 +1,11 @@
+package handlers
+
+import (
+	"net/http"
+)
+
+func Ping(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+
+	JSON(w, 200, "pong")
+}

kotsadm/web/src/ConnectionTerminated.jsx

@@ -1,18 +1,17 @@
 import * as React from "react";
-import { ping } from "@src/queries/AppsQueries";
 
 export default class ConnectionTerminated extends React.Component {
 
   state = {
     seconds: 1,
-    reconnectAttepts: 1,
+    reconnectAttempts: 1,
   }
 
   countdown = (seconds) => {
     this.setState({ seconds });
     if (seconds === 0) {
       this.setState({
-        reconnectAttepts: this.state.reconnectAttepts + 1
+        reconnectAttempts: this.state.reconnectAttempts + 1
       }, () => {
         this.ping();
       });
@@ -25,15 +24,13 @@ export default class ConnectionTerminated extends React.Component {
   }
 
   ping = async () => {
-    const { reconnectAttepts } = this.state;
-    await this.props.gqlClient.query({
-      query: ping,
-      fetchPolicy: "no-cache"
+    const { reconnectAttempts } = this.state;
+    await fetch(`${window.env.API_ENDPOINT}/ping`, {
     }).then(() => {
       this.props.setTerminatedState(false);
     }).catch(() => {
       this.props.setTerminatedState(true);
-      const seconds = reconnectAttepts > 10 ? 10 : reconnectAttepts;
+      const seconds = reconnectAttempts > 10 ? 10 : reconnectAttempts;
       this.countdown(seconds);
     });
   }

kotsadm/web/src/Root.jsx

@@ -23,7 +23,7 @@ import { ShipClientGQL } from "./ShipClientGQL";
 import SecureAdminConsole from "./components/SecureAdminConsole";
 import RestoreCompleted from "./components/RestoreCompleted";
 
-import { ping, listApps } from "@src/queries/AppsQueries";
+import { listApps } from "@src/queries/AppsQueries";
 import Footer from "./components/shared/Footer";
 import NavBar from "./components/shared/NavBar";
 
@@ -186,9 +186,7 @@ class Root extends Component {
   }
 
   ping = async (tries = 0) => {
-    await GraphQLClient.query({
-      query: ping,
-      fetchPolicy: "no-cache"
+    await fetch(`${window.env.API_ENDPOINT}/ping`, {
     }).then(() => {
       this.setState({ connectionTerminated: false });
     }).catch(() => {
@@ -198,7 +196,6 @@ class Root extends Component {
         }, 1000);
         return;
       }
-
       this.setState({ connectionTerminated: true });
     });
   }

kotsadm/web/src/components/tree/KotsApplicationTree.jsx

@@ -1,15 +1,13 @@
 import * as React from "react";
 import { compose } from "react-apollo";
 import { withRouter } from "react-router-dom";
-import { getFileFormat, Utilities } from "../../utilities/utilities";
-import sortBy from "lodash/sortBy";
-import find from "lodash/find";
+import { Utilities } from "../../utilities/utilities";
+import isEmpty from "lodash/isEmpty";
 import keys from "lodash/keys";
 import MonacoEditor from "react-monaco-editor";
 import Modal from "react-modal";
 import CodeSnippet from "../shared/CodeSnippet";
 
-import Loader from "../shared/Loader";
 import FileTree from "../shared/FileTree";
 
 import "../../scss/components/troubleshoot/FileTree.scss";
@@ -18,25 +16,13 @@ class KotsApplicationTree extends React.Component {
   constructor() {
     super();
     this.state = {
-      files: [],
+      files: {},
       selectedFile: "/",
-      line: null,
-      activeMarkers: [],
-      analysisError: false,
       displayInstructionsModal: false,
-      applicationTree: {},
+      applicationTree: [],
     };
   }
 
-  setFileTree = () => {
-    if (!this.state.fileTree) { return; }
-    const parsedTree = JSON.parse(this.state.fileTree);
-    let sortedTree = sortBy(parsedTree, (dir) => {
-      dir.children ? dir.children.length : []
-    });
-    this.setState({ files: sortedTree });
-  }
-
   fetchApplicationTree = () => {
     const url = `${window.env.API_ENDPOINT}/app/${this.props.match.params.slug}/sequence/${this.props.match.params.sequence}/contents`;
     fetch(url, {
@@ -46,15 +32,21 @@ class KotsApplicationTree extends React.Component {
       method: "GET",
     })
     .then(res => res.json())
-    .then(async (files) => {
-      this.setState({applicationTree: files});
+    .then(async (res) => {
+      const files = res?.files || {};
+      const paths = keys(files);
+      const applicationTree = Utilities.arrangeIntoApplicationTree(paths);
+      this.setState({
+        files,
+        applicationTree,
+      });
     })
     .catch((err) => {
       throw err;
     });
   }
 
-  compoenntDidUpdate(lastProps, lastState) {
+  componentDidUpdate(lastProps, lastState) {
     if (this.props.match.params.slug != lastProps.match.params.slug || this.props.match.params.sequence != lastProps.match.params.sequence) {
       this.fetchApplicationTree();
     }
@@ -81,30 +73,29 @@ class KotsApplicationTree extends React.Component {
   }
 
   render() {
-    const { fileLoadErr, fileLoadErrMessage, displayInstructionsModal } = this.state;
+    const { displayInstructionsModal, files, applicationTree, selectedFile } = this.state;
 
-    const file = this.state.applicationTree.files ? this.state.applicationTree.files[this.state.selectedFile] : "";
-    const contents = file ? new Buffer(file, "base64").toString() : "";
+    const contents = files[selectedFile] ? new Buffer(files[selectedFile], "base64").toString() : "";
+    const topLevelPaths = applicationTree.map(f => f.path);
 
     return (
       <div className="flex-column flex1 ApplicationTree--wrapper container u-paddingTop--50 u-paddingBottom--30">
         <div className="edit-files-banner u-fontSize--small u-fontWeight--medium">Need to edit these files? <span onClick={this.toggleInstructionsModal} className="u-textDecoration--underline u-fontWeight--bold u-cursor--pointer">Click here</span> to learn how</div>
         <div className="flex flex1">
           <div className="flex1 dirtree-wrapper flex-column u-overflow-hidden u-background--biscay">
             <div className="u-overflow--auto dirtree">
-              {!this.state.applicationTree.files ?
+              <FileTree
+                files={applicationTree}
+                isRoot={true}
+                keepOpenPaths={["overlays", "base"]}
+                topLevelPaths={topLevelPaths}
+                handleFileSelect={this.setSelectedFile}
+                selectedFile={this.state.selectedFile}
+              />
+              {isEmpty(applicationTree) &&
                 <ul className="FileTree-wrapper">
                   <li>Loading file explorer</li>
                 </ul>
-                :
-                <FileTree
-                  files={Utilities.arrangeIntoTree(keys(this.state.applicationTree.files))}
-                  isRoot={true}
-                  keepOpenPaths={["overlays", "base"]}
-                  topLevelPaths={Utilities.arrangeIntoTree(keys(this.state.applicationTree.files)).map(f => f.path)}
-                  handleFileSelect={(path) => this.setSelectedFile(path)}
-                  selectedFile={this.state.selectedFile}
-                />
               }
             </div>
           </div>
@@ -113,32 +104,24 @@ class KotsApplicationTree extends React.Component {
               <div className="flex-column flex1 alignItems--center justifyContent--center">
                 <p className="u-color--dustyGray u-fontSize--normal u-fontWeight--medium">Select a file from the file explorer to view it here.</p>
               </div>
-              : fileLoadErr ?
-                <div className="flex-column flex1 alignItems--center justifyContent--center">
-                  <p className="u-color--chestnut u-fontSize--normal u-fontWeight--medium">Oops, we ran into a problem getting that file, <span className="u-fontWeight--bold">{fileLoadErrMessage}</span></p>
-                  <p className="u-marginTop--10 u-fontSize--small u-fontWeight--medium u-color--dustyGray">Don't worry, you can download a tar.gz of the resources and have access to all of the files</p>
-                  <div className="u-marginTop--20">
-                    <button className="btn secondary" onClick={this.handleDownload}>Download tar.gz</button>
-                  </div>
-                </div>
-                :
-                  <MonacoEditor
-                    ref={(editor) => {
-                      this.monacoEditor = editor;
-                    }}
-                    language={"yaml"}
-                    value={contents}
-                    height="100%"
-                    width="100%"
-                    options={{
-                      readOnly: true,
-                      contextmenu: false,
-                      minimap: {
-                        enabled: false
-                      },
-                      scrollBeyondLastLine: false,
-                    }}
-                  />
+              : 
+              <MonacoEditor
+                ref={(editor) => {
+                  this.monacoEditor = editor;
+                }}
+                language={"yaml"}
+                value={contents}
+                height="100%"
+                width="100%"
+                options={{
+                  readOnly: true,
+                  contextmenu: false,
+                  minimap: {
+                    enabled: false
+                  },
+                  scrollBeyondLastLine: false,
+                }}
+              />
             }
           </div>
         </div>

kotsadm/web/src/utilities/utilities.js

@@ -484,7 +484,9 @@ export const Utilities = {
         pathParts.shift(); // remove first blank element from the parts array.
       }
       let currentLevel = tree; // initialize currentLevel to root
+      let currentPath = "";
       each(pathParts, (part) => {
+        currentPath = currentPath + "/" + part;
         // check to see if the path already exists.
         const existingPath = find(currentLevel, ["name", part]);
         if (existingPath) {
@@ -494,7 +496,7 @@ export const Utilities = {
         } else {
           const newPart = {
             name: part,
-            path: `${path}`,
+            path: currentPath,
             children: [],
           };
           currentLevel.push(newPart);
@@ -503,5 +505,21 @@ export const Utilities = {
       });
     });
     return tree;
+  },
+
+  arrangeIntoApplicationTree(paths) {
+    const tree = this.arrangeIntoTree(paths);
+    return sortBy(tree, (file) => {
+      switch (file.path) {
+        case "/upstream":
+          return 1;
+        case "/base":
+          return 2;
+        case "/overlays":
+          return 3;
+        default:
+          return 4;
+      }
+    });
   }
 };