Merge pull request openshift#1023 from spadgett/global-config-table

Update global configuration table
sanketpathak · Jan 9, 2019 · 2dae6f6 · 2dae6f6
2 parents 4b51d70 + bbbdb07
commit 2dae6f6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/frontend/public/components/cluster-settings/cluster-settings.tsx b/frontend/public/components/cluster-settings/cluster-settings.tsx
@@ -175,9 +175,9 @@ const ClusterVersionDetailsTable: React.SFC<ClusterVersionDetailsTableProps> = (
  <div className="co-m-pane__body-group">
  <dl className="co-m-pane__details">
  <dt>Cluster ID</dt>
- <dd>{cv.spec.clusterID}</dd>
+ <dd className="co-break-all">{cv.spec.clusterID}</dd>
  <dt>Current Payload</dt>
- <dd>{_.get(cv, 'status.current.payload')}</dd>
+ <dd className="co-break-all">{_.get(cv, 'status.current.payload')}</dd>
  <dt>Cluster Autoscaler</dt>
  <dd>
  {_.isEmpty(autoscalers)
@@ -199,7 +199,7 @@ const pages = [{
  component: ClusterVersionDetailsTable,
 }, {
  href: 'globalconfig',
- name: 'Global Config',
+ name: 'Global Configuration',
  component: GlobalConfigPage,
 }, {
  href: 'clusteroperators',

diff --git a/frontend/public/components/cluster-settings/global-config.tsx b/frontend/public/components/cluster-settings/global-config.tsx
@@ -4,23 +4,21 @@ import * as _ from 'lodash-es';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { K8sKind, k8sList, referenceForModel } from '../../module/k8s';
-import { ResourceLink, resourcePathFromModel } from '../utils/resource-link';
+import { K8sKind, k8sList } from '../../module/k8s';
+import { resourcePathFromModel } from '../utils/resource-link';
 
 const globalConfigListStateToProps = ({k8s}) => ({
  configResources: k8s.getIn(['RESOURCES', 'configResources']),
 });
 
 const ItemRow = ({item}) => {
+ const resourceLink = resourcePathFromModel(item.model, item.metadata.name, item.metadata.namespace);
  return <div className="row co-resource-list__item">
- <div className="col-sm-5 col-xs-6">
- <ResourceLink kind={referenceForModel(item.model)} name={item.metadata.name} />
- </div>
- <div className="col-sm-5 col-xs-6">
- {item.kind}
+ <div className="col-sm-10 col-xs-12">
+ <Link to={resourceLink}>{item.kind}</Link>
  </div>
  <div className="col-sm-2 hidden-xs">
- <Link to={`${resourcePathFromModel(item.model, item.metadata.name)}/yaml`} className="btn btn-default pull-right">Edit YAML</Link>
+ <Link to={`${resourceLink}/yaml`} className="btn btn-default pull-right">Edit YAML</Link>
  </div>
  </div>;
 };
@@ -34,14 +32,14 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
  componentDidMount() {
  let errorMessage = '';
  Promise.all(this.props.configResources.map(model => {
- return k8sList(model)
+ return k8sList(model, { fieldSelector: 'metadata.name=cluster' })
  .catch(err => {
  errorMessage += `${err.message} `;
  this.setState({ errorMessage });
  return [];
  }).then(items => items.map(i => ({...i, model})));
  })).then((responses) => {
- const items = _.orderBy(_.flatten(responses), ['metadata.name', 'kind'], ['asc', 'asc']);
+ const items = _.sortBy(_.flatten(responses), 'kind', 'asc');
  this.setState({items});
  });
  }
@@ -51,10 +49,12 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
 
  return <div className="co-m-pane__body">
  {errorMessage && <div className="alert alert-danger"><span className="pficon pficon-error-circle-o" aria-hidden="true" />{errorMessage}</div>}
+ <p className="co-m-pane__explanation">
+ Edit the following resources to manage the configuration of your cluster.
+ </p>
  <div className="co-m-table-grid co-m-table-grid--bordered">
  <div className="row co-m-table-grid__head">
- <div className="col-sm-5 col-xs-6">Name</div>
- <div className="col-sm-5 col-xs-6">Kind</div>
+ <div className="col-sm-10 col-xs-12">Configuration Resource</div>
  <div className="col-sm-2 hidden-xs"></div>
  </div>
  <div className="co-m-table-grid__body">

diff --git a/frontend/public/components/nav.jsx b/frontend/public/components/nav.jsx
@@ -278,6 +278,7 @@ const rolebindingsStartsWith = ['rolebindings', 'clusterrolebindings'];
 const quotaStartsWith = ['resourcequotas', 'clusterresourcequotas'];
 const imagestreamsStartsWith = ['imagestreams', 'imagestreamtags'];
 const monitoringAlertsStartsWith = ['monitoring/alerts', 'monitoring/alertrules'];
+const clusterSettingsStartsWith = ['settings/cluster', 'config.openshift.io'];
 
 const MonitoringNavSection_ = ({ urls }) => {
  const prometheusURL = urls[MonitoringRoutes.Prometheus];
@@ -378,7 +379,7 @@ export const Navigation = ({ isNavOpen, onNavSelect }) => {
  <ResourceClusterLink resource="nodes" name="Nodes" required={FLAGS.CAN_LIST_NODE} />
  <ResourceNSLink resource={referenceForModel(MachineSetModel)} name="Machine Sets" required={FLAGS.CLUSTER_API} />
  <ResourceNSLink resource={referenceForModel(MachineModel)} name="Machines" required={FLAGS.CLUSTER_API} />
- <HrefLink href="/settings/cluster" activePath="/settings/cluster/" name="Cluster Settings" required={FLAGS.CLUSTER_VERSION} />
+ <HrefLink href="/settings/cluster" activePath="/settings/cluster/" name="Cluster Settings" required={FLAGS.CLUSTER_VERSION} startsWith={clusterSettingsStartsWith} />
  <ResourceNSLink resource="serviceaccounts" name="Service Accounts" />
  <ResourceNSLink resource="roles" name="Roles" startsWith={rolesStartsWith} />
  <ResourceNSLink resource="rolebindings" name="Role Bindings" startsWith={rolebindingsStartsWith} />

diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
@@ -283,6 +283,12 @@
  @include co-break-word;
 }
 
+// Prefer `co-break-word` in most cases. `co-break-all` should generally be reserved for URLs and long,
+// unbroken identifiers.
+.co-break-all {
+ word-break: break-all;
+}
+
 // append external-link icon to <a> so that it doesn't wrap without text
 // there must be no white space between the text and the closing </a> tag holding the pseudo element
 .co-external-link:after {