Skip to content

Commit

Permalink
Add services and routes to overview details
Browse files Browse the repository at this point in the history
  • Loading branch information
TheRealJon committed Oct 19, 2018
1 parent 59622ba commit 9f22502
Show file tree
Hide file tree
Showing 30 changed files with 1,271 additions and 491 deletions.
40 changes: 23 additions & 17 deletions frontend/public/components/_horizontal-nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,35 @@ $co-m-horizontal-nav__menu-item-link-padding-lr-mobile: 15px;
font-size: 18px;
margin: 0;
text-align: center;
&.co-m-horizontal-nav-item--active a {
color: $color-highlight-blue;
position: relative;
&::after {
background: $color-highlight-blue;
bottom: 0;
content: "";
display: block;
height: 2px;
left: $co-m-horizontal-nav__menu-item-link-padding-lr-mobile;
position: absolute;
right: $co-m-horizontal-nav__menu-item-link-padding-lr-mobile;
@media (min-width: $grid-float-breakpoint) {
left: $co-m-horizontal-nav__menu-item-link-padding-lr-desktop;
right: $co-m-horizontal-nav__menu-item-link-padding-lr-desktop;
&.co-m-horizontal-nav-item--active {
a,
button {
color: $color-highlight-blue;
position: relative;
&::after {
background: $color-highlight-blue;
bottom: 0;
content: "";
display: block;
height: 2px;
left: $co-m-horizontal-nav__menu-item-link-padding-lr-mobile;
position: absolute;
right: $co-m-horizontal-nav__menu-item-link-padding-lr-mobile;
@media (min-width: $grid-float-breakpoint) {
left: $co-m-horizontal-nav__menu-item-link-padding-lr-desktop;
right: $co-m-horizontal-nav__menu-item-link-padding-lr-desktop;
}
}
}
}
a {
a,
button {
background: none;
border: none;
color: inherit;
display: block;
text-decoration: none;
padding: 6px $co-m-horizontal-nav__menu-item-link-padding-lr-mobile 8px;
text-decoration: none;
@media (min-width: $grid-float-breakpoint) {
padding-left: $co-m-horizontal-nav__menu-item-link-padding-lr-desktop;
padding-right: $co-m-horizontal-nav__menu-item-link-padding-lr-desktop;
Expand Down
5 changes: 5 additions & 0 deletions frontend/public/components/_service.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,8 @@
}
}
}

.port-list {
padding-left: 0;
list-style: none;
}
23 changes: 2 additions & 21 deletions frontend/public/components/daemon-set.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import { Link } from 'react-router-dom';

import { connectToModel } from '../kinds';
import {
ColHead,
DetailsPage,
Expand All @@ -19,13 +18,12 @@ import {
navFactory,
ResourceCog,
ResourceLink,
ResourceOverviewHeading,
ResourceSummary,
SectionHeading,
Selector
} from './utils';

const menuActions = [Cog.factory.EditEnvironment, ...Cog.factory.common];
export const menuActions = [Cog.factory.EditEnvironment, ...Cog.factory.common];

const DaemonSetHeader = props => <ListHeader>
<ColHead {...props} className="col-lg-2 col-md-3 col-sm-4 col-xs-6" sortField="metadata.name">Name</ColHead>
Expand Down Expand Up @@ -56,31 +54,14 @@ const DaemonSetRow = ({obj: daemonset}) => <ResourceRow obj={daemonset}>
</div>
</ResourceRow>;

const DaemonSetDetailsList = ({ds}) =>
export const DaemonSetDetailsList = ({ds}) =>
<dl className="co-m-pane__details">
<dt>Current Count</dt>
<dd>{ds.status.currentNumberScheduled || '-'}</dd>
<dt>Desired Count</dt>
<dd>{ds.status.desiredNumberScheduled || '-'}</dd>
</dl>;

export const DaemonSetOverview = connectToModel(({kindObj, resource: ds}) =>
<div className="co-m-pane resource-overview">
<ResourceOverviewHeading
actions={menuActions}
kindObj={kindObj}
resource={ds}
/>
<div className="co-m-pane__body resource-overview__body">
<div className="resource-overview__summary">
<ResourceSummary resource={ds} />
</div>
<div className="resource-overview__details">
<DaemonSetDetailsList ds={ds} />
</div>
</div>
</div>);

const Details = ({obj: daemonset}) => <div className="co-m-pane__body">
<SectionHeading text="Daemon Set Overview" />
<div className="row">
Expand Down
17 changes: 0 additions & 17 deletions frontend/public/components/default-resource.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,12 @@ import * as React from 'react';
import { ColHead, DetailsPage, List, ListHeader, ListPage } from './factory';
import { fromNow } from './utils/datetime';
import { referenceFor, kindForReference } from '../module/k8s';
import { connectToModel } from '../kinds';
import {
Cog,
kindObj,
navFactory,
ResourceCog,
ResourceLink,
ResourceOverviewHeading,
ResourceSummary,
SectionHeading
} from './utils';
Expand Down Expand Up @@ -70,18 +68,3 @@ export const DefaultDetailsPage = props => {
return <DetailsPage {...props} menuActions={menuActions} pages={pages} />;
};
DefaultDetailsPage.displayName = 'DefaultDetailsPage';

export const DefaultOverviewPage = connectToModel( ({kindObj: kindObject, resource}) =>
<div className="overview__sidebar-pane resource-overview">
<ResourceOverviewHeading
actions={menuActions}
kindObj={kindObject}
resource={resource}
/>
<div className="overview__sidebar-pane-body resource-overview__body">
<div className="resource-overview__summary">
<ResourceSummary resource={resource} />
</div>
</div>
</div>
);
29 changes: 2 additions & 27 deletions frontend/public/components/deployment-config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { errorModal } from './modals';
import { DeploymentConfigModel } from '../models';
import { Conditions } from './conditions';
import { ResourceEventStream } from './events';
import { connectToModel } from '../kinds';
import {
DetailsPage,
List,
Expand All @@ -23,7 +22,6 @@ import {
LoadingInline,
navFactory,
pluralize,
ResourceOverviewHeading,
ResourceSummary,
SectionHeading
} from './utils';
Expand Down Expand Up @@ -56,15 +54,15 @@ const rolloutAction = (kind, obj) => ({

const {ModifyCount, AddStorage, EditEnvironment, common} = Cog.factory;

const menuActions = [
export const menuActions = [
rolloutAction,
ModifyCount,
AddStorage,
EditEnvironment,
...common,
];

const DeploymentConfigDetailsList = ({dc}) => {
export const DeploymentConfigDetailsList = ({dc}) => {
const reason = _.get(dc, 'status.details.message');
const timeout = _.get(dc, 'spec.strategy.rollingParams.timeoutSeconds');
const updatePeriod = _.get(dc, 'spec.strategy.rollingParams.updatePeriodSeconds');
Expand Down Expand Up @@ -95,29 +93,6 @@ const DeploymentConfigDetailsList = ({dc}) => {
</dl>;
};

export const DeploymentConfigOverview = connectToModel(({resource: dc, kindObj}) =>
<div className="overview__sidebar-pane resource-overview">
<ResourceOverviewHeading
actions={menuActions}
kindObj={kindObj}
resource={dc}
/>
<div className="overview__sidebar-pane-body resource-overview__body">
<div className="resource-overview__pod-counts">
<DeploymentPodCounts resource={dc} resourceKind={DeploymentConfigModel} />
</div>
<div className="resource-overview__summary">
<ResourceSummary resource={dc}>
<dt>Status</dt>
<dd>{dc.status.availableReplicas === dc.status.updatedReplicas ? <span>Active</span> : <div><span className="co-icon-space-r"><LoadingInline /></span> Updating</div>}</dd>
</ResourceSummary>
</div>
<div className="resource-overview__details">
<DeploymentConfigDetailsList dc={dc} />
</div>
</div>
</div>);

export const DeploymentConfigsDetails: React.SFC<{obj: any}> = ({obj: dc}) => {
return <React.Fragment>
<div className="co-m-pane__body">
Expand Down
29 changes: 2 additions & 27 deletions frontend/public/components/deployment.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { configureUpdateStrategyModal } from './modals';
import { Conditions } from './conditions';
import { ResourceEventStream } from './events';
import { formatDuration } from './utils/datetime';
import { connectToModel } from '../kinds';
import {
DetailsPage,
List,
Expand All @@ -22,7 +21,6 @@ import {
LoadingInline,
navFactory,
pluralize,
ResourceOverviewHeading,
ResourceSummary,
SectionHeading
} from './utils';
Expand All @@ -34,15 +32,15 @@ const UpdateStrategy = (kind, deployment) => ({
callback: () => configureUpdateStrategyModal({deployment}),
});

const menuActions = [
export const menuActions = [
ModifyCount,
AddStorage,
UpdateStrategy,
EditEnvironment,
...common,
];

const DeploymentDetailsList = ({deployment}) => {
export const DeploymentDetailsList = ({deployment}) => {
const isRecreate = (deployment.spec.strategy.type === 'Recreate');
const progressDeadlineSeconds = _.get(deployment, 'spec.progressDeadlineSeconds');
return <dl className="co-m-pane__details">
Expand All @@ -59,29 +57,6 @@ const DeploymentDetailsList = ({deployment}) => {
</dl>;
};

export const DeploymentOverview = connectToModel(({kindObj, resource: deployment}) =>
<div className="overview__sidebar-pane resource-overview">
<ResourceOverviewHeading
actions={menuActions}
kindObj={kindObj}
resource={deployment}
/>
<div className="overview__sidebar-pane-body resource-overview__body">
<div className="resource-overview__pod-counts">
<DeploymentPodCounts resource={deployment} resourceKind={DeploymentModel} />
</div>
<div className="resource-overview__summary">
<ResourceSummary resource={deployment}>
<dt>Status</dt>
<dd>{deployment.status.availableReplicas === deployment.status.updatedReplicas ? <span>Active</span> : <div><span className="co-icon-space-r"><LoadingInline /></span> Updating</div>}</dd>
</ResourceSummary>
</div>
<div className="resource-overview__details">
<DeploymentDetailsList deployment={deployment} />
</div>
</div>
</div>);

const DeploymentDetails = ({obj: deployment}) => {
return <React.Fragment>
<div className="co-m-pane__body">
Expand Down
2 changes: 1 addition & 1 deletion frontend/public/components/factory/list-page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const CompactExpandButtons = ({expand = false, onExpandChange = _.noop})
</label>
</div>;

/** @type {React.SFC<{label: string, onChange: React.ChangeEventHandler<any>, defaultValue: string}}>} */
/** @type {React.SFC<{autofocus?: boolean, disabled?: boolean, label: string, onChange: React.ChangeEventHandler<any>, defaultValue: string}}>} */
export const TextFilter = ({label, onChange, defaultValue, style, className, autoFocus}) => {
if (_.isUndefined(autoFocus)) {
if (window.matchMedia('(min-width: 800px)').matches) {
Expand Down
File renamed without changes.
43 changes: 43 additions & 0 deletions frontend/public/components/overview/daemon-set-overview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as React from 'react';

import { DaemonSetModel } from '../../models';
import { ResourceSummary } from '../utils';
import { ResourceOverviewDetails } from './resource-overview-details';
import {
menuActions,
DaemonSetDetailsList
} from '../daemon-set';

import { NetworkingOverview } from './networking-overview';

const DaemonSetOverviewDetails: React.SFC<{item:any}> = ({item}) =>
<div className="co-m-pane__body resource-overview__body">
<div className="resource-overview__summary">
<ResourceSummary resource={item.obj} />
</div>
<div className="resource-overview__details">
<DaemonSetDetailsList ds={item.obj} />
</div>
</div>;

const DaemonSetResourceOverview: React.SFC<{item: any}> = ({item: {services, routes}}) =>
<NetworkingOverview services={services} routes={routes} />;

const tabs = [
{
name: 'Overview',
component: DaemonSetOverviewDetails
},
{
name: 'Resources',
component: DaemonSetResourceOverview
}
];

export const DaemonSetOverview: React.SFC<{item: any}> = ({item}) =>
<ResourceOverviewDetails
item={item}
kindObj={DaemonSetModel}
menuActions={menuActions}
tabs={tabs}
/>;
62 changes: 62 additions & 0 deletions frontend/public/components/overview/deployment-config-overview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import * as React from 'react';

import { DeploymentConfigModel } from '../../models';
import {
DeploymentConfigDetailsList,
menuActions
} from '../deployment-config';
import {
DeploymentPodCounts,
LoadingInline,
ResourceSummary,
} from '../utils';

import { NetworkingOverview } from './networking-overview';
import { ResourceOverviewDetails } from './resource-overview-details';

const DeploymentConfigOverviewDetails: React.SFC<{item:any}> = ({item: {obj: dc}}) => {
return <div className="overview__sidebar-pane-body resource-overview__body">
<div className="resource-overview__pod-counts">
<DeploymentPodCounts resource={dc} resourceKind={DeploymentConfigModel} />
</div>
<div className="resource-overview__summary">
<ResourceSummary resource={dc}>
<dt>Status</dt>
<dd>
{
dc.status.availableReplicas === dc.status.updatedReplicas
? 'Active'
: <div>
<span className="co-icon-space-r"><LoadingInline /></span> Updating
</div>
}
</dd>
</ResourceSummary>
</div>
<div className="resource-overview__details">
<DeploymentConfigDetailsList dc={dc} />
</div>
</div>;
};

const DeploymentConfigResources: React.SFC<{item:any}> = ({item: {services, routes}}) =>
<NetworkingOverview routes={routes} services={services} />;

const tabs = [
{
name: 'Overview',
component: DeploymentConfigOverviewDetails
},
{
name: 'Resources',
component: DeploymentConfigResources
}
];

export const DeploymentConfigOverviewPage: React.SFC<{item:any}> = ({item}) =>
<ResourceOverviewDetails
item={item}
kindObj={DeploymentConfigModel}
menuActions={menuActions}
tabs={tabs}
/>;
Loading

0 comments on commit 9f22502

Please sign in to comment.