Skip to content

Commit

Permalink
Merge pull request #15 from alexmt/bug-fixes
Browse files Browse the repository at this point in the history
UI Bug fixes
  • Loading branch information
alexmt authored Jul 12, 2018
2 parents 49f342a + 1db0fbd commit 7ea4d5a
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,28 @@ import { Duration } from 'argo-ui';
import * as moment from 'moment';
import * as React from 'react';

import { Ticker } from '../../../shared/components';
import * as models from '../../../shared/models';
import * as utils from '../utils';

export const ApplicationOperationState = ({operationState}: { operationState: models.OperationState }) => {
const durationMs = operationState.finishedAt ?
moment(operationState.finishedAt).diff(moment(operationState.startedAt)) / 1000 :
null;

const operationAttributes = [
{title: 'OPERATION', value: utils.getOperationType(operationState)},
{title: 'PHASE', value: operationState.phase},
...(operationState.message ? [{title: 'MESSAGE', value: operationState.message}] : []),
{title: 'STARTED AT', value: operationState.startedAt},
{title: 'FINISHED AT', value: operationState.finishedAt},
...(durationMs ? [{title: 'DURATION', value: <Duration durationMs={durationMs}/>}] : []),
{title: 'DURATION', value: (
<Ticker>
{(time) => <Duration durationMs={(operationState.finishedAt && moment(operationState.finishedAt) || time).diff(moment(operationState.startedAt)) / 1000}/>}
</Ticker>
)},
...(operationState.finishedAt ? [{title: 'FINISHED AT', value: operationState.finishedAt}] : []),
];

const resultAttributes: {title: string, value: string}[] = [];
const syncResult = operationState.syncResult || operationState.rollbackResult;
if (operationState.finishedAt) {
if (operationState.message) {
resultAttributes.push({title: 'MESSAGE', value: operationState.message});
}
const syncResult = operationState.syncResult || operationState.rollbackResult;
if (syncResult) {
(syncResult.resources || []).forEach((res) => {
resultAttributes.push({
Expand All @@ -33,6 +33,7 @@ export const ApplicationOperationState = ({operationState}: { operationState: mo
});
}
}

return (
<div>
<div className='white-box'>
Expand All @@ -47,7 +48,54 @@ export const ApplicationOperationState = ({operationState}: { operationState: mo
))}
</div>
</div>
{ resultAttributes.length > 0 && (
{syncResult && syncResult.hooks && syncResult.hooks.length > 0 && (
<React.Fragment>
<h4>Hooks:</h4>
<div className='argo-table-list'>
<div className='argo-table-list__head'>
<div className='row'>
<div className='columns small-2'>
KIND
</div>
<div className='columns small-2'>
NAME
</div>
<div className='columns small-2'>
STATUS
</div>
<div className='columns small-2'>
TYPE
</div>
<div className='columns small-4'>
MESSAGE
</div>
</div>
</div>
{syncResult.hooks.map((hook, i) => (
<div className='argo-table-list__row' key={i}>
<div className='row'>
<div className='columns small-2'>
{hook.kind}
</div>
<div className='columns small-2'>
{hook.name}
</div>
<div className='columns small-2'>
{hook.status}
</div>
<div className='columns small-2'>
{hook.type}
</div>
<div className='columns small-4'>
{hook.message}
</div>
</div>
</div>
))}
</div>
</React.Fragment>
)}
{resultAttributes.length > 0 && (
<h4>Result details:</h4>
)}
{ resultAttributes.length > 0 && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const ApplicationSummary = ({app}: {app: models.Application}) => {
<a href={app.spec.source.repoURL} target='_blank' onClick={(event) => event.stopPropagation()}>
<i className='fa fa-external-link'/> {app.spec.source.repoURL}
</a> )},
{title: 'REVISION', value: app.spec.source.targetRevision || 'HEAD'},
{title: 'PATH', value: app.spec.source.path},
{title: 'ENVIRONMENT', value: app.spec.source.environment},
{title: 'STATUS', value: (
Expand Down
2 changes: 1 addition & 1 deletion src/app/applications/components/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export async function deleteApplication(appName: string, context: AppContext) {
const confirmationForm = class extends React.Component<{}, { cascade: boolean } > {
constructor(props: any) {
super(props);
this.state = {cascade: false};
this.state = {cascade: true};
}
public render() {
return (
Expand Down
1 change: 1 addition & 0 deletions src/app/shared/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from './form-field';
export * from './colors';
export * from './connection-state-icon';
export * from './error-notification';
export * from './ticket';
25 changes: 25 additions & 0 deletions src/app/shared/components/ticket.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import * as moment from 'moment';
import * as React from 'react';
import {Observable, Subscription} from 'rxjs';

export class Ticker extends React.Component<{intervalMs?: number, children?: ((time: moment.Moment) => React.ReactNode)}, {time: moment.Moment}> {

private subscription: Subscription;

constructor(props: {intervalMs?: number, children?: ((time: moment.Moment) => React.ReactNode)}) {
super(props);
this.state = { time: moment() };
this.subscription = Observable.interval(props.intervalMs || 1000).subscribe(() => this.setState({ time: moment() }));
}

public render() {
return this.props.children(this.state.time);
}

public componentWillUnmount() {
if (this.subscription != null) {
this.subscription.unsubscribe();
this.subscription = null;
}
}
}
30 changes: 30 additions & 0 deletions src/app/shared/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,38 @@ export interface OperationState {
finishedAt: models.Time;
}

export type HookType = 'PreSync' | 'Sync' | 'PostSync' | 'Skip';

export interface HookStatus {
/**
* Name is the resource name
*/
name: string;
/**
* Name is the resource name
*/
kind: string;
/**
* Name is the resource name
*/
apiVersion: string;
/**
* Type is the type of hook (e.g. PreSync, Sync, PostSync, Skip)
*/
type: HookType;
/**
* Status a simple, high-level summary of where the resource is in its lifecycle
*/
status: OperationPhase;
/**
* A human readable message indicating details about why the resource is in this condition.
*/
message: string;
}

export interface SyncOperationResult {
resources: ResourceDetails[];
hooks?: HookStatus[];
}

export interface ResourceDetails {
Expand Down

0 comments on commit 7ea4d5a

Please sign in to comment.