Merge pull request #195 from porter-dev/beta.3.integration-frontend

Beta.3.integration frontend

dashboard/src/main/Register.tsx

@@ -5,6 +5,7 @@ import logo from '../assets/logo.png';
 import api from '../shared/api';
 import { emailRegex } from '../shared/regex';
 import { Context } from '../shared/Context';
+import { handleSubmitFeedback } from '../shared/feedback'; 
 
 type PropsType = {
   authenticate: () => void
@@ -60,6 +61,8 @@ export default class Register extends Component<PropsType, StateType> {
         email: email,
         password: password
       }, {}, (err: any, res: any) => {
+        let msg = '📡 ' + email + ' registered for Porter.';
+        handleSubmitFeedback(msg);
         setUser(res?.data?.id, res?.data?.email)
         err ? setCurrentError(err.response.data.errors[0]) : authenticate();
       });

dashboard/src/main/home/Home.tsx

@@ -5,6 +5,7 @@ import ReactModal from 'react-modal';
 import { Context } from '../../shared/Context';
 import api from '../../shared/api';
 import { InfraType } from '../../shared/types';
+import { handleSubmitFeedback } from '../../shared/feedback';
 
 import Sidebar from './sidebar/Sidebar';
 import Dashboard from './dashboard/Dashboard';
@@ -93,6 +94,8 @@ export default class Home extends Component<PropsType, StateType> {
   }
 
   componentDidMount() {
+    let msg = '👋 ' + this.context.user.email + ' logged in.';
+    handleSubmitFeedback(msg);
     this.getProjects();
   }
 

dashboard/src/main/home/navbar/Feedback.tsx

@@ -34,12 +34,12 @@ export default class Feedback extends Component<PropsType, StateType> {
     }
   }
 
-  handleSubmitFeedback = () => {
+  onSubmitFeedback = () => {
     let { user } = this.context;
     let msg = '👤 ' + user.email + ' 📍 ' + this.props.currentView + ': ' + this.state.feedbackText;
     handleSubmitFeedback(msg, () => {
       this.setState({ feedbackSent: true, feedbackText: '' });
-    })
+    });
   }
 
   renderFeedbackDropdown = () => {
@@ -61,7 +61,7 @@ export default class Feedback extends Component<PropsType, StateType> {
             />
             <SendButton 
               disabled={disabled} 
-              onClick={() => !disabled && this.handleSubmitFeedback()}
+              onClick={() => !disabled && this.onSubmitFeedback()}
             >
               <i className="material-icons">send</i> Send
             </SendButton>

dashboard/src/main/home/new-project/NewProject.tsx

@@ -6,6 +6,7 @@ import close from '../../../assets/close.png';
 import api from '../../../shared/api';
 import { Context } from '../../../shared/Context';
 import { integrationList } from '../../../shared/common';
+import { handleSubmitFeedback } from '../../../shared/feedback';
 import { ProjectType } from '../../../shared/types';
 
 import InputRow from '../../../components/values-form/InputRow';
@@ -48,13 +49,19 @@ export default class NewProject extends Component<PropsType, StateType> {
     return true;
   }
 
+  handleSelectProvider = (provider: string) => {
+    let msg = '🤔 ' + this.context.user.email + ' selected ' + provider + '.';
+    handleSubmitFeedback(msg);
+    this.setState({ selectedProvider: provider });
+  }
+
   renderTemplateList = () => {
     return providers.map((provider: string, i: number) => {
       let providerInfo = integrationList[provider];
       return (
         <Block 
           key={i} 
-          onClick={() => this.setState({ selectedProvider: provider })}
+          onClick={() => this.handleSelectProvider(provider)}
         >
           <Icon src={providerInfo.icon} />
           <BlockTitle>
@@ -311,6 +318,9 @@ export default class NewProject extends Component<PropsType, StateType> {
           let proj = res.data.find((el: ProjectType) => el.name === this.state.projectName);
           this.context.setCurrentProject(proj);
           
+          let msg = '🏗️ ' + this.context.user.email + ' began provisioning.';
+          handleSubmitFeedback(msg);
+
           if (this.state.selectedProvider === 'aws') {
             this.provisionECR(proj, this.provisionEKS)
 

dashboard/src/main/home/new-project/Provisioner.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import api from '../../../shared/api';
 import { Context } from '../../../shared/Context';
 import ansiparse from '../../../shared/ansiparser'
-import { integrationList } from '../../../shared/common';
+import { handleSubmitFeedback } from '../../../shared/feedback';
 import loading from '../../../assets/loading.gif';
 import warning from '../../../assets/warning.png';
 
@@ -190,6 +190,8 @@ export default class Provisioner extends Component<PropsType, StateType> {
   }
 
   onEnd = () => {
+    let msg = '🛠️ ' + this.context.user.email + ' completed provisioning.';
+    handleSubmitFeedback(msg);
     let myInterval = setInterval(() => {
       console.log('interval')
       api.getClusters('<token>', {}, { id: this.context.currentProject.id }, (err: any, res: any) => {

dashboard/src/main/home/templates/expanded-template/LaunchTemplate.tsx

@@ -9,6 +9,7 @@ import { PorterTemplate, ChoiceType, ClusterType, StorageType } from '../../../.
 import Selector from '../../../../components/Selector';
 import ImageSelector from '../../../../components/image-selector/ImageSelector';
 import TabRegion from '../../../../components/TabRegion';
+import SaveButton from '../../../../components/SaveButton';
 import ValuesWrapper from '../../../../components/values-form/ValuesWrapper';
 import ValuesForm from '../../../../components/values-form/ValuesForm';
 import { safeDump } from 'js-yaml';
@@ -50,6 +51,28 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     namespaceOptions: [] as { label: string, value: string }[],
   };
 
+  onSubmitAddon = () => {
+    let { currentCluster, currentProject } = this.context;
+    let name = randomWords({ exactly: 3, join: '-' });
+    api.deployTemplate('<token>', {
+      templateName: this.props.currentTemplate.name,
+      storage: StorageType.Secret,
+      namespace: this.state.selectedNamespace,
+      name,
+    }, {
+      id: currentProject.id,
+      cluster_id: currentCluster.id,
+      name: this.props.currentTemplate.name.toLowerCase().trim(),
+      version: 'latest',
+    }, (err: any, res: any) => {
+      if (err) {
+        this.setState({ saveValuesStatus: 'error' });
+      } else {
+        this.setState({ saveValuesStatus: 'successful' });
+      }
+    });
+  }
+
   onSubmit = (rawValues: any) => {
     let { currentCluster, currentProject } = this.context;
     let name = randomWords({ exactly: 3, join: '-' });
@@ -125,6 +148,10 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   }
 
   componentDidMount() {
+    if (this.props.currentTemplate.name !== 'docker') {
+      this.setState({ saveValuesStatus: '' });
+    }
+
     // Retrieve tab options
     let tabOptions = [] as ChoiceType[];
     this.props.form?.tabs.map((tab: any, i: number) => {
@@ -193,6 +220,20 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
           {this.renderTabContents()}
         </TabRegion>
       );
+    } else {
+      return (
+        <Wrapper>
+          <Placeholder>
+            No additional settings found.
+          </Placeholder>
+          <SaveButton
+            text='Deploy'
+            onClick={() => this.onSubmitAddon()}
+            status={this.state.saveValuesStatus}
+            makeFlush={true}
+          />
+        </Wrapper>
+      );
     }
   }
 
@@ -262,6 +303,25 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
 LaunchTemplate.contextType = Context;
 
+const Wrapper = styled.div`
+  width: 100%;
+  position: relative;
+  padding-bottom: 70px;
+`;
+
+const Placeholder = styled.div`
+  width: 100%;
+  height: 200px;
+  background: #ffffff11;
+  border: 1px solid #ffffff44;
+  border-radius: 5px;
+  color: #ffffff44;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const DarkMatter = styled.div`
   width: 100%;
   margin-top: -15px;

dashboard/src/shared/api.tsx

@@ -175,8 +175,8 @@ const deleteProject = baseApi<{}, { id: number }>('DELETE', pathParams => {
 
 const deployTemplate = baseApi<{
   templateName: string,
-  imageURL: string,
-  formValues: any,
+  imageURL?: string,
+  formValues?: any,
   storage: StorageType,
   namespace: string,
   name: string,

dashboard/src/shared/feedback.tsx

@@ -1,19 +1,21 @@
 import axios from 'axios';
 
 export const handleSubmitFeedback = (msg: string, callback?: (err: any, res: any) => void) => {
-  axios.post(process.env.FEEDBACK_ENDPOINT, {
-    key: process.env.DISCORD_KEY,
-    cid: process.env.DISCORD_CID,
-    message: msg,
-  }, {
-    headers: {
-      Authorization: `Bearer <>`
-    }
-  })
-  .then(res => {
-    callback && callback(null, res);
-  })
-  .catch(err => {
-    callback && callback(err, null);
-  });
+  if (!window.location.href.includes('localhost:8080')) {
+    axios.post(process.env.FEEDBACK_ENDPOINT, {
+      key: process.env.DISCORD_KEY,
+      cid: process.env.DISCORD_CID,
+      message: msg,
+    }, {
+      headers: {
+        Authorization: `Bearer <>`
+      }
+    })
+    .then(res => {
+      callback && callback(null, res);
+    })
+    .catch(err => {
+      callback && callback(err, null);
+    });
+  }
 }