Fix style of several components (#69)

This commit fixes the style of several components:
- Do not hide the select box for containers in the resources logs view.
- Enable scrolling for the variables toolbar in the Prometheus plugin
  toolbar.
- Fix rendering of indentations in the Jaeger compare traces view.

Author: ricoberger

app/src/components/resources/ResourceLogs.tsx

@@ -117,7 +117,7 @@ const ResourceLogs: React.FunctionComponent<IResourceLogsProps> = ({
           <p>{data.error}</p>
         </Alert>
       ) : data.logs && data.logs.length > 0 ? (
-        <Card style={{ maxWidth: '100%', overflowX: 'scroll', padding: '16px' }}>
+        <Card style={{ maxWidth: '100%', padding: '16px' }}>
           <Checkbox
             label="No wrap"
             isChecked={noWrap}
@@ -126,12 +126,16 @@ const ResourceLogs: React.FunctionComponent<IResourceLogsProps> = ({
             id="logs-no-wrap"
             name="logs-no-wrap"
           />
+
           <p>&nbsp;</p>
-          {data.logs.map((line, index) => (
-            <div key={index} className={noWrap ? 'pf-u-text-nowrap' : ''}>
-              {line}
-            </div>
-          ))}
+
+          <div style={{ overflow: noWrap ? 'auto' : 'hidden' }}>
+            {data.logs.map((line, index) => (
+              <div key={index} className={noWrap ? 'pf-u-text-nowrap' : 'pf-u-text-break-word'}>
+                {line}
+              </div>
+            ))}
+          </div>
         </Card>
       ) : (
         <Alert variant={AlertVariant.info} title="Usage">

app/src/plugins/jaeger/JaegerPageCompareTrace.tsx

@@ -134,7 +134,9 @@ const JaegerPageCompareTrace: React.FunctionComponent<IJaegerPageCompareTracePro
 
         <GridItem sm={12} md={12} lg={12} xl={12} xl2={12}>
           <PageSection variant={PageSectionVariants.default}>
-            <JaegerSpans name={name} trace={data.trace} />
+            <div style={{ position: 'relative' }}>
+              <JaegerSpans name={name} trace={data.trace} />
+            </div>
           </PageSection>
         </GridItem>
       </Grid>

app/src/plugins/prometheus/PrometheusPluginToolbar.tsx

@@ -35,22 +35,20 @@ const PrometheusPluginToolbar: React.FunctionComponent<IPrometheusPluginToolbarP
   };
 
   return (
-    <Card>
+    <Card style={{ maxWidth: '100%', overflow: 'auto' }}>
       <Toolbar id="prometheus-toolbar">
         <ToolbarContent>
           <ToolbarToggleGroup style={{ width: '100%' }} toggleIcon={<FilterIcon />} breakpoint="lg">
             {variables ? (
               <ToolbarGroup>
-                <ToolbarItem>
-                  {variables.map((variable, index) => (
-                    <ToolbarItem key={index}>
-                      <PrometheusVariable
-                        variable={variable}
-                        selectValue={(value: string): void => onSelectVariableValue(value, index)}
-                      />
-                    </ToolbarItem>
-                  ))}
-                </ToolbarItem>
+                {variables.map((variable, index) => (
+                  <ToolbarItem key={index}>
+                    <PrometheusVariable
+                      variable={variable}
+                      selectValue={(value: string): void => onSelectVariableValue(value, index)}
+                    />
+                  </ToolbarItem>
+                ))}
               </ToolbarGroup>
             ) : null}
             <ToolbarGroup style={{ width: '100%' }}>