Support the download of documents

CHANGELOG.md

@@ -23,6 +23,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#127](https://github.com/kobsio/kobs/pull/127): Allow `ILIKE` queries for ClickHouse logs, using the new `=~` operator.
 - [#128](https://github.com/kobsio/kobs/pull/128): Allow users to specify dashboards within a Team or Application via the new `inline` property.
 - [#131](https://github.com/kobsio/kobs/pull/131): Add chart which shows the distribution of the logs lines in the selected time range for the ClickHouse plugin.
+- [#132](https://github.com/kobsio/kobs/pull/132): Support the download of log lines in their JSON representation in the ClickHouse and Elasticsearch plugin.
 
 ### Fixed
 

plugins/clickhouse/src/components/panel/details/Actions.tsx

@@ -0,0 +1,39 @@
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import React, { useState } from 'react';
+
+import { IDocument } from '../../../utils/interfaces';
+
+interface IActionsProps {
+  document: IDocument;
+}
+
+const Actions: React.FunctionComponent<IActionsProps> = ({ document }: IActionsProps) => {
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+
+  return (
+    <React.Fragment>
+      <Dropdown
+        className="pf-c-drawer__close"
+        toggle={<KebabToggle onToggle={(): void => setShowDropdown(!showDropdown)} />}
+        isOpen={showDropdown}
+        isPlain={true}
+        position="right"
+        dropdownItems={[
+          <DropdownItem
+            key={0}
+            component={
+              <a
+                href={URL.createObjectURL(new Blob([JSON.stringify({ data: document }, null, 2)]))}
+                download={`${document['timestamp']}__${document['container_name']}__${document['pod_name']}__${document['namespace']}__${document['cluster']}.json`}
+              >
+                JSON
+              </a>
+            }
+          />,
+        ]}
+      />
+    </React.Fragment>
+  );
+};
+
+export default Actions;

plugins/clickhouse/src/components/panel/details/Details.tsx

@@ -10,11 +10,15 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
+  Tab,
+  TabTitleText,
+  Tabs,
 } from '@patternfly/react-core';
-import React from 'react';
+import React, { useState } from 'react';
 
+import { Editor, Title } from '@kobsio/plugin-core';
+import Actions from './Actions';
 import { IDocument } from '../../../utils/interfaces';
-import { Title } from '@kobsio/plugin-core';
 import { formatTimeWrapper } from '../../../utils/helpers';
 
 export interface IDetailsProps {
@@ -23,6 +27,8 @@ export interface IDetailsProps {
 }
 
 const Details: React.FunctionComponent<IDetailsProps> = ({ document, close }: IDetailsProps) => {
+  const [activeTab, setActiveTab] = useState<string>('overview');
+
   return (
     <DrawerPanelContent minSize="50%">
       <DrawerHead>
@@ -32,23 +38,43 @@ const Details: React.FunctionComponent<IDetailsProps> = ({ document, close }: ID
           size="lg"
         />
         <DrawerActions style={{ padding: 0 }}>
+          <Actions document={document} />
           <DrawerCloseButton onClose={close} />
         </DrawerActions>
       </DrawerHead>
 
       <DrawerPanelBody>
-        <Card>
-          <CardBody>
-            <DescriptionList className="pf-u-text-break-word">
-              {Object.keys(document).map((key) => (
-                <DescriptionListGroup key={key}>
-                  <DescriptionListTerm>{key}</DescriptionListTerm>
-                  <DescriptionListDescription>{document[key]}</DescriptionListDescription>
-                </DescriptionListGroup>
-              ))}
-            </DescriptionList>
-          </CardBody>
-        </Card>
+        <Tabs
+          activeKey={activeTab}
+          onSelect={(event, tabIndex): void => setActiveTab(tabIndex.toString())}
+          className="pf-u-mt-md"
+          isFilled={true}
+          mountOnEnter={true}
+        >
+          <Tab eventKey="overview" title={<TabTitleText>Overview</TabTitleText>}>
+            <div style={{ maxWidth: '100%', overflowX: 'scroll', padding: '24px 24px' }}>
+              <Card>
+                <CardBody>
+                  <DescriptionList className="pf-u-text-break-word">
+                    {Object.keys(document).map((key) => (
+                      <DescriptionListGroup key={key}>
+                        <DescriptionListTerm>{key}</DescriptionListTerm>
+                        <DescriptionListDescription>{document[key]}</DescriptionListDescription>
+                      </DescriptionListGroup>
+                    ))}
+                  </DescriptionList>
+                </CardBody>
+              </Card>
+            </div>
+          </Tab>
+          <Tab eventKey="json" title={<TabTitleText>JSON</TabTitleText>}>
+            <div style={{ maxWidth: '100%', overflowX: 'scroll', padding: '24px 24px' }}>
+              <Card>
+                <Editor value={JSON.stringify(document, null, 2)} mode="json" readOnly={true} />
+              </Card>
+            </div>
+          </Tab>
+        </Tabs>
       </DrawerPanelBody>
     </DrawerPanelContent>
   );

plugins/elasticsearch/src/components/panel/details/Actions.tsx

@@ -0,0 +1,39 @@
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import React, { useState } from 'react';
+
+import { IDocument } from '../../../utils/interfaces';
+
+interface IActionsProps {
+  document: IDocument;
+}
+
+const Actions: React.FunctionComponent<IActionsProps> = ({ document }: IActionsProps) => {
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+
+  return (
+    <React.Fragment>
+      <Dropdown
+        className="pf-c-drawer__close"
+        toggle={<KebabToggle onToggle={(): void => setShowDropdown(!showDropdown)} />}
+        isOpen={showDropdown}
+        isPlain={true}
+        position="right"
+        dropdownItems={[
+          <DropdownItem
+            key={0}
+            component={
+              <a
+                href={URL.createObjectURL(new Blob([JSON.stringify({ data: document }, null, 2)]))}
+                download={`${document['_id']}__${document['_index']}.json`}
+              >
+                JSON
+              </a>
+            }
+          />,
+        ]}
+      />
+    </React.Fragment>
+  );
+};
+
+export default Actions;

plugins/elasticsearch/src/components/panel/details/Details.tsx

@@ -12,6 +12,7 @@ import {
 import React, { useState } from 'react';
 
 import { Editor, Title } from '@kobsio/plugin-core';
+import Actions from './Actions';
 import Document from './Document';
 import { IDocument } from '../../../utils/interfaces';
 import { formatTimeWrapper } from '../../../utils/helpers';
@@ -35,6 +36,7 @@ const Details: React.FunctionComponent<IDetailsProps> = ({ document, close }: ID
           size="lg"
         />
         <DrawerActions style={{ padding: 0 }}>
+          <Actions document={document} />
           <DrawerCloseButton onClose={close} />
         </DrawerActions>
       </DrawerHead>