import * as React from 'react' ; import styled from 'styled-components' ; import { RouteComponentProps } from 'react-router' ; import { ConsoleLayout } from '@larkin/frontend/components/ConsoleLayout' ; import { Title } from '@larkin/frontend/components/Title' ; import { getContainers , getMe } from '@larkin/frontend/services/api' ; import { Terminal } from '@larkin/frontend/components/Terminal' ; import { getLink , CONTAINER_PATH } from '@larkin/frontend/Routes' ; import { Container } from '@larkin/frontend/entities/Container' ; import { User } from '@larkin/frontend/entities/User' ; const Container = styled . div `
  max-width: 1024px;
  padding: 36px 12px 0;
  margin: 24px auto;
` ; const Comment = styled . p `
  color: #5590c9;
  margin-top: 18px;
` ; interface State { containers : Container [ ] ; me ? : User ; launchModalOpen : boolean ; } export class Images extends React . Component < RouteComponentProps , State > { state = { containers : [ ] as Container [ ] , me : undefined , launchModalOpen : false , } ; async componentDidMount ( ) { await this . fetch ( ) ; } fetch = async ( ) => { const containers = ( await getContainers ( ) ) . data ; const me = ( await getMe ( ) ) . data ; this . setState ( { containers , me } ) ; } ; onLaunch = async ( ) => { await this . fetch ( ) ; this . setState ( { launchModalOpen : false } ) ; } ; toContainer = ( id ) => { this . props . history . push ( getLink ( CONTAINER_PATH , id ) ) ; } ; openLaunchContainerModal = ( ) => this . setState ( { launchModalOpen : true } ) ; closeLaunchContainerModal = ( ) => this . setState ( { launchModalOpen : false } ) ; get canRunContainer ( ) { return this . state . containers . length === 0 ; } render ( ) { const { me } = this . state ; if ( ! me ) { return < ConsoleLayout activeTab = "images" / > ; } const user = me ! ; return ( < ConsoleLayout activeTab = "images" > < Container > < Title > larkin . sh registry < /Title> < div > You can push your Docker image to larkin . sh private registry . < /div> < Terminal > < Comment > # 1. Retrieve the login command to use to authenticate your Docker client to your registry . Use curl request : < /Comment> < p > $ ( curl - H "X-TOKEN: {user.api_token}" { process . env . API_URL } / get_docker_login ) < /p> < Comment > # 2. Build your Docker image using the following command . You can skip this step if your image is already built : < /Comment> < p > docker build - t myapp . < /p> < Comment > # 3. After the build completes , tag your image so you can push the image to this repository : < /Comment> < p > docker tag myapp : latest registry . larkin . sh / { user . id } / myapp < /p> < Comment > # 4. Run the following command to push this image to your newly created larkin . sh repository : < /Comment> < p > docker push registry . larkin . sh / { user . id } / myapp : latest < /p> < /Terminal> < /Container> < /ConsoleLayout>); } }