### Install Project Dependencies

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/CONTRIBUTING.en-US.md

Install frontend and backend dependencies using npm and go mod. These commands are essential for setting up the project environment.

```bash
npm install
```

```bash
go mod vendor
```

--------------------------------

### Start Frontend Development Server

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/CONTRIBUTING.en-US.md

Run this command to start the frontend development environment. It typically watches for file changes and recompiles assets.

```bash
npm run watch
```

--------------------------------

### Start Backend Development Server

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/CONTRIBUTING.en-US.md

Use Mage to start the backend development server. The -v flag enables verbose output, which can be helpful for debugging.

```bash
mage -v
```

--------------------------------

### Run Application with Docker Compose

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/CONTRIBUTING.en-US.md

Start the application using Docker Compose. After running this command, access the application at http://localhost:3000.

```bash
docker-compose up
```

--------------------------------

### Install Tencent Cloud Monitor Grafana App

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/README.en-US.md

Use this command to install the latest version of the plugin via the Grafana CLI. Ensure Grafana version is >= 7.3 for versions 2.0.0 and above.

```bash
$ grafana-cli plugins install tencentcloud-monitor-app
```

--------------------------------

### tc-monitor-cli Tool for Plugin Management

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/dist/CHANGELOG.md

The `tc-monitor-cli` tool is provided for managing the plugin, including installation, upgrades, and rollbacks. Note: This tool was removed in version 2.0.0 in favor of `grafana-cli`.

```bash
bin/tc-monitor-cli
```

--------------------------------

### GET /metrics

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Retrieves available metrics for a specific region using the BaseDatasource class.

```APIDOC
## GET /metrics

### Description
Fetches a list of available metrics for a given region within the configured namespace.

### Method
GET

### Endpoint
/metrics

### Parameters
#### Query Parameters
- **region** (string) - Required - The target region (e.g., 'ap-guangzhou')

### Response
#### Success Response (200)
- **metrics** (Array) - List of MetricDescriptor objects
```

--------------------------------

### Clone the Project Repository

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/CONTRIBUTING.en-US.md

Clone the forked repository to your local machine to begin development. Ensure you replace 'your-git-username' with your actual GitHub username.

```bash
git clone https://github.com/${your-git-username}/tencentcloud-monitor-grafana-app.git
```

--------------------------------

### POST /query

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

The main query interface used for building dashboard panels, supporting various Tencent Cloud services.

```APIDOC
## POST /query

### Description
Executes a query against a specific Tencent Cloud service to retrieve metrics, logs, or performance data for dashboard visualization.

### Method
POST

### Endpoint
/query

### Parameters
#### Request Body
- **serviceType** (ServiceType) - Required - The type of service to query (monitor, logService, RUMService, APMService)
- **logServiceParams** (Object) - Optional - Parameters for Log Service queries
  - **region** (string) - Required - Tencent Cloud region
  - **TopicId** (string) - Required - Log topic identifier
  - **Query** (string) - Required - Search query string
  - **SyntaxRule** (number) - Required - CQL or Lucene syntax
  - **MaxResultNum** (number) - Optional - Maximum results to return
- **RUMServiceParams** (RUMQuery) - Optional - Parameters for Real User Monitoring
- **APMServiceParams** (APMQuery) - Optional - Parameters for Application Performance Monitoring

### Request Example
{
  "serviceType": "logService",
  "logServiceParams": {
    "region": "ap-guangzhou",
    "TopicId": "topic-12345",
    "Query": "*",
    "SyntaxRule": 1
  }
}
```

--------------------------------

### Base Datasource Class for Cloud Monitor Services

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Provides the foundational functionality for interacting with Tencent Cloud monitoring services. It handles common tasks like API requests, metric fetching, and instance identification.

```typescript
class BaseDatasource {
  Namespace: string;           // Service namespace (e.g., 'QCE/CVM')
  InstanceAliasList: string[]; // Fields for instance identification
  InstanceReqConfig: {
    service: string;           // API service name
    action: string;            // API action (e.g., 'DescribeInstances')
    responseField: string;     // Response array field name
  };

  // Fetch available metrics for a region
  async getMetrics(region: string): Promise<MetricDescriptor[]>;

  // Execute metric queries
  async query(options: QueryOptions): Promise<QueryResult>;

  // Make authenticated API requests
  async doRequest(options: RequestOptions, service: string, headers: Headers): Promise<Response>;
}
```

--------------------------------

### Configure RUM and APM Query Parameters

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Defines default query structures for performance monitoring services. These objects are used to standardize time-series data requests.

```typescript
// RUM Service default parameters
const RUMServiceParams = {
  policy: 'default',
  resultFormat: 'time_series',
  orderByTime: 'ASC',
  tags: [],
  groupBy: [
    { type: 'time', params: ['$__interval'] },
    { type: 'fill', params: ['null'] },
  ],
  select: [[
    { type: 'field', params: ['value'] },
    { type: 'mean', params: [] },
  ]],
};

// APM Service default parameters
const APMServiceParams = {
  policy: 'default',
  resultFormat: 'time_series',
  orderType: 'time',
  orderBy: 'ASC',
  tags: [],
  groupBy: [
    { type: 'time', params: ['$__interval'] },
    { type: 'fill', params: ['null'] },
  ],
  select: [[
    { type: 'field', params: ['value'] },
    { type: 'mean', params: [] },
  ]],
};
```

--------------------------------

### Implement CVM Datasource

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Extends the BaseDatasource class to provide CVM-specific instance and region metadata. Requires implementation of getRegions and getZones to fetch available cloud resources.

```typescript
export default class CVMDatasource extends BaseDatasource {
  Namespace = 'QCE/CVM';
  InstanceAliasList = CVMInstanceAliasList;
  InstanceReqConfig = {
    service: 'cvm',
    action: 'DescribeInstances',
    responseField: 'InstanceSet',
  };

  // Get available regions
  getRegions(): Promise<Region[]> {
    return this.doRequest(
      { url: this.url + '/api', data: { Product: 'cvm' } },
      'api',
      { action: 'DescribeRegions' }
    ).then((response) => {
      return response.RegionSet
        .filter((item) => item.RegionState === 'AVAILABLE')
        .map((item) => ({
          text: item.RegionName,
          value: item.Region,
          RegionState: item.RegionState,
        }));
    });
  }

  // Get availability zones within a region
  getZones(region: string): Promise<Zone[]> {
    const serviceInfo = GetServiceAPIInfo(region, 'api');
    return this.doRequest(
      { url: this.url + serviceInfo.path, data: { Product: 'cvm' } },
      serviceInfo.service,
      { region, action: 'DescribeZones' }
    ).then((response) => {
      return response.ZoneSet
        .filter((item) => item.ZoneState === 'AVAILABLE')
        .map((item) => ({
          text: item.ZoneName,
          value: item.Zone,
          ZoneState: item.ZoneState,
        }));
    });
  }
}
```

--------------------------------

### Configure Custom Dropdown Display

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/CHANGELOG.md

Use the display parameter in the query to customize dropdown list values for template variables. If both display and InstanceAlias are provided, display takes precedence.

```text
Namespace=QCE/REDIS&Action=DescribeInstances&Region=$region&display=${InstanceId}-${InstanceName}
```

--------------------------------

### Sign API Requests with TC3-HMAC-SHA256

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Handles secure authentication for Go backends using Tencent Cloud's signature v3 process. Requires a structured signOpts object to generate the authorization header.

```go
type signOpts struct {
    Host      string            `json:"Host"`
    Service   string            `json:"Service"`
    Version   string            `json:"Version"`
    Action    string            `json:"Action"`
    Region    string            `json:"Region"`
    Timestamp int64             `json:"Timestamp"`
    Method    string            `json:"Method"`
    Uri       string            `json:"Uri"`
    Query     string            `json:"Query"`
    Body      string            `json:"Body"`
    Headers   map[string]string `json:"Headers"`
    Token     string            `json:"-"`
}

func signV3(opts signOpts, apiOpts common.ApiOpts) string {
    // Step 1: Build canonical request string
    canonicalRequest := fmt.Sprintf("%s\n%s\n%s\n%s\n%s\n%s",
        httpRequestMethod, canonicalURI, canonicalQueryString,
        canonicalHeaders, signedHeaders, hashedRequestPayload)

    // Step 2: Build string to sign
    date := time.Unix(timestamp, 0).UTC().Format("2006-01-02")
    credentialScope := fmt.Sprintf("%s/%s/tc3_request", date, service)
    string2sign := fmt.Sprintf("%s\n%d\n%s\n%s",
        algorithm, timestamp, credentialScope, sha256hex(canonicalRequest))

    // Step 3: Generate signature using HMAC-SHA256 chain
    secretDate := hmacsha256(date, "TC3"+secretKey)
    secretService := hmacsha256(service, secretDate)
    secretSigning := hmacsha256("tc3_request", secretService)
    signature := hex.EncodeToString([]byte(hmacsha256(string2sign, secretSigning)))

    // Step 4: Build authorization header
    return fmt.Sprintf("%s Credential=%s/%s, SignedHeaders=%s, Signature=%s",
        algorithm, secretId, credentialScope, signedHeaders, signature)
}
```

--------------------------------

### Tencent Cloud Monitor Grafana App DataSource Configuration Options

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Defines the interface for configuring the Grafana datasource, including authentication credentials and service enablement toggles. Sensitive keys like secretKey are handled securely.

```typescript
export interface MyDataSourceOptions extends DataSourceJsonData {
  secretId?: string;           // Tencent Cloud API SecretId
  logServiceEnabled?: boolean;  // Enable Log Service functionality
  RUMServiceEnabled?: boolean;  // Enable Real User Monitoring
  APMServiceEnabled?: boolean;  // Enable APM Monitoring
  intranet?: boolean;          // Use intranet endpoints
  language?: Language;         // UI language preference
}

export interface MySecureJsonData {
  secretKey: string;           // Tencent Cloud API SecretKey (stored securely)
}
```

--------------------------------

### Define Service Types for Tencent Cloud Monitor Grafana App

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Enumerates the supported Tencent Cloud service types for integration with Grafana. Each type maps to a specific monitoring or logging service.

```typescript
export const enum ServiceType {
  monitor = 'monitor',      // Cloud Monitor (QCE) - Infrastructure metrics
  logService = 'logService', // Cloud Log Service (CLS) - Centralized logging
  RUMService = 'RUMService', // Real User Monitoring - Frontend performance
  APMService = 'APMService', // Application Performance Monitoring - Backend tracing
}
```

--------------------------------

### Grafana Query Interface for Tencent Cloud Services

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Defines the structure for queries sent to the Tencent Cloud Monitor Grafana App. It includes parameters specific to different service types like Log Service, RUM, and APM.

```typescript
export interface QueryInfo extends DataQuery {
  serviceType?: ServiceType;
  logServiceParams?: {
    region: string;        // Tencent Cloud region (e.g., 'ap-guangzhou')
    TopicId: string;       // Log topic identifier
    Query: string;         // Search query string
    SyntaxRule: number;    // CQL or Lucene syntax
    MaxResultNum?: number; // Maximum results to return
  };
  RUMServiceParams?: RUMQuery;
  APMServiceParams?: APMQuery;
}
```

--------------------------------

### Define Variable Query Interface

Source: https://context7.com/tencentcloud/tencentcloud-monitor-grafana-app/llms.txt

Specifies the structure for template variables used in dynamic dashboard configurations. Includes optional parameters for log service queries.

```typescript
export interface VariableQuery {
  serviceType: ServiceType;     // Which service to query
  queryString: string;          // Query for cloud monitor variables
  logServiceParams?: {          // Optional log service parameters
    region: string;
    TopicId: string;
    Query: string;
    SyntaxRule: number;
  };
}
```

--------------------------------

### Conventional Commit Message Format

Source: https://github.com/tencentcloud/tencentcloud-monitor-grafana-app/blob/master/CONTRIBUTING.en-US.md

Adhere to this format for commit messages to ensure consistency and clarity. Any line in the commit message cannot exceed 100 characters.

```plaintext
<type>[optional scope]: <description>

[optional body]

[optional footer(s)]
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.