feat(workorders): add lookup for workspace

src/datasources/work-orders/WorkOrdersDataSource.ts

@@ -2,6 +2,7 @@ import { DataFrameDTO, DataQueryRequest, DataSourceInstanceSettings, TestDataSou
 import { BackendSrv, TemplateSrv, getBackendSrv, getTemplateSrv } from '@grafana/runtime';
 import { DataSourceBase } from 'core/DataSourceBase';
 import { OutputType, WorkOrdersQuery } from './types';
+import { Workspace } from 'core/types';
 
 export class WorkOrdersDataSource extends DataSourceBase<WorkOrdersQuery> {
   constructor(
@@ -10,6 +11,7 @@ export class WorkOrdersDataSource extends DataSourceBase<WorkOrdersQuery> {
     readonly templateSrv: TemplateSrv = getTemplateSrv()
   ) {
     super(instanceSettings, backendSrv, templateSrv);
+    this.loadWorkspaces();
   }
 
   baseUrl = `${this.instanceSettings.url}/niworkorder/v1`;
@@ -19,6 +21,9 @@ export class WorkOrdersDataSource extends DataSourceBase<WorkOrdersQuery> {
     outputType: OutputType.Properties
   };
 
+  readonly workspacesCache = new Map<string, Workspace>([]);
+  workspacesPromise: Promise<Map<string, Workspace>> | null = null;
+
   async runQuery(query: WorkOrdersQuery, options: DataQueryRequest): Promise<DataFrameDTO> {
     return {
       refId: query.refId,
@@ -30,6 +35,25 @@ export class WorkOrdersDataSource extends DataSourceBase<WorkOrdersQuery> {
     return true;
   }
 
+  async loadWorkspaces(): Promise<Map<string, Workspace>> {
+    if (this.workspacesCache.size > 0) {
+      return this.workspacesCache;
+    }
+
+    if (this.workspacesPromise) {
+      return this.workspacesPromise;
+    }
+
+    this.workspacesPromise = this.getWorkspaces().then(workspaces => {
+      if (workspaces) {
+        workspaces.forEach(workspace => this.workspacesCache.set(workspace.id, workspace));
+      }
+      return this.workspacesCache;
+    });
+
+    return this.workspacesPromise;
+  }
+
   async testDatasource(): Promise<TestDataSourceResponse> {
     await this.post(this.queryWorkOrdersUrl, { take: 1 });
     return { status: 'success', message: 'Data source connected and authentication successful!' };

src/datasources/work-orders/components/WorkOrdersQueryEditor.tsx

@@ -1,20 +1,47 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { WorkOrdersDataSource } from '../WorkOrdersDataSource';
 import { OutputType, WorkOrdersQuery } from '../types';
 import { WorkOrdersQueryBuilder } from './query-builder/WorkOrdersQueryBuilder';
 import { InlineField, RadioButtonGroup, VerticalGroup } from '@grafana/ui';
+import { Workspace } from 'core/types';
 
 type Props = QueryEditorProps<WorkOrdersDataSource, WorkOrdersQuery>;
 
 export function WorkOrdersQueryEditor({ query, onChange, onRunQuery, datasource }: Props) {
   query = datasource.prepareQuery(query);
 
-  const onOutputTypeChange = useCallback((value: OutputType) => {
-    onChange({ ...query, outputType: value });
-    onRunQuery();
-  }, [query, onChange, onRunQuery]);
-
+  const [workspaces, setWorkspaces] = useState<Workspace[]|null>(null);
+  useEffect(() => {
+    const loadWorkspaces = async () => {
+      await datasource.workspacesPromise;
+      setWorkspaces(Array.from(datasource.workspacesCache.values()));
+    };
+
+    loadWorkspaces();
+  }, [datasource]);
+
+  const handleQueryChange = useCallback(
+    (query: WorkOrdersQuery, runQuery = true): void => {
+      onChange(query);
+      if (runQuery) {
+        onRunQuery();
+      }
+    },
+    [onChange, onRunQuery]
+  );
+
+  const onOutputTypeChange = (value: OutputType) => {
+    handleQueryChange({ ...query, outputType: value });
+  };
+
+  const onParameterChange = (value: string) => {
+    if (query.queryBy !== value) {
+      query.queryBy = value;
+      handleQueryChange({ ...query, queryBy: value });
+    }
+  };
+
   return (
     <>
       <VerticalGroup>
@@ -26,7 +53,10 @@ export function WorkOrdersQueryEditor({ query, onChange, onRunQuery, datasource
           />
         </InlineField>
         <InlineField label="Query By" labelWidth={25} tooltip={tooltips.queryBy}>
-          <WorkOrdersQueryBuilder 
+          <WorkOrdersQueryBuilder
+            filter={query.queryBy}
+            workspaces={workspaces}
+            onChange={(event: any) => onParameterChange(event.detail.linq)}
             globalVariableOptions={[]}
           ></WorkOrdersQueryBuilder>
         </InlineField>

src/datasources/work-orders/components/query-builder/WorkOrdersQueryBuilder.tsx

@@ -1,26 +1,50 @@
 import { SlQueryBuilder } from "core/components/SlQueryBuilder/SlQueryBuilder";
 import { queryBuilderMessages, QueryBuilderOperations } from "core/query-builder.constants";
 import { expressionBuilderCallback, expressionReaderCallback } from "core/query-builder.utils";
-import { QBField, QueryBuilderOption } from "core/types";
-import { WorkOrdersQueryBuilderStaticFields } from "datasources/work-orders/constants/WorkOrdersQueryBuilder.constants";
-import React, { useState, useEffect } from "react";
+import { QBField, QueryBuilderOption, Workspace } from "core/types";
+import { WorkOrdersQueryBuilderFields, WorkOrdersQueryBuilderStaticFields } from "datasources/work-orders/constants/WorkOrdersQueryBuilder.constants";
+import React, { useState, useEffect, useMemo } from "react";
 import { QueryBuilderCustomOperation, QueryBuilderProps } from "smart-webcomponents-react/querybuilder";
 
 type WorkOrdersQueryBuilderProps = QueryBuilderProps & React.HTMLAttributes<Element> & {
   filter?: string;
+  workspaces: Workspace[]|null;
   globalVariableOptions: QueryBuilderOption[];
 };
 
 export const WorkOrdersQueryBuilder: React.FC<WorkOrdersQueryBuilderProps> = ({
   filter,
   onChange,
+  workspaces,
   globalVariableOptions,
 }) => {
   const [fields, setFields] = useState<QBField[]>([]);
   const [operations, setOperations] = useState<QueryBuilderCustomOperation[]>([]);
 
+  const workspaceField = useMemo(() => {
+      const workspaceField = WorkOrdersQueryBuilderFields.WORKSPACE;
+      if (!workspaces) {
+        return null;
+      }
+
+      return {
+        ...workspaceField,
+        lookup: {
+          ...workspaceField.lookup,
+          dataSource: [
+            ...(workspaceField.lookup?.dataSource || []),
+            ...workspaces.map(({ id, name }) => ({ label: name, value: id })),
+          ],
+        },
+      };
+    }, [workspaces])
+
   useEffect(() => {
-    const updatedFields = WorkOrdersQueryBuilderStaticFields
+    if(!workspaceField) {
+      return;
+    }
+
+    const updatedFields = [...WorkOrdersQueryBuilderStaticFields, workspaceField]
 
     setFields(updatedFields);
 
@@ -59,7 +83,7 @@ export const WorkOrdersQueryBuilder: React.FC<WorkOrdersQueryBuilderProps> = ({
 
     setOperations(customOperations);
 
-  }, [globalVariableOptions]);
+  }, [globalVariableOptions, workspaceField]);
 
   return (
     <SlQueryBuilder

src/datasources/work-orders/constants/WorkOrdersQueryBuilder.constants.ts

@@ -158,7 +158,6 @@ export const WorkOrdersQueryBuilderStaticFields = [
     WorkOrdersQueryBuilderFields.WORK_ORDER_ID,
     WorkOrdersQueryBuilderFields.STATE,
     WorkOrdersQueryBuilderFields.TYPE,
-    WorkOrdersQueryBuilderFields.WORKSPACE,
     WorkOrdersQueryBuilderFields.EARLIEST_START_DATE,
     WorkOrdersQueryBuilderFields.DUE_DATE,
     WorkOrdersQueryBuilderFields.CREATED_AT,