273 lines
10 KiB
TypeScript
273 lines
10 KiB
TypeScript
import { Link, graphql } from 'gatsby'
|
||
import React from 'react'
|
||
import Gallery from '@browniebroke/gatsby-image-gallery'
|
||
import { IGatsbyImageData } from 'gatsby-plugin-image'
|
||
|
||
import Layout from '../components/layout'
|
||
import Seo from '../components/seo'
|
||
|
||
import { Section, ScheduleDemo } from '../components/shared'
|
||
import {
|
||
SectionHeading,
|
||
SectionDesc
|
||
} from '../components/shared/styledComponents'
|
||
import {
|
||
Art,
|
||
Reason,
|
||
CenteredText,
|
||
Feature,
|
||
ThumbnailWrapper
|
||
} from '../styledComponents'
|
||
|
||
import leftArt from '../images/home_illustration2.png'
|
||
import rightArt from '../images/home_illustration1.png'
|
||
import dcSoftwareArt from '../images/dc-software.png'
|
||
|
||
import { AiOutlineClockCircle, AiFillLock } from 'react-icons/ai'
|
||
import { TiTick } from 'react-icons/ti'
|
||
import { HiOutlineRefresh } from 'react-icons/hi'
|
||
import { MdHistory } from 'react-icons/md'
|
||
import { BsCode } from 'react-icons/bs'
|
||
import { BiNetworkChart } from 'react-icons/bi'
|
||
|
||
import dcDesign from '../images/data-controller-design.png'
|
||
|
||
interface ImageSharpEdge {
|
||
node: {
|
||
childImageSharp: {
|
||
thumb: IGatsbyImageData
|
||
full: IGatsbyImageData
|
||
meta: {
|
||
originalName: string
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
interface PageProps {
|
||
data: {
|
||
images: {
|
||
edges: ImageSharpEdge[]
|
||
}
|
||
}
|
||
}
|
||
|
||
const Home: React.FC<PageProps> = ({ data, location }) => {
|
||
const images = data.images.edges.map(({ node }) => ({
|
||
...node.childImageSharp,
|
||
// Use original name as caption.
|
||
// The `originalName` is queried in a nested field,
|
||
// but the `Gallery` component expects `caption` at the top level.
|
||
caption: node.childImageSharp.meta.originalName
|
||
}))
|
||
|
||
return (
|
||
<Layout
|
||
location={location}
|
||
heading="Flexible and Secure Data Modification"
|
||
desc="Data Controller for SAS® enables business users to update IT owned source tables, secured by review / approve workflow and full audit trail."
|
||
>
|
||
<Seo />
|
||
<Section color="black" bgColor="white">
|
||
<div className="row">
|
||
<div className="col-md-3">
|
||
<Art src={leftArt} info="Business Owner" />
|
||
</div>
|
||
<div className="col-md-6">
|
||
<SectionHeading>Who is Data Controller for?</SectionHeading>
|
||
<SectionDesc>
|
||
Data Controller is designed to provide business users with a tool
|
||
which can be included in their overall armoury for regulatory
|
||
reporting.
|
||
</SectionDesc>
|
||
<SectionDesc>
|
||
Having worked in data-intensive SAS environments for many years,
|
||
the founders of Data Controller experienced first hand the
|
||
inefficient practices that reporting teams had to endure when
|
||
changes needed to be made to the data and source system access
|
||
wasn’t possible.
|
||
</SectionDesc>
|
||
<SectionDesc>
|
||
It was clear to see that users needed the ability to self-serve
|
||
their data updates. That data owners should have the chance to
|
||
review and approve those updates. And that all changes to data
|
||
should be safe and secure, as well as tracked and visible for
|
||
audit reasons.
|
||
</SectionDesc>
|
||
<SectionDesc>
|
||
The Data Controller is useful for any Enterprise that needs to
|
||
perform manual data uploads into their preferred database, in
|
||
real-time, with full validation, approval, security, and control.
|
||
</SectionDesc>
|
||
</div>
|
||
<div className="col-md-3">
|
||
<Art src={rightArt} info="Clinical Research Data" />
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
<Section color="black" bgColor="white">
|
||
<div className="row">
|
||
<div className="offset-md-2 col-md-8">
|
||
<SectionDesc>Devoted to</SectionDesc>
|
||
<SectionHeading>SAS® Users, Admins and Developers</SectionHeading>
|
||
<SectionDesc>
|
||
Most (if not all) SAS users have the basic need to load, modify or
|
||
delete data in SAS. They can typically achieve this by:
|
||
</SectionDesc>
|
||
</div>
|
||
</div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<div className="row">
|
||
<div className="col-md-4">
|
||
<Reason text="Placing files on network drives ready for a batch program to load them" />
|
||
<Reason text="Updating data directly using SAS® code" />
|
||
<Reason text="Opening a dataset in Enterprise Guide and changing a value" />
|
||
<Reason text="Asking a DBA to run a script update" />
|
||
</div>
|
||
<div className="col-md-4">
|
||
<CenteredText>
|
||
The approaches mentioned are less than ideal for a number of
|
||
reasons:
|
||
</CenteredText>
|
||
<Art src={dcSoftwareArt} info="Data Controller Software" />
|
||
</div>
|
||
<div className="col-md-4">
|
||
<Reason
|
||
text="Every new piece of data requires a new job or program to be created to load it"
|
||
bgColor="red"
|
||
/>
|
||
<Reason
|
||
text="END USERS NEED TO BE GRANTED MODIFY ACCESS TO SENSITIVE DATA LOCATIONS"
|
||
bgColor="red"
|
||
/>
|
||
<Reason text="High risk of locking datasets" bgColor="red" />
|
||
<Reason
|
||
text="Need for change requests and delays to the process"
|
||
bgColor="red"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<div className="row">
|
||
<div className="offset-md-2 col-md-8">
|
||
<SectionHeading>Data Controller Features</SectionHeading>
|
||
<SectionDesc>
|
||
Our goal with Data Controller is to focus on great user experience
|
||
and auditor satisfaction.
|
||
<br />
|
||
Our software saves years of development and testing, as well as
|
||
avoiding a ‘black box’ custom build.
|
||
<br />
|
||
It is a SAS® Powered Web Application with the following features:
|
||
</SectionDesc>
|
||
</div>
|
||
</div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<div className="row">
|
||
<Feature
|
||
title="Real-time"
|
||
desc="Intra day, concurrent updates are managed using a lock table and queuing mechanism. Updates are aborted if another user has changed the table since the approval diff was generated."
|
||
Icon={AiOutlineClockCircle}
|
||
className="col-sm-6 col-md-6 col-xl-4"
|
||
/>
|
||
<Feature
|
||
title="Secure"
|
||
desc="The existing SASLogon framework is used to manage Authentication & Authorisation. End users do not require direct access to the target tables."
|
||
Icon={AiFillLock}
|
||
className="col-sm-6 col-md-6 col-xl-4"
|
||
/>
|
||
<Feature
|
||
title="Approval Mechanism"
|
||
desc="All data changes require 1 or more approvals before updating the table. The approver sees only the changes that will be applied to the target (new/deleted/changed rows)."
|
||
Icon={TiTick}
|
||
className="col-sm-6 col-md-6 col-xl-4"
|
||
/>
|
||
<Feature
|
||
title="Loading Tables of Different Types"
|
||
desc="Using SAS® libname engines, you can securely update tables in your preferred database. Data Controller supports Retained keys, SCD2 loads, Bitemporal, and composite primary keys."
|
||
Icon={HiOutlineRefresh}
|
||
className="col-sm-6 col-md-6 col-xl-3"
|
||
/>
|
||
<Feature
|
||
title="Full Audit History"
|
||
desc="You are able to track every change of data, including who made the change, when, why, and what the actual change was. You are able to access this feature on the History page."
|
||
Icon={MdHistory}
|
||
className="col-sm-6 col-md-4 col-xl-3"
|
||
/>
|
||
<Feature
|
||
title="Zero Code"
|
||
desc="Adding new tables is a matter of configuration, which can perform entirely within the tool itself. No need to define column types, lengths etc – these are dynamically figured out at runtime."
|
||
Icon={BsCode}
|
||
className="col-sm-6 col-md-4 col-xl-3"
|
||
/>
|
||
<Feature
|
||
title="Workflow"
|
||
desc="You are able to configure “Hook scripts” to execute before and after each action. So you could run a data quality check after uploading a mapping table or run a model after changing a parameter."
|
||
Icon={BiNetworkChart}
|
||
className="col-sm-6 col-md-4 col-xl-3"
|
||
/>
|
||
</div>
|
||
</Section>
|
||
<Section color="black" bgColor="#f8f8f8">
|
||
<div className="row">
|
||
<div className="offset-md-2 col-md-8">
|
||
<SectionDesc>Take a look at</SectionDesc>
|
||
<SectionHeading>Data Controller Design</SectionHeading>
|
||
<SectionDesc>
|
||
We designed Data Controller to work on multiple devices and
|
||
different screen types. This, combined with SAS® scalability and
|
||
security, gives you full flexibility and location independence
|
||
when managing your data.
|
||
</SectionDesc>
|
||
<Art src={dcDesign} info="Data Controller Design" />
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
<Section color="black" bgColor="white">
|
||
<SectionHeading>See How it Looks</SectionHeading>
|
||
<Gallery
|
||
images={images}
|
||
gutter={0}
|
||
customWrapper={({ children, onClick }) => (
|
||
<ThumbnailWrapper onClick={onClick}>{children}</ThumbnailWrapper>
|
||
)}
|
||
/>
|
||
</Section>
|
||
<ScheduleDemo />
|
||
</Layout>
|
||
)
|
||
}
|
||
|
||
export default Home
|
||
|
||
export const pageQuery = graphql`
|
||
query ImagesForGallery {
|
||
images: allFile(
|
||
filter: { relativeDirectory: { eq: "gallery" } }
|
||
sort: { fields: name }
|
||
) {
|
||
edges {
|
||
node {
|
||
childImageSharp {
|
||
thumb: gatsbyImageData(
|
||
width: 300
|
||
height: 270
|
||
placeholder: BLURRED
|
||
)
|
||
full: gatsbyImageData(layout: FULL_WIDTH)
|
||
meta: fixed {
|
||
originalName
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
`
|