Merge pull request #5 from eleven-financial/feature/sonar

Feature/sonar

front/package.json

@@ -28,9 +28,11 @@
     "azure-devops-extension-api": "^1.152.3",
     "azure-devops-extension-sdk": "^2.0.10",
     "azure-devops-ui": "^2.167.7",
+    "base-64": "^1.0.0",
     "guid-typescript": "^1.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-scripts": "4.0.3",
     "swagger-ui-react": "3.25.0",
     "typescript": "^4.1.2",

front/public/index.html

@@ -4,8 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-
-    <script src="../node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js"></script>
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>Stack Board</title>
   </head>

front/src/app.tsx

@@ -6,6 +6,7 @@ import Radar from './pages/radar/radar';
 
 import { IHostNavigationService } from 'azure-devops-extension-api/Common/CommonServices';
 import Api from './pages/api-docs/api-page';
+import Code from './pages/code-quality/code-page';
 
 interface IAppState {
   page: string;
@@ -41,6 +42,8 @@ class App extends React.Component<{}, IAppState>  {
         return (<Radar />);
       case "elevenlabs.stack-board.api-docs-hub":
         return (<Api />);
+      case "elevenlabs.stack-board.code-quality-hub":
+        return (<Code />);
       default:
         return null;
     }

front/src/components/code-quality/code-panel.scss

@@ -0,0 +1,36 @@
+@import "azure-devops-ui/Core/_platformCommon.scss";
+
+.code {
+    &--content {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+
+        // Reserve space for focus
+        padding: 4px 0;
+    }
+
+    &--group {
+        margin-bottom: 20px;
+
+        &-label {
+            display: block;
+            padding: 5px 0;
+            font-size: $fontSizeML;
+            font-weight: $fontWeightSemiBold;
+        }
+    }
+
+    &--add-button {
+      text-align: right;
+      float: right;
+    }
+
+    &--list-row
+    {
+      padding: 0px 12px;
+    }
+
+  }
+
+

front/src/components/code-quality/code-panel.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import './code-panel.scss';
+
+import { Panel } from "azure-devops-ui/Panel";
+import { TextField } from "azure-devops-ui/TextField";
+import { ICode } from '../../model/code';
+import { Guid } from 'guid-typescript';
+import { Services } from '../../services/services';
+import { ICodeService, CodeServiceId } from '../../services/code';
+import { ButtonGroup } from 'azure-devops-ui/ButtonGroup';
+import { Button } from 'azure-devops-ui/Button';
+import { Card } from 'azure-devops-ui/Card';
+import { Checkbox } from "azure-devops-ui/Checkbox";
+
+import { ISonarService, SonarServiceId } from '../../services/sonar';
+import { ISonarComponent } from '../../model/sonar';
+import { MessageCard, MessageCardSeverity } from 'azure-devops-ui/MessageCard';
+
+export interface ICodePanelProps {
+  show: boolean;
+  onDismiss: any;
+}
+
+interface ICodePanelState {
+  currentCode: ICode;
+  creating: boolean;
+  hasLoadError: boolean;
+  components?: ISonarComponent[];
+}
+
+class CodePanel extends React.Component<ICodePanelProps, ICodePanelState>  {
+
+  storageService = Services.getService<ICodeService>(CodeServiceId);
+  sonarService = Services.getService<ISonarService>(SonarServiceId);
+
+  constructor(props: ICodePanelProps) {
+    super(props);
+    this.state = {
+      currentCode: this.getStartValue(),
+      creating: false,
+      hasLoadError: false,
+      components: []
+    };
+  }
+
+  getStartValue(): ICode {
+    return {
+      id: "",
+      type: "Sonarqube",
+      server: "",
+      token: "",
+      components: []
+    };
+  }
+
+  onInputChange(event: React.ChangeEvent, value: string, that: this) {
+    var prop = event.target.id.replace("__bolt-", "");
+    that.setState(prevState => ({
+      currentCode: { ...prevState.currentCode, [prop]: value }
+    }));
+  }
+
+  isValid(): boolean {
+    const { currentCode } = this.state;
+
+    return (
+      currentCode.server && currentCode.server.trim() !== "" &&
+      currentCode.token && currentCode.token.trim() !== ""
+    );
+  }
+
+  addComponent(component: ISonarComponent, checked: boolean, that: this) {
+
+    var items = that.state.currentCode.components;
+
+    if (checked)
+      items.push(component.key)
+    else
+      items = items.filter(d => d !== component.key);
+
+    that.setState(prevState => ({
+      currentCode: { ...prevState.currentCode, components: items }
+    }));
+
+  }
+
+  load(that: this) {
+    var item = that.state.currentCode;
+
+    that.setState(prevState => ({
+      currentCode: { ...prevState.currentCode, components: [] },
+      hasLoadError: false 
+    }));
+
+    that.sonarService.loadComponents(item.server, item.token)
+      .then((items: ISonarComponent[]) => {
+        that.setState({ components: items })
+      })
+      .catch(function (error) {
+        console.log(error);
+        that.setState({ hasLoadError: true });
+      });;
+  }
+
+  save(that: this) {
+
+    that.setState({ creating: true });
+    var item = that.state.currentCode;
+    item.id = Guid.create().toString();
+
+    that.storageService.saveCode(item).then(item => {
+      that.close(that);
+    });
+  }
+
+  close(that: this) {
+    that.setState({ currentCode: that.getStartValue(), creating: false }, () => {
+      that.props.onDismiss();
+    });
+  }
+
+  render() {
+
+    const { currentCode, creating, components, hasLoadError } = this.state;
+
+    if (this.props.show) {
+      return (
+        <Panel
+          onDismiss={() => {
+            this.close(this);
+          }}
+          titleProps={{ text: "Register new tool" }}
+          description={"Register new code quality tool."}
+          footerButtonProps={[
+            {
+              text: "Cancel", onClick: (event) => {
+                this.close(this);
+              }
+            },
+            {
+              text: creating ? "Registring..." : "Register",
+              primary: true,
+              onClick: (event) => {
+                this.save(this)
+              },
+              disabled: !this.isValid() || creating || this.state.currentCode.components.length === 0
+            }
+          ]}>
+
+          <div className="code--content">
+
+            <div className="code--group">
+              <TextField
+                label="Sonarqube URL *"
+                inputId="server"
+                value={currentCode.server}
+                onChange={(event, value) => this.onInputChange(event, value, this)}
+                placeholder="e.g. https://sonarqube.company.com"
+              />
+            </div>
+
+            <div className="code--group">
+              <TextField
+                label="Token *"
+                inputId="token"
+                value={currentCode.token}
+                onChange={(event, value) => this.onInputChange(event, value, this)}
+                inputType={"password"}
+                required={true}
+                placeholder="01a0164e6f112950das79d823001507cd4fdffce"
+              />
+            </div>
+
+            <div className="code--group">
+              <ButtonGroup className="code--add-button">
+                <Button
+                  text="Load"
+                  primary={true}
+                  disabled={!this.isValid()}
+                  onClick={() => this.load(this)} />
+              </ButtonGroup>
+            </div>
+
+            <div className="code--group">
+
+              {hasLoadError && <MessageCard
+                className="flex-self-stretch"
+                severity={MessageCardSeverity.Error}>
+                Error loading projects from server.
+              </MessageCard>}
+
+              {!hasLoadError && components.length > 0 && <Card className="flex-grow">
+                <div className="rhythm-vertical-8 flex-column">
+                  {components.map(item => (
+                    <Checkbox
+                      onChange={(event, checked) => (this.addComponent(item, checked, this))}
+                      checked={currentCode.components.filter(d => d === item.key).length > 0}
+                      label={item.key}
+                    />
+                  ))}
+                </div>
+              </Card>}
+
+            </div>
+          </div>
+
+
+
+        </Panel >
+      );
+    }
+    return null;
+  }
+}
+
+export default CodePanel;

front/src/components/project/project-panel.tsx

@@ -43,7 +43,7 @@ class ProjectPanel extends React.Component<IProjectPanelProps, IProjectPanelStat
     super(props);
     this.state = {
       currentProject: this.getStartValue(),
-      creating: true,
+      creating: false,
       nameIsValid: true,
       repoIsValid: true
     };

front/src/model/code.ts

@@ -0,0 +1,11 @@
+import { ISonarComponent } from "./sonar";
+
+export interface ICode {
+    id?: string;
+    type: string;
+    server: string;
+    token: string;
+    components?: string[];
+}
+
+

front/src/model/sonar.ts

@@ -0,0 +1,25 @@
+export interface ISonarComponent {
+    key: string;
+    name: string;
+    branches: ISonarBranch[];
+}
+
+export interface ISonarBranch {
+    name: string;
+    isMain: boolean;
+    type: string;
+    analysisDate: Date;
+    status: any;
+    measures: ISonarMeasure[]
+    isShow: boolean;
+    link: string;
+}
+
+export interface ISonarMeasure {
+    metric: string;
+    value: string;
+}
+
+
+
+

front/src/model/stacks.ts

@@ -21,7 +21,7 @@ export const StackValues: IStack[] = [
     },
     {
         id: 4,
-        text: "SQLServer"
+        text: "Type Script"
     }
 ];