Add latest changes from gitlab-org/gitlab@master

.eslintrc.yml

@@ -104,7 +104,7 @@ overrides:
       - 'config/**/*'
       - 'scripts/**/*'
       - '*.config.js'
-      - 'jest.*.js'
+      - '*.config.*.js'
     rules:
       '@gitlab/require-i18n-strings': off
       import/no-extraneous-dependencies: off

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

@@ -1,6 +1,7 @@
 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon, GlLink } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   components: {
@@ -9,9 +10,15 @@ export default {
     GlFormGroup,
     GlFormInput,
     GlIcon,
+    GlLink,
   },
   data() {
-    return { placeholderUrl: 'https://my-url.grafana.net/' };
+    return {
+      helpUrl: helpPagePath('operations/metrics/embed_grafana', {
+        anchor: 'use-integration-with-grafana-api',
+      }),
+      placeholderUrl: 'https://my-grafana.example.com/',
+    };
   },
   computed: {
     ...mapState(['operationsSettingsEndpoint', 'grafanaToken', 'grafanaUrl', 'grafanaEnabled']),
@@ -59,7 +66,12 @@ export default {
       </h4>
       <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
-        {{ s__('GrafanaIntegration|Embed Grafana charts in GitLab issues.') }}
+        {{
+          s__(
+            'GrafanaIntegration|Set up Grafana authentication to embed Grafana panels in GitLab Flavored Markdown.',
+          )
+        }}
+        <gl-link :href="helpUrl">{{ __('Learn more.') }}</gl-link>
       </p>
     </div>
     <div class="settings-content">
@@ -78,22 +90,22 @@ export default {
         >
           <gl-form-input id="grafana-url" v-model="localGrafanaUrl" :placeholder="placeholderUrl" />
         </gl-form-group>
-        <gl-form-group :label="s__('GrafanaIntegration|API Token')" label-for="grafana-token">
+        <gl-form-group :label="s__('GrafanaIntegration|API token')" label-for="grafana-token">
           <gl-form-input id="grafana-token" v-model="localGrafanaToken" />
           <p class="form-text text-muted">
-            {{ s__('GrafanaIntegration|Enter the Grafana API Token.') }}
+            {{ s__('GrafanaIntegration|Enter the Grafana API token.') }}
             <a
               href="https://grafana.com/docs/http_api/auth/#create-api-token"
               target="_blank"
               rel="noopener noreferrer"
             >
-              {{ __('More information') }}
+              {{ __('More information.') }}
               <gl-icon name="external-link" class="vertical-align-middle" />
             </a>
           </p>
         </gl-form-group>
         <gl-button variant="success" category="primary" @click="updateGrafanaIntegration">
-          {{ __('Save Changes') }}
+          {{ __('Save changes') }}
         </gl-button>
       </form>
     </div>

app/assets/javascripts/pages/admin/application_settings/index.js

@@ -4,13 +4,11 @@ import initSearchSettings from '~/search_settings';
 import selfMonitor from '~/self_monitor';
 import initSettingsPanels from '~/settings_panels';
 
-document.addEventListener('DOMContentLoaded', () => {
+if (gon.features?.ciInstanceVariablesUi) {
-  if (gon.features?.ciInstanceVariablesUi) {
+  initVariableList('js-instance-variables');
-    initVariableList('js-instance-variables');
+}
-  }
+selfMonitor();
-  selfMonitor();
+// Initialize expandable settings panels
-  // Initialize expandable settings panels
+initSettingsPanels();
-  initSettingsPanels();
+projectSelect();
-  projectSelect();
+initSearchSettings();
-  initSearchSettings();
-});

changelogs/unreleased/eread-refactor-embedded-grafana-panels.yml

@@ -0,0 +1,5 @@
+---
+title: Refactor docs and UI for embedding Grafana panels
+merge_request: 55567
+author:
+type: other

danger/metadata/Dangerfile

@@ -20,7 +20,7 @@ if gitlab.mr_body.size < 5
 end
 
 if (THROUGHPUT_LABELS & gitlab.mr_labels).empty?
-  warn 'Please add a [throughput label](https://about.gitlab.com/handbook/engineering/management/throughput/#implementation) to this merge request.'
+  warn 'Please add a [throughput label](https://about.gitlab.com/handbook/engineering/metrics/#data-classification) to this merge request.'
 end
 
 unless gitlab.mr_json["assignee"]

doc/operations/metrics/embed_grafana.md

@@ -4,75 +4,76 @@ group: Health
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
 ---
 
-# Embedding Grafana charts **(FREE)**
+# Embed Grafana panels in Markdown **(FREE)**
 
-Grafana metrics can be embedded in [GitLab Flavored Markdown](../../user/markdown.md).
+Grafana panels can be embedded in [GitLab Flavored Markdown](../../user/markdown.md). You can
+embed Grafana panels using either:
 
-## Embedding charts via Grafana rendered images
+- [Grafana-rendered images](#use-grafana-rendered-images).
+- [Grafana API](#use-integration-with-grafana-api).
 
-You can embed live [Grafana](https://docs.gitlab.com/omnibus/settings/grafana.html)
+## Use Grafana-rendered images
-charts in issues as a
-[direct linked rendered image](https://grafana.com/docs/grafana/latest/reference/share_panel/#direct-link-rendered-image). Your Grafana instance must be available to the
-target user, either as a public dashboard or on the same network. The
-**Direct link rendered image** sharing dialog within Grafana provides the link:
 
-![Grafana Direct Linked Rendered Image](img/grafana_live_embed.png)
+You can embed live [Grafana](https://docs.gitlab.com/omnibus/settings/grafana.html) panels as a
+[direct linked rendered image](https://grafana.com/docs/grafana/latest/reference/share_panel/#direct-link-rendered-image).
+Your Grafana instance must:
 
-For this embed to display correctly, the
+- Be available to the target user, either as a public dashboard or on the same network.
+- Have [Grafana Image Renderer](https://grafana.com/grafana/plugins/grafana-image-renderer) installed.
 
-Copy the link and add an image tag as [inline HTML](../../user/markdown.md#inline-html)
+To use Grafana-rendered images:
-in your Markdown. You can tweak the query parameters to meet your needs, such as
-removing the `&from=` and `&to=` parameters to display a live chart. Here is example
-markup for a live chart from a GitLab public dashboard:
 
-```html
+1. Go to the dashboard containing the panel in Grafana.
-<img src="https://dashboards.gitlab.com/d/RZmbBr7mk/gitlab-triage?orgId=1&refresh=30s&var-env=gprd&var-environment=gprd&var-prometheus=prometheus-01-inf-gprd&var-prometheus_app=prometheus-app-01-inf-gprd&var-backend=All&var-type=All&var-stage=main&from=1580444107655&to=1580465707655"/>
+1. From the panel's menu, select **Share**.
-```
+1. Select the **Direct link rendered image** button, which provides the link.
+1. Copy the link and add an image tag as [inline HTML](../../user/markdown.md#inline-html) in your
+   Markdown in the format `<img src="your_link"/>`. You can tweak the query parameters to meet your needs, such as removing the `&from=`
+   and `&to=` parameters to display a live panel.
 
-This markup renders a graph of `5xx` errors, like this:
+## Use integration with Grafana API
-
-![Grafana dashboard embedded preview](img/grafana_embedded.png)
-
-## Embedding charts via integration with Grafana HTTP API
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/31376) in GitLab 12.5.
 
-Each project can support integration with one Grafana instance. This configuration
+Each project can support integration with one Grafana instance. This enables you to copy a link to a
-enables you to copy a link to a panel in Grafana, then paste it into a GitLab Markdown
+panel in Grafana, then paste it into a GitLab Markdown field. The panel renders in the GitLab panel
-field. The chart renders in the GitLab chart format. To embed charts
+format. To embed panels from a Grafana instance, the data source must be:
-from a Grafana instance, the data source must:
 
-1. Be a Prometheus instance.
+- A Prometheus instance.
-1. Be proxyable, so the HTTP Access setting should be set to `Server`:
+- Proxyable, so the **HTTP > Access** setting for the Grafana data source should be set to
+  **Server (default)**.
 
-   ![HTTP Proxy Access](img/http_proxy_access_v12_5.png)
+### Set up Grafana integration
 
-## Setting up the Grafana integration
+To set up the Grafana API in Grafana:
 
 1. In Grafana, [generate an Admin-level API Token](https://grafana.com/docs/grafana/latest/http_api/auth/#create-api-token).
-1. In your GitLab project, navigate to **Settings > Operations > Grafana Authentication**.
+1. In your GitLab project, go to **Settings > Operations** and expand the **Grafana authentication**
+   section.
 1. To enable the integration, check the **Active** checkbox.
 1. For **Grafana URL**, enter the base URL of the Grafana instance.
-1. For **API Token**, enter the Admin API Token you just generated.
+1. For **API Token**, enter the Admin API token you just generated.
 1. Click **Save Changes**.
 
-## Generating a link to a chart
+### Generate a link to a panel
 
-1. In Grafana, navigate to the dashboard you wish to embed a panel from.
+To generate a link to a panel:
-   ![Grafana Metric Panel](img/grafana_panel_v12_5.png)
+
-1. In the upper-left corner of the page, select a specific value for each variable
+1. In Grafana, go to the dashboard you wish to embed a panel from.
-   required for the queries in the chart.
+1. In the upper-left corner of the page, select a specific value for each variable required for the
-   ![Select Query Variables](img/select_query_variables_v12_5.png)
+   queries in the dashboard.
-1. In Grafana, click on a panel's title, then click **Share** to open the panel's
+1. In Grafana click on a panel's title, then click **Share** to open the panel's sharing dialog to
-   sharing dialog to the **Link** tab. If you click the _dashboard's_ share panel
+   the **Link** tab.
-   instead, GitLab attempts to embed the first supported panel on the dashboard (if available).
+
+   If you click the dashboard's share button instead, GitLab attempts to embed the first supported
+   panel on the dashboard (if available).
 1. If your Prometheus queries use Grafana's custom template variables, ensure the
-   **Template variables** option is toggled to **On**. Of Grafana global template
+   **Template variables** option is set to on. Only the Grafana global template variables
-   variables, only `$__interval`, `$__from`, and `$__to` are supported.
+   `$__interval`, `$__from`, and `$__to` are supported.
-1. Toggle **On** the **Current time range** option to specify the time range of
+1. Set the **Current time range** option to on, to specify the time range of the panel. Otherwise,
-   the chart. Otherwise, the default range is the last 8 hours.
+   the default range is the last 8 hours.
-   ![Grafana Sharing Dialog](img/grafana_sharing_dialog_v12_5.png)
+1. Select **Copy** to copy the URL to the clipboard.
-1. Click **Copy** to copy the URL to the clipboard.
+1. In GitLab, paste the URL into a Markdown field and save. The panel takes a few moments to render.
-1. In GitLab, paste the URL into a Markdown field and save. The chart takes a few
+
-   moments to render.
+See the following example of a rendered panel.
-   ![GitLab Rendered Grafana Panel](img/rendered_grafana_embed_v12_5.png)
+
+![GitLab Rendered Grafana Panel](img/rendered_grafana_embed_v12_5.png)

doc/user/application_security/vulnerability_report/index.md

@@ -10,19 +10,27 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 The Vulnerability Report provides information about vulnerabilities from scans of the branch most
 recently merged into the default branch. It is available at the instance, group, and project level.
 
-The Vulnerability Report contains:
+At all levels, the Vulnerability Report contains:
 
 - Totals of vulnerabilities per severity level.
 - Filters for common vulnerability attributes.
 - Details of each vulnerability, presented in tabular layout.
 
+![Vulnerability Report](img/group_vulnerability_report_v13_9.png)
+
+## Project-level Vulnerability Report
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/6165) in GitLab 11.1.
+
 The project-level Vulnerability Report also contains:
 
 - A time stamp showing when it was updated, including a link to the latest pipeline.
 - The number of failures that occurred in the most recent pipeline. Select the failure
   notification to view the **Failed jobs** tab of the pipeline's page.
 
-![Vulnerability Report](img/group_vulnerability_report_v13_9.png)
+To access the report, navigate to **Security & Compliance > Vulnerability Report**.
+
+## Vulnerability Report actions
 
 From the Vulnerability Report you can:
 
@@ -32,7 +40,7 @@ From the Vulnerability Report you can:
 - [Change the status of vulnerabilities](#change-status-of-vulnerabilities).
 - [Export details of vulnerabilities](#export-vulnerability-details).
 
-## Vulnerability filters
+## Vulnerability Report filters
 
 You can filter the vulnerabilities table by:
 
@@ -107,21 +115,6 @@ To change the status of vulnerabilities in the table:
 
 ![Project Vulnerability Report](img/project_security_dashboard_status_change_v13_9.png)
 
-## Project Vulnerability Report
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/6165) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 11.1.
-
-The vulnerabilities that exist in your project's
-[default branch](../../project/repository/branches/index.md#default-branch) are accessed by navigating to
-**Security & Compliance > Vulnerability Report**.
-
-The project vulnerability report first displays the time at which the last pipeline completed on the project's
-default branch. There's also a link to view this in more detail. In the case of any pipeline failures,
-the number of failures is indicated. The failure notification takes you directly to
-the **Failed jobs** tab of the pipeline page.
-
-![Project Vulnerability Report](img/project_security_dashboard_v13_9.png)
-
 ## Export vulnerability details
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/213014) in the Security Center (previously known as the Instance Security Dashboard) and project-level Vulnerability Report (previously known as the Project Security Dashboard) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 13.0.

locale/gitlab.pot

@@ -14421,16 +14421,13 @@ msgstr ""
 msgid "Grafana response contains invalid json"
 msgstr ""
 
-msgid "GrafanaIntegration|API Token"
+msgid "GrafanaIntegration|API token"
 msgstr ""
 
 msgid "GrafanaIntegration|Active"
 msgstr ""
 
-msgid "GrafanaIntegration|Embed Grafana charts in GitLab issues."
+msgid "GrafanaIntegration|Enter the Grafana API token."
-msgstr ""
-
-msgid "GrafanaIntegration|Enter the Grafana API Token."
 msgstr ""
 
 msgid "GrafanaIntegration|Enter the base URL of the Grafana instance."
@@ -14442,6 +14439,9 @@ msgstr ""
 msgid "GrafanaIntegration|Grafana authentication"
 msgstr ""
 
+msgid "GrafanaIntegration|Set up Grafana authentication to embed Grafana panels in GitLab Flavored Markdown."
+msgstr ""
+
 msgid "Grant access"
 msgstr ""
 

qa/qa/specs/features/browser_ui/3_create/design_management/archive_design_content_spec.rb

@@ -15,7 +15,7 @@ module QA
       let(:third_design) do
         Resource::Design.fabricate! do |design|
           design.issue = second_design.issue
-          design.filename = 'tanuki.jpg'
+          design.filename = 'testfile.png'
         end
       end
 

qa/qa/specs/features/browser_ui/3_create/design_management/modify_design_content_spec.rb

@@ -5,7 +5,7 @@ module QA
     context 'Design Management' do
       let(:design) do
         Resource::Design.fabricate! do |design|
-          design.filename = 'tanuki.jpg'
+          design.filename = 'testfile.png'
         end
       end
 

qa/qa/support/ssh.rb

@@ -51,11 +51,21 @@ module QA
       private
 
       def uri_port
-        uri.port && (uri.port != 80) ? uri.port : nil
+        use_typical_params? ? nil : uri.port
       end
 
       def git_user
-        QA::Runtime::Env.running_in_ci? || [443, 80].include?(uri.port) ? 'git' : Etc.getlogin
+        QA::Runtime::Env.running_in_ci? || use_typical_params? ? 'git' : Etc.getlogin
+      end
+
+      # Checks if typical parameters should be used. That means the SSH port will not be
+      # needed because it's port 22, and the git user is named 'git'. We assume that
+      # typical parameters should be used if the host URI includes a typical HTTP(S)
+      # port (80 or 443)
+      #
+      # @return [Boolean] whether typical SSH port and git user parameters should be used
+      def use_typical_params?
+        [443, 80].include?(uri.port)
       end
     end
   end

qa/spec/support/ssh_spec.rb

@@ -26,6 +26,16 @@ RSpec.describe QA::Support::SSH do
       end
     end
 
+    context 'when no port specified in https uri' do
+      let(:uri) { 'https://foo.com' }
+
+      it 'does not provide port in ssh command' do
+        expect(ssh).to receive(:run).with(expected_ssh_command_no_port, any_args).and_return(result)
+
+        call_method
+      end
+    end
+
     context 'when port 80 specified in uri' do
       let(:uri) { 'http://foo.com:80' }
 
@@ -86,6 +96,18 @@ RSpec.describe QA::Support::SSH do
       end
     end
 
+    context 'when running on a review app in CI' do
+      let(:uri) { 'https://gitlab-review.app' }
+
+      before do
+        allow(QA::Runtime::Env).to receive(:running_in_ci?).and_return(true)
+      end
+
+      it 'returns git user' do
+        expect(ssh.send(:git_user)).to eq('git')
+      end
+    end
+
     context 'when running against environment on a port other than 80 or 443' do
       let(:uri) { 'http://localhost:3000' }
 

spec/features/projects/settings/operations_settings_spec.rb

@@ -162,13 +162,13 @@ RSpec.describe 'Projects > Settings > For a forked project', :js do
         end
 
         expect(page).to have_content('Grafana URL')
-        expect(page).to have_content('API Token')
+        expect(page).to have_content('API token')
-        expect(page).to have_button('Save Changes')
+        expect(page).to have_button('Save changes')
 
         fill_in('grafana-url', with: 'http://gitlab-test.grafana.net')
         fill_in('grafana-token', with: 'token')
 
-        click_button('Save Changes')
+        click_button('Save changes')
 
         wait_for_requests
 

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -31,8 +31,11 @@ exports[`grafana integration component default state to match the default snapsh
       class="js-section-sub-header"
     >
       
-      Embed Grafana charts in GitLab issues.
+      Set up Grafana authentication to embed Grafana panels in GitLab Flavored Markdown.
-    
+      
+      <gl-link-stub>
+        Learn more.
+      </gl-link-stub>
     </p>
   </div>
    
@@ -56,13 +59,13 @@ exports[`grafana integration component default state to match the default snapsh
       >
         <gl-form-input-stub
           id="grafana-url"
-          placeholder="https://my-url.grafana.net/"
+          placeholder="https://my-grafana.example.com/"
           value="http://test.host"
         />
       </gl-form-group-stub>
        
       <gl-form-group-stub
-        label="API Token"
+        label="API token"
         label-for="grafana-token"
       >
         <gl-form-input-stub
@@ -74,7 +77,7 @@ exports[`grafana integration component default state to match the default snapsh
           class="form-text text-muted"
         >
           
-          Enter the Grafana API Token.
+          Enter the Grafana API token.
           
           <a
             href="https://grafana.com/docs/http_api/auth/#create-api-token"
@@ -82,7 +85,7 @@ exports[`grafana integration component default state to match the default snapsh
             target="_blank"
           >
             
-            More information
+            More information.
             
             <gl-icon-stub
               class="vertical-align-middle"
@@ -101,7 +104,7 @@ exports[`grafana integration component default state to match the default snapsh
         variant="success"
       >
         
-        Save Changes
+        Save changes
       
       </gl-button-stub>
     </form>

spec/frontend/grafana_integration/components/grafana_integration_spec.js

@@ -62,7 +62,7 @@ describe('grafana integration component', () => {
       wrapper = shallowMount(GrafanaIntegration, { store });
 
       expect(wrapper.find('.js-section-sub-header').text()).toContain(
-        'Embed Grafana charts in GitLab issues.',
+        'Set up Grafana authentication to embed Grafana panels in GitLab Flavored Markdown.\n      Learn more.',
       );
     });
   });