GH Actions stuff

dashboard/src/components/repo-selector/BranchList.tsx

@@ -3,11 +3,14 @@ import styled from 'styled-components';
 import branch_icon from '../../assets/branch.png';
 
 import api from '../../shared/api';
+import { Context } from '../../shared/Context';
 
 import Loading from '../Loading';
 
 type PropsType = {
+  grid: number,
   repoName: string,
+  owner: string,
   setSelectedBranch: (x: string) => void,
   selectedBranch: string
 };
@@ -26,13 +29,18 @@ export default class BranchList extends Component<PropsType, StateType> {
   }
 
   componentDidMount() {
+    let { currentProject } = this.context;
 
     // Get branches
     api.getBranches('<token>', {}, {
+      project_id: currentProject.id,
+      git_repo_id: this.props.grid,
       kind: 'github',
-      repo: this.props.repoName
+      owner: this.props.owner,
+      name: this.props.repoName,
     }, (err: any, res: any) => {
       if (err) {
+        console.log(err);
         this.setState({ loading: false, error: true });
       } else {
         this.setState({ branches: res.data, loading: false, error: false });
@@ -71,6 +79,8 @@ export default class BranchList extends Component<PropsType, StateType> {
   }
 }
 
+BranchList.contextType = Context;
+
 const BranchName = styled.div`
   display: flex;
   width: 100%;

dashboard/src/components/repo-selector/ContentsList.tsx

@@ -6,15 +6,19 @@ import folder from '../../assets/folder.svg';
 import info from '../../assets/info.svg';
 
 import api from '../../shared/api';
+import { Context } from '../../shared/Context';
 import { FileType } from '../../shared/types';
 
 import Loading from '../Loading';
 
 type PropsType = {
+  grid: number,
   repoName: string,
+  owner: string,
   selectedBranch: string,
   subdirectory: string,
   setSubdirectory: (x: string) => void,
+  setDockerfile: () => void,
 };
 
 type StateType = {
@@ -31,10 +35,15 @@ export default class ContentsList extends Component<PropsType, StateType> {
   }
 
   updateContents = () => {
+    let { currentProject } = this.context;
+
     // Get branch contents
     api.getBranchContents('<token>', { dir: this.props.subdirectory }, {
+      project_id: currentProject.id,
+      git_repo_id: this.props.grid,
       kind: 'github',
-      repo: this.props.repoName,
+      owner: this.props.owner,
+      name: this.props.repoName,
       branch: this.props.selectedBranch
     }, (err: any, res: any) => {
       if (err) {
@@ -91,6 +100,19 @@ export default class ContentsList extends Component<PropsType, StateType> {
         );
       }
 
+      if (fileName === 'Dockerfile') {
+        return (
+          <FileItem
+            key={i}
+            lastItem={i === contents.length - 1}
+            isADocker
+            onClick={() => this.props.setDockerfile()}
+          >
+            <img src={file} />
+            {fileName}
+          </FileItem>
+        );
+      }
       return (
         <FileItem
           key={i}
@@ -145,6 +167,8 @@ export default class ContentsList extends Component<PropsType, StateType> {
   }
 }
 
+ContentsList.contextType = Context;
+
 const BackLabel = styled.div`
   font-size: 16px;
   padding-left: 16px;
@@ -180,10 +204,10 @@ const Item = styled.div`
 `;
 
 const FileItem = styled(Item)`
-  cursor: default;
-  color: #ffffff55;
+  cursor: ${(props: {isADocker?: boolean}) => props.isADocker ? 'pointer' : 'default'};
+  color: ${(props: {isADocker?: boolean}) => props.isADocker ? '#fff' : '#ffffff55'};
   :hover {
-    background: #ffffff11;
+    background: ${(props: {isADocker?: boolean}) => props.isADocker ? '#ffffff22' : '#ffffff11'};
   }
 `;
 

dashboard/src/components/repo-selector/NewGHAction.tsx

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { ChartType } from '../../shared/types';
+import api from '../../shared/api';
+import { Context } from '../../shared/Context';
+import InputRow from '../../components/values-form/InputRow';
+
+import Loading from '../Loading';
+
+type PropsType = {
+  repoName: string,
+  dockerPath: string,
+  grid: number,
+  chart: ChartType,
+  imgURL: string,
+  setURL: (x: string) => void,
+};
+
+type StateType = {
+  trueDockerPath: string,
+  loading: boolean,
+  error: boolean,
+};
+
+export default class NewGHAction extends Component<PropsType, StateType> {
+  state = {
+    dockerRepo: '',
+    trueDockerPath: this.props.dockerPath,
+    loading: false,
+    error: false,
+  }
+
+  componentDidMount() {
+    if (this.props.dockerPath[0] === '/') {
+      this.setState({ trueDockerPath: this.props.dockerPath.substring(1, this.props.dockerPath.length) });
+    }
+  }
+
+  renderConfirmation = () => {
+    let { loading } = this.state;
+    if (loading) {
+      return <LoadingWrapper><Loading /></LoadingWrapper>
+    }
+
+    return (
+      <Holder>
+        <InputRow
+          disabled={true}
+          label='Git Repository'
+          type='text'
+          width='100%'
+          value={this.props.repoName}
+          setValue={(x: string) => console.log(x)}
+        />
+        <InputRow
+          disabled={true}
+          label='Dockerfile Path'
+          type='text'
+          width='100%'
+          value={this.state.trueDockerPath}
+          setValue={(x: string) => console.log(x)}
+        />
+        <InputRow
+          label='Docker Image Repository'
+          placeholder='Image Repo URL (ex. gcr.io/porter/mr-p)'
+          type='text'
+          width='100%'
+          value={this.props.imgURL}
+          setValue={(x: string) => this.props.setURL(x)}
+        />
+      </Holder>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderConfirmation()}
+      </div>
+    );
+  }
+}
+
+NewGHAction.contextType = Context;
+
+const Holder = styled.div`
+  padding: 0px 12px;
+`;
+
+const LoadingWrapper = styled.div`
+  padding: 30px 0px;
+  background: #ffffff11;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: #ffffff44;
+`;

dashboard/src/components/repo-selector/RepoSelector.tsx

@@ -4,14 +4,16 @@ import github from '../../assets/github.png';
 import info from '../../assets/info.svg';
 
 import api from '../../shared/api';
-import { RepoType } from '../../shared/types';
+import { RepoType, ChartType } from '../../shared/types';
 import { Context } from '../../shared/Context';
 
 import Loading from '../../components/Loading';
 import BranchList from './BranchList';
 import ContentsList from './ContentsList';
+import NewGHAction from './NewGHAction';
 
 type PropsType = {
+  chart: ChartType | null,
   forceExpanded?: boolean,
   selectedRepo: RepoType | null,
   selectedBranch: string,
@@ -26,6 +28,9 @@ type StateType = {
   loading: boolean,
   error: boolean,
   repos: RepoType[]
+  branchGrID: number,
+  dockerfileSelected: boolean,
+  imageURL: string,
 };
 
 export default class RepoSelector extends Component<PropsType, StateType> {
@@ -33,20 +38,65 @@ export default class RepoSelector extends Component<PropsType, StateType> {
     isExpanded: this.props.forceExpanded,
     loading: true,
     error: false,
-    repos: [] as RepoType[]
+    repos: [] as RepoType[],
+    branchGrID: null as number,
+    dockerfileSelected: false,
+    imageURL: null as string,
   }
 
   componentDidMount() {
-    let { currentProject, currentCluster } = this.context;
+    let { currentProject } = this.context;
 
     // Get repos
     api.getGitRepos('<token>', {
     }, { project_id: currentProject.id }, (err: any, res: any) => {
       if (err) {
         this.setState({ loading: false, error: true });
+      } else {
+        var allRepos: any = [];
+        let counter = 0;
+        for (let i = 0; i < res.data.length; i++) {
+          var grid = res.data[i].id;
+          api.getGitRepoList('<token>', {}, { project_id: currentProject.id, git_repo_id: grid }, (err: any, res: any) => {
+            if (err) {
+              console.log(err);
+              this.setState({ loading: false, error: true });
+            } else {
+              res.data.forEach((repo: any, id: number) => {
+                repo.GHRepoID = grid;
+              })
+              allRepos = allRepos.concat(res.data);
+              this.setState({ repos: allRepos, loading: false, error: false });
+            }
+          })
+        }
+      }
+    });
+  }
+
+  createGHAction = () => {
+    let { currentProject, currentCluster } = this.context;
+    let path = this.props.subdirectory + '/Dockerfile';
+    if (path[0] === '/') {
+      path = path.substring(1, path.length);
+    }
+
+    api.createGHAction('<token>', {
+      git_repo: this.props.selectedRepo.FullName,
+      image_repo_uri: this.state.imageURL,
+      dockerfile_path: path,
+      git_repo_id: this.props.selectedRepo.GHRepoID,
+    }, {
+      project_id: currentProject.id,
+      CLUSTER_ID: currentCluster.id,
+      RELEASE_NAME: this.props.chart.name,
+      RELEASE_NAMESPACE: this.props.chart.namespace,
+    }, (err: any, res: any) => {
+      if (err) {
+        console.log(err);
+        this.setState({ error: true });
       } else {
         console.log(res.data);
-        this.setState({ repos: res.data, loading: false, error: false });
       }
     });
   }
@@ -96,38 +146,81 @@ export default class RepoSelector extends Component<PropsType, StateType> {
         <div>
           <ExpandedWrapperAlt>
             <BranchList
-              setSelectedBranch={(branch: string) => setSelectedBranch(branch)}
+              grid={selectedRepo.GHRepoID}
+              setSelectedBranch={(branch: string) => {
+                this.setState({ branchGrID: selectedRepo.GHRepoID });
+                setSelectedBranch(branch);
+              }}
               repoName={selectedRepo.FullName.split('/')[1]}
+              owner={selectedRepo.FullName.split('/')[0]}
               selectedBranch={selectedBranch}
             />
           </ExpandedWrapperAlt>
-          <BackButton
-            width='130px'
-            onClick={() => setSelectedRepo(null)}
-          >
-            <i className="material-icons">keyboard_backspace</i>
-            Select Repo
-          </BackButton>
+          <ButtonTray>
+            <BackButton
+              width='130px'
+              onClick={() => setSelectedRepo(null)}
+            >
+              <i className="material-icons">keyboard_backspace</i>
+              Select Repo
+            </BackButton>
+          </ButtonTray>
         </div>
       );
+    } else if (this.state.dockerfileSelected) {
+      return (
+        <div>
+          <ExpandedWrapperAlt>
+            <NewGHAction
+              repoName={selectedRepo.FullName}
+              dockerPath={subdirectory + '/Dockerfile'}
+              grid={this.state.branchGrID}
+              chart={this.props.chart}
+              imgURL={this.state.imageURL}
+              setURL={(x: string) => this.setState({ imageURL: x })}
+            />
+          </ExpandedWrapperAlt>
+          <ButtonTray>
+            <BackButton
+              width='130px'
+              onClick={() => this.setState({ dockerfileSelected: false })}
+            >
+              <i className='material-icons'>keyboard_backspace</i>
+              Select Dockerfile
+            </BackButton>
+            <BackButton
+              width='146px'
+              onClick={() => this.createGHAction()}
+            >
+              <i className='material-icons'>play_circle_outline</i>
+              Create Github Action
+            </BackButton>
+          </ButtonTray>
+        </div>
+      )
     }
     return (
       <div>
         <ExpandedWrapperAlt>
           <ContentsList
+            grid={this.state.branchGrID}
             setSubdirectory={(subdirectory: string) => setSubdirectory(subdirectory)}
             repoName={selectedRepo.FullName.split('/')[1]}
+            owner={selectedRepo.FullName.split('/')[0]}
             selectedBranch={selectedBranch}
             subdirectory={subdirectory}
+            setDockerfile={() => this.setState({ dockerfileSelected: true })}
           />
         </ExpandedWrapperAlt>
-        <BackButton
-          onClick={() => setSelectedBranch('')}
-          width='140px'
-        >
-          <i className="material-icons">keyboard_backspace</i>
-          Select Branch
-        </BackButton>
+        <ButtonTray>
+          <BackButton
+            onClick={() => {setSelectedBranch(''); setSubdirectory(''); this.setState({ imageURL: '' })}}
+            width='140px'
+          >
+            <i className="material-icons">keyboard_backspace</i>
+            Select Branch
+          </BackButton>
+        </ButtonTray>
       </div>
     );
   }
@@ -209,6 +302,14 @@ const BackButton = styled.div`
   }
 `;
 
+const ButtonTray = styled.div`
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
 const RepoName = styled.div`
   display: flex;
   width: 100%;

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import api from '../../../../shared/api';
 import yaml from 'js-yaml';
 
-import { ChartType, RepoType, StorageType } from '../../../../shared/types';
+import { ChartType, RepoType, StorageType, ActionConfigType } from '../../../../shared/types';
 import { Context } from '../../../../shared/Context';
 
 import ImageSelector from '../../../../components/image-selector/ImageSelector';
@@ -31,6 +31,7 @@ type StateType = {
   subdirectory: string,
   webhookToken: string,
   highlightCopyButton: boolean,
+  action: ActionConfigType;
 };
 
 export default class SettingsSection extends Component<PropsType, StateType> {
@@ -45,6 +46,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     subdirectory: '',
     webhookToken: '',
     highlightCopyButton: false,
+    action: null as ActionConfigType,
   }
 
   // TODO: read in set image from form context instead of config
@@ -65,7 +67,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
       if (err) {
         console.log(err)
       } else {
-        this.setState({ webhookToken: res.data.webhook_token })
+        this.setState({ action: res.data.git_action_config, webhookToken: res.data.webhook_token });
       }
     });
   }
@@ -113,6 +115,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     if (this.state.sourceType === 'registry') {
       return (
         <>
+          <Heading>Connected Source</Heading>
           <Helper>
             Specify a container image and tag or
             <Highlight onClick={() => this.setState({ sourceType: 'repo' })}>
@@ -134,24 +137,61 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     let { currentProject } = this.context;
     return (
       <>
-        <Helper>
-          Select a repo to connect to. You can 
-          <A padRight={true} href={`/api/oauth/projects/${currentProject.id}/github?redirected=true`}>
-            log in with GitHub
-          </A> or
-          <Highlight onClick={() => this.setState({ sourceType: 'registry' })}>
-            link an image registry
-          </Highlight>.
-        </Helper>
-        <RepoSelector
-          forceExpanded={true}
-          selectedRepo={this.state.selectedRepo}
-          selectedBranch={this.state.selectedBranch}
-          subdirectory={this.state.subdirectory}
-          setSelectedRepo={(x: RepoType) => this.setState({ selectedRepo: x })}
-          setSelectedBranch={(x: string) => this.setState({ selectedBranch: x })}
-          setSubdirectory={(x: string) => this.setState({ subdirectory: x })}
-        />
+        {this.state.action.git_repo.length > 0
+          ?
+          <>
+            <Heading>Connected Source</Heading>
+            <Holder>
+              <InputRow
+                disabled={true}
+                label='Git Repository'
+                type='text'
+                width='100%'
+                value={this.state.action.git_repo}
+                setValue={(x: string) => console.log(x)}
+              />
+              <InputRow
+                disabled={true}
+                label='Dockerfile Path'
+                type='text'
+                width='100%'
+                value={this.state.action.dockerfile_path}
+                setValue={(x: string) => console.log(x)}
+              />
+              <InputRow
+                disabled={true}
+                label='Docker Image Repository'
+                type='text'
+                width='100%'
+                value={this.state.action.image_repo_uri}
+                setValue={(x: string) => console.log(x)}
+              />
+            </Holder>
+          </>
+          :
+          <>
+            <Heading>Connect a Source</Heading>
+            <Helper>
+              Select a repo to connect to. You can 
+              <A padRight={true} href={`/api/oauth/projects/${currentProject.id}/github?redirected=true`}>
+                log in with GitHub
+              </A> or
+              <Highlight onClick={() => this.setState({ sourceType: 'registry' })}>
+                link an image registry
+              </Highlight>.
+            </Helper>
+            <RepoSelector
+              chart={this.props.currentChart}
+              forceExpanded={true}
+              selectedRepo={this.state.selectedRepo}
+              selectedBranch={this.state.selectedBranch}
+              subdirectory={this.state.subdirectory}
+              setSelectedRepo={(x: RepoType) => this.setState({ selectedRepo: x })}
+              setSelectedBranch={(x: string) => this.setState({ selectedBranch: x })}
+              setSubdirectory={(x: string) => this.setState({ subdirectory: x })}
+            />
+          </>
+        }
       </>
     );
   }
@@ -185,7 +225,6 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     return (
       <Wrapper>
         <StyledSettingsSection>
-          <Heading>Connected Source</Heading>
           {this.renderSourceSection()}
           {this.renderWebhookSection()}
           <Heading>Additional Settings</Heading>
@@ -293,4 +332,8 @@ const StyledSettingsSection = styled.div`
   position: relative;
   border-radius: 5px;
   overflow: auto;
+`;
+
+const Holder = styled.div`
+  padding: 0px 12px;
 `;

dashboard/src/shared/api.tsx

@@ -67,6 +67,21 @@ const createGCR = baseApi<{
   return `/api/projects/${pathParams.project_id}/provision/gcr`;
 });
 
+const createGHAction = baseApi<{
+  git_repo: string,
+  image_repo_uri: string,
+  dockerfile_path: string,
+  git_repo_id: number,
+}, {
+  project_id: number,
+  CLUSTER_ID: number,
+  RELEASE_NAME: string,
+  RELEASE_NAMESPACE: string,
+}>('POST', pathParams => {
+  let { project_id, CLUSTER_ID, RELEASE_NAME, RELEASE_NAMESPACE } = pathParams;
+  return `/api/projects/${project_id}/ci/actions?cluster_id=${CLUSTER_ID}&name=${RELEASE_NAME}&namespace=${RELEASE_NAMESPACE}`;
+})
+
 const createGKE = baseApi<{
   gcp_integration_id: number,
   gke_name: string,
@@ -133,15 +148,25 @@ const destroyCluster = baseApi<{
 const getBranchContents = baseApi<{ 
   dir: string 
 }, {
+  project_id: number,
+  git_repo_id: number
   kind: string,
-  repo: string,
+  owner: string,
+  name: string,
   branch: string
 }>('GET', pathParams => {
-  return `/api/repos/github/${pathParams.repo}/${pathParams.branch}/contents`;
+  return `/api/projects/${pathParams.project_id}/gitrepos/${pathParams.git_repo_id}/repos/${pathParams.kind}/${pathParams.owner}/${pathParams.name}/${pathParams.branch}/contents`;
 });
 
-const getBranches = baseApi<{}, { kind: string, repo: string }>('GET', pathParams => {
-  return `/api/repos/${pathParams.kind}/${pathParams.repo}/branches`;
+const getBranches = baseApi<{
+}, {
+  project_id: number,
+  git_repo_id: number,
+  kind: string,
+  owner: string,
+  name: string
+}>('GET', pathParams => {
+  return `/api/projects/${pathParams.project_id}/gitrepos/${pathParams.git_repo_id}/repos/${pathParams.kind}/${pathParams.owner}/${pathParams.name}/branches`;
 });
 
 const getChart = baseApi<{
@@ -186,8 +211,6 @@ const getClusters = baseApi<{}, { id: number }>('GET', pathParams => {
   return `/api/projects/${pathParams.id}/clusters`;
 });
 
-const getGitRepoInfo = baseApi('GET', '/api/repos/github/');
-
 const getGitRepoList = baseApi<{
 }, {
   project_id: number,
@@ -394,6 +417,7 @@ export default {
   createECR,
   createGCPIntegration,
   createGCR,
+  createGHAction,
   createGKE,
   createInvite,
   createProject,
@@ -410,7 +434,6 @@ export default {
   getChartControllers,
   getClusterIntegrations,
   getClusters,
-  getGitRepoInfo,
   getGitRepoList,
   getGitRepos,
   getImageRepos,

dashboard/src/shared/types.tsx

@@ -112,7 +112,8 @@ export interface FormElement {
 
 export interface RepoType {
   FullName: string,
-  kind: string
+  kind: string,
+  GHRepoID: number,
 }
 
 export interface FileType {
@@ -156,4 +157,11 @@ export interface InviteType {
   email: string,
   accepted: boolean,
   id: number,
+}
+
+export interface ActionConfigType {
+  git_repo: string,
+  image_repo_uri: string,
+  git_repo_id: number,
+  dockerfile_path: string,
 }