Fix date handling, field count, small css teaks (#56)

slackhq · Mar 27, 2024 · cf5670c · cf5670c
1 parent 906c1e0
commit cf5670c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.6.1
+### New features
+* N/A
+
+### Breaking changes
+* N/A
+
+### Bugs squashed
+* Resolved a date timezone formatting issue where dates were incorrectly rendered on explore page
+* Disabled field type icon as this was rendering incorrect types
+* Addressed some text alignment and overflow bugs
+* Fixed available field count not including top fields
+
 ## 0.6.0
 ### New features
 * N/A

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "slack-astra-app",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Grafana Astra App",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",

diff --git a/src/datasource/components/Logs/LogsCell.tsx b/src/datasource/components/Logs/LogsCell.tsx
@@ -158,22 +158,23 @@ const DocumentCell = (log: Log, style: any, rowIndex: number, expanded: boolean,
                 fontFamily: 'monospace',
                 fontSize: '12px',
                 overflow: 'hidden',
-                paddingTop: '10px',
+                paddingTop: '5px',
                 ...style
             }}
     >
-        <div style={{maxHeight: '115px', overflow: 'hidden'}}>
-            {
-                Array.from(log.keys()).map((key) => (
-                    key !== logMessageField ?
+        <div style={{maxHeight: '115px', overflow: 'hidden', overflowWrap: 'anywhere'}}>
+
+                {
+                    Array.from(log.keys()).map((key) => (
+                      key !== logMessageField ?
                         <LogKeyVal
-                            field={key}
-                            val={log.get(key)}
-                            key={key}
+                          field={key}
+                          val={log.get(key)}
+                          key={key}
                         />
-                    : <></>
-                ))
-            }
+                        : <></>
+                    ))
+                }
         </div>
         {
             expanded ?
@@ -224,7 +225,7 @@ const TimestampCell = (timestamp: string, style: any, rowIndex: number, expanded
                 />
             </div>
             <>
-                {dateTimeParse(timestamp, {timeZone: getTimeZone()}).format("YYYY-MM-DD @ HH:mm:ss:SSS Z").toString()}
+                {dateTimeParse(new Date(timestamp), {timeZone: getTimeZone()}).format("YYYY-MM-DD @ HH:mm:ss:SSS Z").toString()}
             </>
         </div>
     );

diff --git a/src/pages/explore.tsx b/src/pages/explore.tsx
@@ -22,7 +22,7 @@ import {
   TextBoxVariable,
   VariableValueSelectors,
 } from '@grafana/scenes';
-import { AppRootProps, DataFrame } from '@grafana/data';
+import { AppRootProps, DataFrame, FieldType } from "@grafana/data";
 import {
   Button,
   DrawStyle,
@@ -187,35 +187,22 @@ const AstraQueryRenderer = ({ model }: SceneComponentProps<AstraQuery>) => {
 
 const AstraFieldsList = (fields: Field[], topTenMostPopularFields: Field[], datasourceUserConfig: DatasourceUserConfig) => {
   const getIcon = (field: Field): string => {
-    if (field.type === 'string') {
-      return 'fa fas fa-font';
-    }
+    // todo - since these all come back as string currently, return
+    return 'fa fas fa-circle';
 
-    if (field.type === 'text') {
+    if (field.type === FieldType.string) {
       return 'fa fas fa-font';
     }
 
-    if (field.type === 'integer') {
-      return 'fa fas fa-hashtag';
-    }
-
-    if (field.type === 'float') {
-      return 'fa fas fa-hashtag';
-    }
-
-    if (field.type === 'double') {
-      return 'fa fas fa-hashtag';
-    }
-
-    if (field.type === 'long') {
+    if (field.type === FieldType.number) {
       return 'fa fas fa-hashtag';
     }
 
-    if (field.type === 'boolean') {
-      return 'fa fas fa-lightbulb';
+    if (field.type === FieldType.boolean) {
+      return 'fa fas fa-lightbulb-o';
     }
 
-    if (field.type === 'time') {
+    if (field.type === FieldType.time) {
       return 'fa far fa-calendar';
     }
 
@@ -283,24 +270,23 @@ const AstraFieldsList = (fields: Field[], topTenMostPopularFields: Field[], data
           queryComponent.appendToQuery(`NOT ${field.name}: ${value}`)
         }
       >
-        <div style={{backgroundColor: fieldBackgroundColor, display: 'flex', flexDirection: 'row', paddingLeft: '15px', alignItems: 'center', gap: '10px'}}>
-            <i className={getIcon(field)} title={getTitle(field)} style={{ paddingTop: '12px' }}></i>
-            <span
+        <div style={{backgroundColor: fieldBackgroundColor, display: 'flex', flex: '1', flexDirection: 'row', paddingLeft: '15px', alignItems: 'center', height: '30px', gap: '10px'}}>
+            <i className={getIcon(field)} title={getTitle(field)} style={{}}></i>
+            <div
               style={{
-                paddingTop: '10px',
                 fontFamily: 'monospace',
               }}
             >
               {field.name}
-            </span>
+            </div>
         </div>
       </FieldValueFrequency>
     </div>);
   }
 
 
   return (
-    <div style={{width: '100%', height: '100%'}}>
+    <div style={{width: '100%', height: '100%', overflow: 'hidden'}}>
       <AutoSizer>
         {
           ({height, width}) => {
@@ -375,7 +361,7 @@ const AstraFieldsRenderer = ({ model }: SceneComponentProps<FieldStats>) => {
               </span>
             </div>
 
-            <Counter value={fields.length} />
+            <Counter value={fields.length + topTenMostPopularFields.length} />
           </div>
           {visible ? AstraFieldsList(fields, topTenMostPopularFields, datasourceUserConfig) : null}
         </div>