增强 Grafana Loki Data Source Plugin 的 Explore 功能

// https://github.com/grafana/grafana/blob/8f691115bc2be265932053686eacd5fec5cf21b5/public/app/plugins/datasource/loki/datasource.ts#L29-L31

import { addLabelToQuery } from 'app/plugins/datasource/prometheus/add_label_to_query'
import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'
import { convertToWebSocketUrl } from 'app/core/utils/explore'

docker run -d -p 3000:3000 -v /Users/baurine/Codes/Personal/grafana-plugins:/var/lib/grafana/plugins --name=grafana grafana/grafana:7.4.0

kubectl port-forward svc/thanos-query 9090:9090 -n monitoring
kubectl port-forward svc/loki 3100:3100 -n logging

// src/datasource.ts
export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  lokiDS: DataSourceApi | null = null
  // ...
  query(
    options: DataQueryRequest<MyQuery>
  ): Promise<DataQueryResponse> | Observable<DataQueryResponse> {
    if (this.lokiDS === null) {
      return of({
        data: [],
        state: LoadingState.Done,
      })
    }
    return this.lokiDS.query(options)
  }
}

// https://github.com/grafana/grafana/blob/8f691115bc2be265932053686eacd5fec5cf21b5/public/app/plugins/datasource/loki/types.ts#L25-L35
export interface LokiQuery extends DataQuery {
  expr: string
  query?: string
  format?: string
  reverse?: boolean
  legendFormat?: string
  valueWithRefId?: boolean
  maxLines?: number
  range?: boolean
  instant?: boolean
}

// src/types.ts
export interface MyQuery extends DataQuery {
  expr: string // keep same as the loki data source
}

// src/types.ts
export interface MyDataSourceOptions extends DataSourceJsonData {
  promDataSourceUid: string
  lokiDataSourceUid: string
}

// src/ConfigEditor.tsx
interface Props
  extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}

export function ConfigEditor(props: Props) {
  const [dsList, setDsList] = useState<SelectableValue[]>([])
  const {
    options: {
      id: selfId, // plugin self id
      jsonData: { promDataSourceUid, lokiDataSourceUid },
    },
  } = props

  useEffect(() => {
    const dsSrv = getDataSourceSrv()
    const allDS = dsSrv.getList()
    const dsList: SelectableValue[] = allDS
      .filter((ds) => ds.uid !== undefined && ds.id !== selfId)
      .map((ds) => ({
        label: ds.name,
        value: ds.uid,
      }))
    setDsList(dsList)
  }, [selfId])

  const onPromDSChange = (v: SelectableValue) => {
    const { onOptionsChange, options } = props
    const jsonData = {
      ...options.jsonData,
      promDataSourceUid: v?.value || '',
    }
    onOptionsChange({ ...options, jsonData })
  }

  const onLokiDSChange = (v: SelectableValue) => {
    const { onOptionsChange, options } = props
    const jsonData = {
      ...options.jsonData,
      lokiDataSourceUid: v?.value || '',
    }
    onOptionsChange({ ...options, jsonData })
  }

  return (
    <div className="gf-form-group">
      <div className="gf-form">
        <InlineLabel width={16} tooltip="Select a Prometheus DataSource">
          Prometheus
        </InlineLabel>
        <Select
          isClearable={true}
          options={dsList}
          value={promDataSourceUid}
          onChange={onPromDSChange}
          width={36}
        />
      </div>

      <div className="gf-form">
        <InlineLabel width={16} tooltip="Select a Loki DataSource">
          Loki
        </InlineLabel>
        <Select
          isClearable={true}
          options={dsList}
          value={lokiDataSourceUid}
          onChange={onLokiDSChange}
          width={36}
        />
      </div>
    </div>
  )
}

// src/datasource.ts
export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  // ...
  async testDatasource() {
    const {
      jsonData: { lokiDataSourceUid, promDataSourceUid },
    } = this.instanceSettings

    if (!promDataSourceUid) {
      throw new Error('Promethues datasource is empty!')
    }
    if (!lokiDataSourceUid) {
      throw new Error('Loki datasource is empty!')
    }

    const dataSourceSrv = getDataSourceSrv()
    const promDsSetting = dataSourceSrv.getInstanceSettings(promDataSourceUid)
    if (!promDsSetting) {
      throw new Error(`Target promethues datasource doesn't exist anymore !`)
    }
    const lokiDsSetting = dataSourceSrv.getInstanceSettings(lokiDataSourceUid)
    if (!lokiDsSetting) {
      throw new Error(`Target loki datasource doesn't exist anymore !`)
    }

    const promDs = await dataSourceSrv.get(promDsSetting.name)
    this.promDS = promDs as any
    const promRes = await promDs.testDatasource()
    if (promRes.status === 'error') {
      return promRes
    }

    const lokiDs = await dataSourceSrv.get(lokiDsSetting.name)
    this.lokiDS = lokiDs as any
    const lokiRes = await lokiDs.testDatasource()
    if (lokiRes.status === 'error') {
      return lokiRes
    }

    return {
      status: 'success',
      message: 'Both prometheus and loki data source are working',
    }
  }
}

// src/ExploreQueryEditor.tsx
useEffect(() => {
  async function queryTenants() {
    const promDS = await datasource.getPromDS()
    const tenantsRes = await promDS.metricFindQuery!(
      'dbaas_tenant_info{status="active"}'
    )
    const tenaneIdSet = new Set<string>()
    const tenantOptions: SelectableValue[] = []
    tenantsRes.forEach((res) => {
      const m = res.text.match(/.*name="([^"]*).*,tenant="([^"]*).*/)
      if (m) {
        const tenantName = m[1]
        const tenantId = m[2]
        if (!tenaneIdSet.has(tenantId)) {
          tenaneIdSet.add(tenantId)
          tenantOptions.push({
            value: tenantId,
            label: tenantName,
            description: tenantId,
          })
        }
      }
    })
    tenantOptions.sort((a, b) => {
      if (a.label! > b.label!) {
        return 1
      } else if (a.label === b.label) {
        return a.value > b.value ? 1 : -1
      } else {
        return -1
      }
    })
    setTenantOptions(tenantOptions)
    if (tenantOptions.length > 0) {
      setSelectedTenant(tenantOptions[0])
    }
  }
  queryTenants()
}, [datasource])

// src/datasource.ts
export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  // ...
  showContextToggle(row?: LogRowModel) {
    return this.lokiDS!.showContextToggle!(row)
  }

  getLogRowContext = (row: LogRowModel, options?: any) => {
    return this.lokiDS!.getLogRowContext!(row, options)
  }
}

// src/datasource.ts
export const ADD_FILTER_EVENT = 'customized-loki-add-filter'

export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  // ...
  modifyQuery(query: MyQuery, action: any): MyQuery {
    let filter = ''
    switch (action.type) {
      case 'ADD_FILTER': {
        filter = `${action.key}="${action.value}"`
        break
      }
      case 'ADD_FILTER_OUT': {
        filter = `${action.key}!="${action.value}"`
        break
      }
      default:
        break
    }
    if (filter !== '') {
      // send event
      const event = new CustomEvent(ADD_FILTER_EVENT, { detail: filter })
      document.dispatchEvent(event)
    }
    // hack, set the expr to empty, to prevent the meaningless auto query
    // return query
    return { ...query, expr: '' }
  }
}

// src/ExploreQueryEditor.tsx
export function ExploreQueryEditor(props: Props) {
  // ...
  const [filters, setFilters] = useState<string[]>([])

  useEffect(() => {
    function addFilter(event: Event) {
      const filter = (event as CustomEvent).detail
      if (filters.indexOf(filter) < 0) {
        setFilters(filters.concat(filter))
        setTimeout(() => {
          runQueryRef.current!()
        }, 300)
      }
    }
    document.addEventListener(ADD_FILTER_EVENT, addFilter)
    return () => document.removeEventListener(ADD_FILTER_EVENT, addFilter)
  }, [filters])
}

// src/ExploreQueryEditor.tsx
export function ExploreQueryEditor(props: Props) {
  // ...
  const [filters, setFilters] = useState<string[]>([])

  const onFilterClick = (name: string) => {
    // remove filter
    setFilters(filters.filter((f) => f !== name))
    setTimeout(() => {
      runQueryRef.current!()
    }, 300)
  }

  return (
    <div>
      {/* ... */}
      <InlineField label="Filters" className="filters">
        <TagList tags={filters} className="tags" onClick={onFilterClick} />
      </InlineField>
    </div>
  )
}