Stackdriver: Fix creating Service Level Objectives (SLO) datasource query variable (#25023)

* Fetch SLOs on SLO service change

* Prevent querying for SLOs if SLO service is empty

Co-authored-by: Daniel Lee <dan.limerick@gmail.com>

public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx

@@ -144,7 +144,12 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
   }
 
   componentDidUpdate(prevProps: Readonly<VariableQueryProps>, prevState: Readonly<VariableQueryData>) {
-    if (!getConfig().featureToggles.newVariables || prevState.selectedQueryType !== this.state.selectedQueryType) {
+    const selectSLOServiceChanged = this.state.selectedSLOService !== prevState.selectedSLOService;
+    if (
+      !getConfig().featureToggles.newVariables ||
+      prevState.selectedQueryType !== this.state.selectedQueryType ||
+      selectSLOServiceChanged
+    ) {
       const { metricDescriptors, labels, metricTypes, services, ...queryModel } = this.state;
       const query = this.queryTypes.find(q => q.value === this.state.selectedQueryType);
       this.props.onChange(queryModel, `Stackdriver - ${query.name}`);

public/app/plugins/datasource/stackdriver/datasource.ts

@@ -249,6 +249,9 @@ export default class StackdriverDatasource extends DataSourceApi<StackdriverQuer
   }
 
   async getServiceLevelObjectives(projectName: string, serviceId: string): Promise<Array<SelectableValue<string>>> {
+    if (!serviceId) {
+      return Promise.resolve([]);
+    }
     let { projectName: p, serviceId: s } = this.interpolateProps({ projectName, serviceId });
     return this.api.get(`${p}/services/${s}/serviceLevelObjectives`, {
       responseMap: ({ name, displayName, goal }: { name: string; displayName: string; goal: number }) => ({