make sure service and slo display name is passed to segment comp (#30900)

public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx

@@ -21,7 +21,9 @@ export const defaultQuery: (dataSource: CloudMonitoringDatasource) => SLOQuery =
   aliasBy: '',
   aliasBy: '',
   selectorName: 'select_slo_health',
   selectorName: 'select_slo_health',
   serviceId: '',
   serviceId: '',
+  serviceName: '',
   sloId: '',
   sloId: '',
+  sloName: '',
 });
 });
 
 
 export function SLOQueryEditor({
 export function SLOQueryEditor({
@@ -42,7 +44,7 @@ export function SLOQueryEditor({
       <QueryInlineField label="Service">
       <QueryInlineField label="Service">
         <SegmentAsync
         <SegmentAsync
           allowCustomValue
           allowCustomValue
-          value={query?.serviceId}
+          value={{ value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
           placeholder="Select service"
           placeholder="Select service"
           loadOptions={() =>
           loadOptions={() =>
             datasource.getSLOServices(query.projectName).then((services) => [
             datasource.getSLOServices(query.projectName).then((services) => [
@@ -53,14 +55,16 @@ export function SLOQueryEditor({
               ...services,
               ...services,
             ])
             ])
           }
           }
-          onChange={({ value: serviceId = '' }) => onChange({ ...query, serviceId, sloId: '' })}
+          onChange={({ value: serviceId = '', label: serviceName = '' }) =>
+            onChange({ ...query, serviceId, serviceName, sloId: '' })
+          }
         />
         />
       </QueryInlineField>
       </QueryInlineField>
 
 
       <QueryInlineField label="SLO">
       <QueryInlineField label="SLO">
         <SegmentAsync
         <SegmentAsync
           allowCustomValue
           allowCustomValue
-          value={query?.sloId}
+          value={{ value: query?.sloId, label: query?.sloName || query?.sloId }}
           placeholder="Select SLO"
           placeholder="Select SLO"
           loadOptions={() =>
           loadOptions={() =>
             datasource.getServiceLevelObjectives(query.projectName, query.serviceId).then((sloIds) => [
             datasource.getServiceLevelObjectives(query.projectName, query.serviceId).then((sloIds) => [
@@ -71,10 +75,10 @@ export function SLOQueryEditor({
               ...sloIds,
               ...sloIds,
             ])
             ])
           }
           }
-          onChange={async ({ value: sloId = '' }) => {
+          onChange={async ({ value: sloId = '', label: sloName = '' }) => {
             const slos = await datasource.getServiceLevelObjectives(query.projectName, query.serviceId);
             const slos = await datasource.getServiceLevelObjectives(query.projectName, query.serviceId);
             const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
             const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
-            onChange({ ...query, sloId, goal: slo?.goal });
+            onChange({ ...query, sloId, sloName, goal: slo?.goal });
           }}
           }}
         />
         />
       </QueryInlineField>
       </QueryInlineField>

public/app/plugins/datasource/cloud-monitoring/datasource.ts

@@ -257,9 +257,9 @@ export default class CloudMonitoringDatasource extends DataSourceWithBackend<
 
 
   async getSLOServices(projectName: string): Promise<Array<SelectableValue<string>>> {
   async getSLOServices(projectName: string): Promise<Array<SelectableValue<string>>> {
     return this.api.get(`${this.templateSrv.replace(projectName)}/services?pageSize=1000`, {
     return this.api.get(`${this.templateSrv.replace(projectName)}/services?pageSize=1000`, {
-      responseMap: ({ name }: { name: string }) => ({
+      responseMap: ({ name, displayName }: { name: string; displayName: string }) => ({
         value: name.match(/([^\/]*)\/*$/)![1],
         value: name.match(/([^\/]*)\/*$/)![1],
-        label: name.match(/([^\/]*)\/*$/)![1],
+        label: displayName || name.match(/([^\/]*)\/*$/)![1],
       }),
       }),
     });
     });
   }
   }

public/app/plugins/datasource/cloud-monitoring/types.ts

@@ -92,7 +92,9 @@ export interface SLOQuery {
   aliasBy?: string;
   aliasBy?: string;
   selectorName: string;
   selectorName: string;
   serviceId: string;
   serviceId: string;
+  serviceName: string;
   sloId: string;
   sloId: string;
+  sloName: string;
   goal?: number;
   goal?: number;
 }
 }