Add support for all Kubernetes resources

CHANGELOG.md

@@ -23,6 +23,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#22](https://github.com/kobsio/kobs/pull/22): Add Helm chart.
 - [#23](https://github.com/kobsio/kobs/pull/23): Add Kustomize files and demo.
 - [#24](https://github.com/kobsio/kobs/pull/24): Add documentation.
+- [#26](https://github.com/kobsio/kobs/pull/26): Add support for all Kubernetes resources.
 
 ### Fixed
 

app/src/components/Home.tsx

@@ -20,16 +20,11 @@ const Home: React.FunctionComponent = () => {
             title="Applications"
             body={applicationsDescription}
             link="/applications"
-            icon="/img/plugins/kobs.png"
+            icon="/img/plugins/applications.png"
           />
         </GalleryItem>
         <GalleryItem>
-          <HomeItem
-            title="Resources"
-            body={resourcesDescription}
-            link="/resources"
-            icon="/img/plugins/kubernetes.png"
-          />
+          <HomeItem title="Resources" body={resourcesDescription} link="/resources" icon="/img/plugins/resources.png" />
         </GalleryItem>
 
         {pluginsContext.plugins.length === 0 ? (

app/src/components/LinkWrapper.tsx

@@ -10,12 +10,12 @@ interface ILinkWrapperProps {
 // which should navigate the user to another location. This is to prefer over an onClick handler, so that the user can
 // decide if he wants the link in a new tab or not.
 const LinkWrapper: React.FunctionComponent<ILinkWrapperProps> = ({ children, link }: ILinkWrapperProps) => {
+  if (link.startsWith('http')) {
+    return <div onClick={(): Window | null => window.open(link, '_blank')}>{children}</div>;
+  }
+
   return (
-    <Link
-      to={link}
-      target={link.startsWith('http') ? '_blank' : undefined}
-      style={{ color: 'inherit', textDecoration: 'inherit' }}
-    >
+    <Link to={link} style={{ color: 'inherit', textDecoration: 'inherit' }}>
       {children}
     </Link>
   );

app/src/plugins/elasticsearch/ElasticsearchPreviewChart.tsx

@@ -78,7 +78,7 @@ const ElasticsearchPreviewChart: React.FunctionComponent<IElasticsearchPreviewCh
     <React.Fragment>
       <div className="pf-u-font-size-lg pf-u-text-nowrap pf-u-text-truncate">{data.hits} Hits</div>
       {query.name ? (
-        <div className="pf-u-font-size-sm pf-u-color-400  pf-u-text-nowrap pf-u-text-truncates">{query.name}</div>
+        <div className="pf-u-font-size-sm pf-u-color-400 pf-u-text-nowrap pf-u-text-truncate">{query.name}</div>
       ) : null}
 
       <div style={{ height: '75px', position: 'relative', width: '100%' }} ref={refChart}>

app/src/plugins/jaeger/JaegerPageCompareTrace.tsx

@@ -93,7 +93,7 @@ const JaegerPageCompareTrace: React.FunctionComponent<IJaegerPageCompareTracePro
       <Grid>
         <GridItem span={headerComponent ? 9 : 12}>
           <PageSection style={{ height: '100%' }} variant={PageSectionVariants.light}>
-            <Title headingLevel="h6" size="xl">
+            <Title className="pf-u-text-nowrap pf-u-text-truncate" headingLevel="h6" size="xl">
               {data.trace.processes[data.trace.spans[0].processID].serviceName}: {data.trace.spans[0].operationName}{' '}
               <span className="pf-u-pl-sm pf-u-font-size-sm pf-u-color-400">{data.trace.traceID}</span>
             </Title>

app/src/utils/helpers.ts

@@ -1,3 +1,5 @@
+import { V1LabelSelector } from '@kubernetes/client-node';
+
 // timeDifference calculates the difference of two given timestamps and returns a human readable string for the
 // difference. It is used to get the same style for the age of resources like it is displayed by kubectl.
 export const timeDifference = (current: number, previous: number): string => {
@@ -28,3 +30,25 @@ export const formatTime = (timestamp: number): string => {
     '0' + d.getHours()
   ).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(-2)}`;
 };
+
+// getLabelSelector returns the given label selector as string, so that it can be used within the React UI.
+export const getLabelSelector = (labelSelector: V1LabelSelector | undefined): string => {
+  if (!labelSelector) {
+    return '';
+  }
+
+  if (labelSelector.matchLabels) {
+    return Object.keys(labelSelector.matchLabels)
+      .map(
+        (key) =>
+          `${key}=${
+            labelSelector.matchLabels && labelSelector.matchLabels.hasOwnProperty(key)
+              ? labelSelector.matchLabels[key]
+              : ''
+          }`,
+      )
+      .join(', ');
+  }
+
+  return '';
+};