fix the issue with logs and table visualzation in dashboards (#19)

* fix the issue with logs and table visualzation in dashboards

* add space

Author: kcrandall

src/components/QueryEditor.tsx

@@ -17,6 +17,8 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, app, data
   const [orgOptions, setOrgOptions]: any = useState([]);
   const [isMounted, setIsMounted]: any = useState(false);
   const [isLoading, setIsLoading]: any = useState([]);
+  const [displayOptions, setDisplayOptions]: any = useState([]);
+
 
   const isInDashboard = useMemo(() => app === 'panel-editor', [app]);
 
@@ -32,6 +34,14 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, app, data
     setIsLoading(isLoading.slice(1));
   };
 
+  useEffect(() => {
+    setDisplayOptions([
+      { label: 'Auto', value: 'auto' },
+      { label: 'Force Graph', value: 'graph' },
+      { label: 'Force Logs', value: 'logs' },
+    ]);
+  }, []);
+
   useEffect(() => {
     startLoading();
     getOrganizations({ url: datasource.url, page_num: 0, page_size: 1000, sort_by: 'id' })
@@ -66,6 +76,7 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, app, data
                 stream: streams[0].name,
                 organization: orgs.data[0].name,
                 sqlMode: isInDashboard ? true : false,
+                displayMode: query.displayMode ?? 'auto'
               });
             } else if (isInDashboard && query.organization && query.stream && query.query) {
               updateQuery();
@@ -137,6 +148,11 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, app, data
     });
   };
 
+  const onDisplayModeChange = (displayMode: any) => {
+    const newMode = displayMode.value as MyQuery['displayMode'];
+    onChange({ ...query, displayMode: newMode });
+  };
+
   const onChangeQuery = ({ value, sqlMode }: { value: string; sqlMode: boolean }) => {
     onChange({ ...query, query: value, sqlMode: sqlMode });
   };
@@ -266,6 +282,18 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, app, data
           <Switch data-testid="query-editor-sql-mode-switch" value={!!query.sqlMode} onChange={toggleSqlMode} />
         </div>
       )}
+      {/* Display Mode selector */}
+      <div className={css`display: flex; align-items: center; padding-bottom: 0.5rem;`}>
+        <InlineLabel className={css`width: fit-content;`} transparent>
+          Display Mode
+        </InlineLabel>
+        <Select
+          options={displayOptions}
+          value={displayOptions.find((o: any) => o.value === query.displayMode) || displayOptions[0]}
+          onChange={onDisplayModeChange}
+          width={20}
+        />
+      </div>
       {query.stream && (
         <ZincEditor
           key={generateEditorId}

src/datasource.ts

@@ -57,12 +57,23 @@ export class DataSource
         });
       }
       const reqData = buildQuery(target, timestamps, this.streamFields, options.app, this.timestampColumn);
-      if (JSON.stringify(reqData) === this.cachedQuery.requestQuery) {
+      const cacheKey = JSON.stringify({
+        reqData,
+        displayMode: target.displayMode ?? 'auto',
+      });
+      
+      if (cacheKey === this.cachedQuery.requestQuery) {
         return this.cachedQuery.data
           ?.then((res) => {
+            const mode = target.displayMode || 'auto';
             if (target?.refId?.includes(REF_ID_STARTER_LOG_VOLUME)) {
               return res.graph;
             }
+            if (options.app === 'panel-editor' || options.app === 'dashboard') {
+              if(mode === 'graph' || mode === 'auto') {
+                return res.graph;
+              }
+            }
             return res.logs;
           })
           .finally(() => {
@@ -75,12 +86,16 @@ export class DataSource
         return getGraphDataFrame([], target, options.app, this.timestampColumn);
       }
 
-      this.cachedQuery.requestQuery = JSON.stringify(reqData);
+      this.cachedQuery.requestQuery = cacheKey;
       this.cachedQuery.isFetching = true;
       return this.doRequest(target, reqData)
         .then((response) => {
           if (options.app === 'panel-editor' || options.app === 'dashboard') {
-            return getGraphDataFrame(response.hits, target, options.app, this.timestampColumn);
+            const mode = target.displayMode || 'auto';
+            const logsDf = getLogsDataFrame(response.hits, target, this.streamFields, this.timestampColumn);
+            const graphDf = getGraphDataFrame(response.hits, target, options.app, this.timestampColumn);
+            this.cachedQuery.promise?.resolve({ graph: graphDf, logs: logsDf });
+            return mode === 'logs' ? logsDf : graphDf;
           }
 
           const logsDataFrame = getLogsDataFrame(response.hits, target, this.streamFields, this.timestampColumn);

src/features/log/queryResponseBuilder.ts

@@ -2,6 +2,9 @@ import { FieldType, MutableDataFrame, PreferredVisualisationType } from '@grafan
 import { MyQuery } from '../../types';
 import { convertTimeToMs, getFieldType } from '../../utils/zincutils';
 
+const isTimeField = (name: string, timestampColumn: string): boolean =>
+  name === timestampColumn || name.startsWith('x_axis');
+
 export const getLogsDataFrame = (
   data: any,
   target: MyQuery,
@@ -55,7 +58,7 @@ export const getGraphDataFrame = (
   }
 
   for (let i = 0; i < fields.length; i++) {
-    if (fields[i] === timestampColumn) {
+    if (isTimeField(fields[i], timestampColumn)) {
       graphData.addField({
         config: {
           filterable: true,
@@ -87,7 +90,7 @@ const getField = (log: any, columns: any, timestampColumn: string) => {
   for (let i = 0; i < columns.length; i++) {
     let col_name = columns[i];
     let col_value = log[col_name]
-    if (col_name === timestampColumn) {
+    if (isTimeField(col_name, timestampColumn)) {
       // We have to convert microseconds if we receive them
       // 500 billion / year 17814 is probably a good threshold for milliseconds
       if (col_value > 500_000_000_000) {

src/types.ts

@@ -12,10 +12,12 @@ export interface MyQuery extends DataQuery {
     rows: number;
   };
   streamFields: any[];
+  displayMode?: 'auto' | 'graph' | 'logs';
 }
 
 export const DEFAULT_QUERY: Partial<MyQuery> = {
   constant: 6.5,
+  displayMode: 'auto',
 };
 
 /**