fix: topology kafka side panel style and additional metadata

PuneetPunamiya · Mar 29, 2021 · 4d85762 · 4d85762
1 parent 71f8323
commit 4d85762
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 33 deletions.
diff --git a/frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json b/frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json
@@ -35,5 +35,7 @@
  "Reduce operational complexity and focus on building and scaling applications that add more value.": "Reduce operational complexity and focus on building and scaling applications that add more value.",
  "Browse managed services to connect applications and microservices to other services and support services to create a full solution.": "Browse managed services to connect applications and microservices to other services and support services to create a full solution.",
  "RHOAS can include Managed Kafka, Service Registry, custom resources for Managed Kafka, and Open Data Hub.": "RHOAS can include Managed Kafka, Service Registry, custom resources for Managed Kafka, and Open Data Hub.",
- "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:": "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:"
+ "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:": "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:",
+ "No results found": "No results found",
+ "No results match the filter criteria. Remove all filters or clear all filters to show results.": "No results match the filter criteria. Remove all filters or clear all filters to show results."
 }
diff --git a/frontend/packages/rhoas-plugin/src/components/streams-list/StreamsInstanceTable.tsx b/frontend/packages/rhoas-plugin/src/components/streams-list/StreamsInstanceTable.tsx
@@ -15,7 +15,10 @@ import {
  TableHeader,
  TableBody,
  RowSelectVariant,
- SortByDirection
+ SortByDirection,
+ Tbody,
+ Tr,
+ Td
 } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { Timestamp } from '@console/internal/components/utils';
@@ -94,30 +97,26 @@ const StreamsInstanceTable = ({
  handleTextInputNameChange(value);
  }
 
- const emptyStateRows = [
- {
- heightAuto: true,
- cells: [
- {
- props: { colSpan: 6 },
- title: (
- <Bullseye>
- <EmptyState variant={EmptyStateVariant.small}>
- <EmptyStateIcon icon={SearchIcon} />
- <Title headingLevel="h2" size="lg">
- No Managed Kafka clusters found 
- </Title>
- <EmptyStateBody>
- No results match the filter criteria
- </EmptyStateBody>
- <Button variant="link" onClick={clearFilters}>Clear filters</Button>
- </EmptyState>
- </Bullseye>
- )
- }
- ]
- }
- ]
+ const emptyStateRows = (
+ <Tbody>
+ <Tr>
+ <Td colSpan={7}>
+ <Bullseye>
+ <EmptyState variant={EmptyStateVariant.small}>
+ <EmptyStateIcon icon={SearchIcon} />
+ <Title headingLevel="h2" size="lg">
+ {t('No results found')}
+ </Title>
+ <EmptyStateBody>
+ {t('No results match the filter criteria. Remove all filters or clear all filters to show results.')}
+ </EmptyStateBody>
+ <Button variant="link" onClick={clearFilters}>Clear all filters</Button>
+ </EmptyState>
+ </Bullseye>
+ </Td>
+ </Tr>
+ </Tbody>
+ );
 
  const onSelectTableRow = (event, isSelected, rowId) => {
  let rows = formattedKafkas.map((row, index) => {
@@ -177,15 +176,19 @@ const StreamsInstanceTable = ({
  <Table
  aria-label={t('rhoas-plugin~List of Kafka Instances')}
  cells={tableColumns}
- rows={pageKafkas.length === 0 ? emptyStateRows : formattedKafkas}
+ rows={formattedKafkas}
  onSelect={onSelectTableRow}
  selectVariant={RowSelectVariant.radio}
  className="mk-streams-table"
  onSort={onSort}
  sortBy={sortBy}
  >
  <TableHeader />
- <TableBody />
+ {pageKafkas.length === 0 ? (
+ emptyStateRows
+ ) : (
+ <TableBody />
+ )}
  </Table>
  )}
  </>

diff --git a/frontend/packages/rhoas-plugin/src/topology/components/TopologyKafkaPanel.tsx b/frontend/packages/rhoas-plugin/src/topology/components/TopologyKafkaPanel.tsx
@@ -39,18 +39,20 @@ type TopologyRhoasPanelProps = PropsFromState & PropsFromDispatch & OwnProps;
 
 const DetailsComponent: React.FC<any> = ({ obj }) => {
  const { t } = useTranslation();
- const host = obj.status?.boostrapServer?.host || '';
+ const boostrapServerHost = obj.status?.bootstrapServerHost;
 
  return (
  <div className="co-m-pane__body">
  <div className="row">
  <div className="col-sm-6">
  <ResourceSummary resource={obj} />
  </div>
- <dl className="co-m-pane__details">
- <dt>{t('rhoas-plugin~Bootstrap Server')}</dt>
- <dd>{host}</dd>
- </dl>
+ {boostrapServerHost && 
+ <dl className="co-m-pane__details">
+ <dt>{t('rhoas-plugin~Bootstrap Server')}</dt>
+ <dd>{boostrapServerHost}</dd>
+ </dl>
+ }
  </div>
  </div>
  );